程序员人生 网站导航

你不知道的JavaScript--Item15 prototype原型和原型链详解

栏目:htmlcss时间:2016-04-05 07:47:57

用过JavaScript的同学们肯定都对prototype如雷灌耳,但是这究竟是个甚么东西却让初学者莫衷1是,只知道函数都会有1个prototype属性,可以为其添加函数供实例访问,其它的就不清楚了,最近看了1些 JavaScript高级程序设计,终究揭开了其神秘面纱。

每一个函数都有1个prototype属性,这个属性是指向1个对象的援用,这个对象称为原型对象,原型对象包括函数实例同享的方法和属性,也就是说将函数用作构造函数调用(使用new操作符调用)的时候,新创建的对象会从原型对象上继承属性和方法。不像传统的面向对象语言,Javascript的继承机制基于原型,而不是Class类。

1、私有变量、函数

在具体说prototype前说几个相干的东东,可以更好的理解prototype的设计意图。在了解JavaScript原型链之前,有必要先了解1下JavaScript的作用域链。JavaScript的函数作用域,在函数内定义的变量和函数如果不对外提供接口,那末外部将没法访问到,也就是变成私有变量和私有函数。

function Obj(){ var a=0; //私有变量 var fn=function(){ //私有函数 } }

这样在函数对象Obj外部没法访问变量a和函数fn,它们就变成私有的,只能在Obj内部使用,即便是函数Obj的实例依然没法访问这些变量和函数

var o=new Obj(); console.log(o.a); //undefined console.log(o.fn); //undefined

2、静态变量、函数

当定义1个函数后通过 “.”为其添加的属性和函数,通过对象本身依然可以访问得到,但是其实例却访问不到,这样的变量和函数分别被称为静态变量和静态函数,用过Java、C#的同学很好理解静态的含义。

function Obj(){} Obj.a=0; //静态变量 Obj.fn=function(){ //静态函数 } console.log(Obj.a); //0 console.log(typeof Obj.fn); //function var o=new Obj(); console.log(o.a); //undefined console.log(typeof o.fn); //undefined

3、实例变量、函数

在面向对象编程中除1些库函数我们还是希望在对象定义的时候同时定义1些属性和方法,实例化后可以访问,JavaScript也能做到这样

function Obj(){ this.a=[]; //实例变量 this.fn=function(){ //实例方法 } } console.log(typeof Obj.a); //undefined console.log(typeof Obj.fn); //undefined var o=new Obj(); console.log(typeof o.a); //object console.log(typeof o.fn); //function

这样可以到达上述目的,但是

function Obj(){ this.a=[]; //实例变量 this.fn=function(){ //实例方法 } } var o1=new Obj(); o1.a.push(1); o1.fn={}; console.log(o1.a); //[1] console.log(typeof o1.fn); //object var o2=new Obj(); console.log(o2.a); //[] console.log(typeof o2.fn); //function

上面的代码运行结果完全符合预期,但同时也说明1个问题,在o1中修改了a和fn,而在o2中没有改变,由于数组和函数都是对象,是援用类型,这就说明o1中的属性和方法与o2中的属性与方法虽然同名但却不是1个援用,而是对Obj对象定义的属性和方法的1个复制。

这个对属性来讲没有甚么问题,但是对方法来讲问题就很大了,由于方法都是在做完全1样的功能,但是却又两份复制,如果1个函数对象有上千和实例方法,那末它的每一个实例都要保持1份上千个方法的复制,这明显是不科学的,这可肿么办呢,prototype应运而生。先看看对象的含义:

4 . 普通对象与函数对象

JavaScript 中,万物皆对象!但对象也是有区分的。分为普通对象和函数对象,Object ,Function 是JS自带的函数对象。下面举例说明

function f1(){}; var f2 = function(){}; var f3 = new Function(str,console.log(str)); var o3 = new f1(); var o1 = {}; var o2 =new Object(); console.log(typeof Object); //function console.log(typeof Function); //function console.log(typeof o1); //object console.log(typeof o2); //object console.log(typeof o3); //object console.log(typeof f1); //function console.log(typeof f2); //function console.log(typeof f3); //function

在上面的例子中 o1 o2 o3 为普通对象,f1 f2 f3 为函数对象。怎样辨别,其实很简单,凡是通过 new Function() 创建的对象都是函数对象,其他的都是普通对象。 f1,f2,归根结柢都是通过 new Function()的方式进行创建的。Function Object 也都是通过 New Function()创建的。

5、prototype原型

在JavaScript 中,每当定义1个对象(函数)时候,对象中都会包括1些预定义的属性。其中函数对象的1个属性就是原型对象 prototype。注:普通对象没有prototype,但有_ proto _属性。

原型对象其实就是普通对象(Function.prototype除外,它是函数对象,但它很特殊,他没有prototype属性(前面说道函数对象都有prototype属性))。看下面的例子:

function f1(){}; console.log(f1.prototype) //f1{} console.log(typeof f1.prototype) //Object console.log(typeof Function.prototype) // Function,这个特殊 console.log(typeof Object.prototype) // Object console.log(typeof Function.prototype.prototype) //undefined

从这句console.log(f1.prototype) //f1 {} 的输出就结果可以看出,f1.prototype就是f1的1个实例对象(这里就是f1的原型对象)。就是在f1创建的时候,创建了1个它的实例对象并赋值给它的prototype,基本进程以下:

var temp = new f1(); f1. prototype = temp;

所以,Function.prototype为何是函数对象就迎刃而解了,上文提到凡是new Function ()产生的对象都是函数对象,所以temp1是函数对象。

var temp1 = new Function (); Function.prototype = temp1;

那原型对象是用来做甚么的呢?主要作用是用于继承。举了例子:

var person = function(name){ this.name = name }; person.prototype.getName = function(){ return this.name; // 这里this指向原型对象person ==>person.name } var xpg = new person(‘xiaopingguo’); xpg.getName(); //xiaopingguo

从这个例子可以看出,通过给person.prototype设置了1个函数对象的属性,那有person实例(例中:xpg)出来的普通对象就继承了这个属性。具体是怎样实现的继承,就要讲到下面的原型链了。

在深入的讲1遍:不管甚么时候,只要创建了1个新函数,就会根据1组特定的规则为该函数创建1个prototype属性(同时它也是1个对象),默许情况下prototype属性(对象)会默许取得1个constructor(构造函数)属性,这个属性是1个指向prototype属性所在函数的指针,有些绕了啊,写代码、上图!

function Person(){ }

这里写图片描述

根据上图可以看出Person对象会自动取得prototyp属性,而prototype也是1个对象,会自动取得1个constructor属性,该属性正是指向Person对象。

当调用构造函数创建1个实例的时候,实例内部将包括1个内部指针(很多阅读器这个指针名字为_ proto _ )指向构造函数的prototype,这个连接存在于实例和构造函数的prototype之间,而不是实例与构造函数之间。

function Person(name){ this.name=name; } Person.prototype.printName=function(){ alert(this.name); } var person1=new Person(Byron); var person2=new Person(Frank);

这里写图片描述

Person的实例person1中包括了name属性,同时自动生成1个_ proto _属性,该属性指向Person的prototype,可以访问到prototype内定义的printName方法,大概就是这个模样的:

这里写图片描述

写段程序测试1下看看prototype内属性、方法是能够同享

function Person(name){ this.name=name; } Person.prototype.share=[]; Person.prototype.printName=function(){ alert(this.name); } var person1=new Person(Byron); var person2=new Person(Frank); person1.share.push(1); person2.share.push(2); console.log(person2.share); //[1,2]

果不其然!实际上当代码读取某个对象的某个属性的时候,都会履行1遍搜索,目标是具有给定名字的属性,搜索首先从对象实例开始,如果在实例中找到该属性则返回,如果没有则查找prototype,如果还是没有找到则继续递归prototype的prototype对象,直到找到为止,如果递归到object依然没有则返回毛病。一样道理如果在实例中定义如prototype同名的属性或函数,则会覆盖prototype的属性或函数。―-这就是Javascript的原型链。

function Person(name){ this.name=name; } Person.prototype.share=[]; var person=new Person(Byron); person.share=0; console.log(person.share); //0;而不是prototype中的[]

6.原型链

JS在创建对象(不论是普通对象还是函数对象)的时候,都有1个叫做_ proto _的内置属性,用于指向创建它的函数对象的原型对象prototype。以上面的例子

console.log(xpg.__ proto __ === person.prototype) //true

一样,person.prototype对象也有_ proto _属性,它指向创建它的函数对象(Object)的prototype

console.log(person.prototype.__ proto __=== Object.prototype) //true

继续,Object.prototype对象也有_ proto _属性,但它比较特殊,为null

console.log(Object.prototype.__ proto __) //null

这个有_ proto _ 串起来的直到Object.prototype._ proto _为null的链叫做原型链。以下图:

这里写图片描述

原型链中属性查找:
当查找1个对象的属性时,JavaScript 会向上遍历原型链,直到找到给定名称的属性为止,到查找到达原型链的顶部 - 也就是 Object.prototype - 但是依然没有找到指定的属性,就会返回 undefined,我们来看1个例子:

function foo() { this.add = function (x, y) { return x + y; } } foo.prototype.add = function (x, y) { return x + y + 10; } Object.prototype.subtract = function (x, y) { return x - y; } var f = new foo(); alert(f.add(1, 2)); //结果是3,而不是13 alert(f.subtract(1, 2)); //结果是⑴

通过代码运行,我们发现subtract是安装我们所说的向上查找来得到结果的,但是add方式有点小不同,这也是我想强调的,就是属性在查找的时候是先查找本身的属性,如果没有再查找原型,再没有,再往上走,1直插到Object的原型上,所以在某种层面上说,用 for in语句遍历属性的时候,效力也是个问题。

还有1点我们需要注意的是,我们可以赋值任何类型的对象到原型上,但是不能赋值原子类型的值,比如以下代码是无效的:

function Foo() {} Foo.prototype = 1; // 无效

7、构造函数、实例和原型对象的区分

实例就是通过构造函数创建的。实例1创造出来就具有constructor属性(指向构造函数)和proto属性(指向原型对象),

构造函数中有1个prototype属性,这个属性是1个指针,指向它的原型对象。

原型对象内部也有1个指针(constructor属性)指向构造函数:Person.prototype.constructor = Person;

实例可以访问原型对象上定义的属性和方法。

在这里person1和person2就是实例,prototype是他们的原型对象。

再举个栗子:

<script type="text/javascript"> function Animal(name) //积累构造函数 { this.name = name;//设置对象属性 } Animal.prototype.behavior = function() //给基类构造函数的prototype添加behavior方法 { alert("this is a "+this.name); } var Dog = new Animal("dog");//创建Dog对象 var Cat = new Animal("cat");//创建Cat对象 Dog.behavior();//通过Dog对象直接调用behavior方法 Cat.behavior();//output "this is a cat" alert(Dog.behavior==Cat.behavior);//output true; script>

8、原型的使用

原型使用方式1:
在使用原型之前,我们需要先将代码做1下小修改:

var Calculator = function (decimalDigits, tax) {
        this.decimalDigits = decimalDigits;
        this.tax = tax;
    };

然后,通过给Calculator对象的prototype属性赋值对象字面量来设定Calculator对象的原型。

Calculator.prototype = { add: function (x, y) { return x + y; }, subtract: function (x, y) { return x - y; } }; //alert((new Calculator()).add(1, 3));

我们就能够new Calculator对象以后,就能够调用add方法来计算结果了。

原型使用方式2:
第2种方式是,在赋值原型prototype的时候使用function立即履行的表达式来赋值,即以下格式:

Calculator.prototype = function () { } ();

它的好处在前面的Item里已知道了,就是可以封装私有的function,通过return的情势暴露出简单的使用名称,以到达public/private的效果,修改后的代码以下:

Calculator.prototype = function () { add = function (x, y) { return x + y; }, subtract = function (x, y) { return x - y; } return { add: add, subtract: subtract } } (); //alert((new Calculator()).add(11, 3));

一样的方式,我们可以new Calculator对象以后调用add方法来计算结果了。

分步声明:
上述使用原型的时候,有1个限制就是1次性设置了原型对象,我们再来讲1下如何分来设置原型的每一个属性吧。

var BaseCalculator = function () { //为每一个实例都声明1个小数位数 this.decimalDigits = 2; };

//使用原型给BaseCalculator扩大

BaseCalculator.prototype.add = function (x, y) { return x + y; }; BaseCalculator.prototype.subtract = function (x, y) { return x - y; };

声明了1个BaseCalculator对象,构造函数里会初始化1个小数位数的属性decimalDigits,然后通过原型属性设置2个function,分别是add(x,y)和subtract(x,y),固然你也能够使用前面提到的2种方式的任何1种,我们的主要目的是看如何将BaseCalculator对象设置到真实的Calculator的原型上。

var BaseCalculator = function() { this.decimalDigits = 2; }; BaseCalculator.prototype = { add: function(x, y) { return x + y; }, subtract: function(x, y) { return x - y; } };

重写原型:

在使用第3方JS类库的时候,常常有时候他们定义的原型方法是不能满足我们的需要,但是又离不开这个类库,所以这时候候我们就需要重写他们的原型中的1个或多个属性或function,我们可以通过继续声明的一样的add代码的情势来到达覆盖重写前面的add功能,代码以下:

//覆盖前面Calculator的add() function Calculator.prototype.add = function (x, y) { return x + y + this.tax; }; var calc = new Calculator(); alert(calc.add(1, 1));

这样,我们计算得出的结果就比原来多出了1个tax的值,但是有1点需要注意:那就是重写的代码需要放在最后,这样才能覆盖前面的代码。

9、hasOwnProperty函数

hasOwnProperty是Object.prototype的1个方法,它可是个好东西,他能判断1个对象是不是包括自定义属性而不是原型链上的属性,由于hasOwnProperty 是 JavaScript 中唯逐一个处理属性但是不查找原型链的函数。

// 修改Object.prototype Object.prototype.bar = 1; var foo = {goo: undefined}; foo.bar; // 1 bar in foo; // true foo.hasOwnProperty(bar); // false foo.hasOwnProperty(goo); // true

只有 hasOwnProperty 可以给出正确和期望的结果,这在遍历对象的属性时会很有用。 没有其它方法可以用来排除原型链上的属性,而不是定义在对象本身上的属性。

但有个恶心的地方是:JavaScript 不会保护 hasOwnProperty 被非法占用,因此如果1个对象碰巧存在这个属性,就需要使用外部的 hasOwnProperty 函数来获得正确的结果。

var foo = { hasOwnProperty: function() { return false; }, bar: Here be dragons }; foo.hasOwnProperty(bar); // 总是返回 false // 使用{}对象的 hasOwnProperty,并将其上下为设置为foo {}.hasOwnProperty.call(foo, bar); // true

当检查对象上某个属性是不是存在时,hasOwnProperty 是唯1可用的方法。同时在使用 for in loop 遍历对象时,推荐总是使用 hasOwnProperty 方法,这将会避免原型对象扩大带来的干扰,我们来看1下例子:

// 修改 Object.prototype Object.prototype.bar = 1; var foo = {moo: 2}; for(var i in foo) { console.log(i); // 输出两个属性:bar 和 moo }

我们没办法改变for in语句的行动,所以想过滤结果就只能使用hasOwnProperty 方法,代码以下:

// foo 变量是上例中的 for(var i in foo) { if (foo.hasOwnProperty(i)) { console.log(i); //moo } }

这个版本的代码是唯1正确的写法。由于我们使用了 hasOwnProperty,所以这次只输出 moo。如果不使用 hasOwnProperty,则这段代码在原生对象原型(比如 Object.prototype)被扩大时可能会出错。

总结:推荐使用 hasOwnProperty,不要对代码运行的环境做任何假定,不要假定原生对象是不是已被扩大了

10、拓展

_ ptoto _属性

_ ptoto _属性(IE阅读器不支持)是实例指向原型对象的1个指针,它的作用就是指向构造函数的原型属性constructor,通过这两个属性,就能够访问原型里的属性和方法了。

Javascript中的对象实例本质上是由1系列的属性组成的,在这些属性中,有1个内部的不可见的特殊属性――_ proto _,该属性的值指向该对象实例的原型,1个对象实例只具有1个唯1的原型。

function Box(){ //大写,代表构造函数 Box.prototype.name = "trigkit4";//原型属性 Box.prototype.age = "21"; Box.prototype.run = function()//原型方法 { return this.name + this.age + studying; } } var box1 = new Box(); var box2 = new Box(); alert(box1.constructor);//构造属性,可以获得构造函数本身, //作用是被原型指针定位,然后得到构造函数本身

_ proto _属性和prototype属性的区分

prototype是原型对象中专有的属性。
_ proto _ 是普通对象的隐式属性,在new的时候,会指向prototype所指的对象;
_ ptoto _ 实际上是某个实体对象的属性,而prototype则是属于构造函数的属性。_ ptoto _只能在学习或调试的环境下使用。

原型模式的履行流程

1.先查找构造函数实例里的属性或方法,如果有,就立即返回。
2.如果构造函数的实例没有,就去它的原型对象里找,如果有,就立即返回

原型对象的

function Box(){ //大写,代表构造函数 Box.prototype.name = "trigkit4";//原型属性 Box.prototype.age = "21"; Box.prototype.run = function()//原型方法 { return this.name + this.age + studying; } } var box1 = new Box(); alert(box1.name);//trigkit4,原型里的值 box1.name = "Lee"; alert(box1.name);//Lee,就进原则 var box2 = new Box(); alert(box2.name);//trigkit4,原型的值,没有被box1修改

构造函数的

function Box(){ this.name = "Bill"; } Box.prototype.name = "trigkit4";//原型属性 Box.prototype.age = "21"; Box.prototype.run = function()//原型方法 { return this.name + this.age + studying; } var box1 = new Box(); alert(box1.name);//Bill,原型里的值 box1.name = "Lee"; alert(box1.name);//Lee,就进原则

综上,整理1下:

function Person(){}; Person.prototype.name = "trigkit4"; Person.prototype.say = function(){ alert("?Hi"); } var p1 = new Person();//prototype是p1和p2的原型对象 var p2 = new Person();//p2为实例化对象,其内部有1个__proto__属性,指向Person的prototype console.log(p1.prototype);//undefined,这个属性是1个对象,访问不到 console.log(Person.prototype);//Person console.log(Person.prototype.constructor);//原型对象内部也有1个指针(constructor属性)指向构造函数 console.log(p1.__proto__);//这个属性是1个指针指向prototype原型对象 p1.say();//实例可以访问到在原型对象上定义的属性和方法
  • 构造函数.prototype = 原型对象
  • 原型对象.constructor = 构造函数(模板)
  • 原型对象.isPrototypeof(实例对象) 判断实例对象的原型 是否是当前对象
------分隔线----------------------------
------分隔线----------------------------

最新技术推荐