javascript函数原型理解

时间:2022-03-30 13:15:19


一、当引用一个对象的属性时,若该对象没有此属性,则会查找该对象的原型,若原型上存在该属性,则返回该属性。

 

 1     <script type="text/javascript">
2 var o={age:23,name:'zhangsan'};//直接定义的对象
3 var Foo=function(){
4 this.name='zhangsan';
5 }
6 var f=new Foo();//由构造函数生成的对象
7 console.log("先看下对象o的原型链");
8 console.log("o.__proto__===Object.prototype",o.__proto__===Object.prototype);
9 console.log("Object.prototype.__proto__===null",Object.prototype.__proto__===null);
10 console.log("先看下对象f的原型链");
11 console.log("f.__proto__===Foo.prototype",f.__proto__===Foo.prototype);
12 console.log("Foo.prototype.__proto__===Object.prototype",Foo.prototype.__proto__===Object.prototype);
13 console.log("Foo.prototype.constructor===Foo",Foo.prototype.constructor===Foo);
14 </script>

 

上面代码运行结果如下:

javascript函数原型理解

从运行结果可知:

  1.一个普通对象的__proto__指向Object.prototype,而Object.prototype.__proto__指向null.到达原型链的终点。

  2.由构造函数构造的对象,其__proto__指向Foo.prototype,而Foo.prototype.__proto__指向Object.prototype。

  3.函数Foo.prototype.constructor指向Foo本身。

 二、改变函数prototype的例子

 1         var a={
2 name:'zhangsan',
3 age:20
4 };
5 function Foo(){
6 this.sex='man';
7 }
8 Foo.prototype=a;//此处改变了函数的prototype
9 var f=new Foo();
10 console.log("f.__proto__===Foo.prototype",f.__proto__===Foo.prototype);
11 console.log("f.__proto__===a",f.__proto__===a);
12 console.log("Foo.prototype.__proto__===Object.prototype",Foo.prototype.__proto__===Object.prototype);

运行结果如下:

javascript函数原型理解

由运行结果可知:

  1.此对象的 __proto__仍指向Foo.prototype,也指向对象a,a的__proto__指向Object.prototype。

  2.针对上面这种情况,我们再测试两个:

  console.log(Foo.prototype.constructor===Object);  //true 如果没有改变函数Foo.prototype,那么Foo.prototype.constructor===Foo,这里改变了Foo.prototype,导致Foo.prototype===a。

  console.log(a.constructor===Object);  //普通对象的constructor为Object。

三、修正Foo.prototype.constructor=Foo之后

 1         var a={
2 name:'zhangsan',
3 age:20
4 };
5 function Foo(){
6 this.sex='man';
7 }
8 Foo.prototype=a;//此处改变了函数的prototype
9 Foo.prototype.constructor=Foo;//这里修正了constructor,但是产生了一个问题
10 var f=new Foo();
11 console.log("f.__proto__===Foo.prototype",f.__proto__===Foo.prototype);// true
12 console.log("f.__proto__===a",f.__proto__===a);//true
13 console.log("Foo.prototype.__proto__===Object.prototype",Foo.prototype.__proto__===Object.prototype);//true
14 console.log(Foo.prototype.constructor===Foo);//true
15 console.log(a.constructor===Foo);//true

在最后位置,a的constructor也被改变了。为什么呢?因为a是一个对象,将引用传给了Foo.prototype,这样Foo.prototype改变了,也影响到了a。

最后附上一张神图,此图可以解惑了-.-

javascript函数原型理解