JS中prototype和__proto__分析

    今天偶然看到js继承的问题,想到之前看过的关于prototype原型链集成,可是一直不明白 prototype和__proto__之间到底什么关系,于是抽出时间来查了相关资料研究了一下午,下面是今天的小成果。希望大家多多批评指正。

   首先 先看js中原型链继承的方式

function monkey(){
    this.climb = function (){
        alert('I can climb')
    }
}
 function human(){
    this.say = function (){
      alert('I can say');
    }
 }

 var Tom = new human();
 Tom.say();//毫无疑问 弹出 i can say

这时我们想要Tom拥有mokey中的climb方法只需做如下修改

function monkey(){
    this.climb = function (){
        alert('I can climb')
    }
}
 function human(){
    this.say = function (){
      alert('I can say');
    }
 }
human.prototype = new monkey();//human的原型赋值为monkey的实例
var Tom = new human();
Tom.say();
Tom.climb();//此时弹出 i can climb

通过给human的原型赋值 完成了继承。

下面我们来看__proto__和prototype之间的关系

在js中,每一个对象都有一个__proto__属性指向其原型对象

我们都知道 js 中一切皆对象,那么任何一个自定义函数也是一个对象。

那么我们看如下代码

 function human(){//human 为自定义函数 本身就是一个对象
    this.say = function (){
      alert('I can say');
    }
 }

var Tom = new human();

console.log(human.__proto__);//输出为function Empty(){}
console.log(human.prototype);//输出为human{}
console.log(Tom.__proto__);//输出为human{}
console.log(Tom.prototype);//输出为undefined
console.log(Tom.__proto__ === human.prototype);//输出为true

如上代码所示,human方法是自定义方法,那么它也是一个对象 ,于是human方法也就有__proto__属性指向其原型对象,

打印human的__proto__属性发现是 function Empty(){}

而human的prototype 是 human{},Tom.__proto__ 也是human{}

而 打印实例Tom.__proto__ === human.prototype 是 返回为true

通过以上可以发现 实例的__proto__就是方法(也可以叫类)的prototype;

而实例的prototype是undefined 未定义,也就是说 实例没有prototype属性

 

祖先Object

js中对象有一个共同的祖先那就是Object 

所有的对象的最终原型对象都是Object , 以上代码中 human其实相当于一个函数对象实例,根据 实例的__proto__就是方法(也可以叫类)的prototype

即 human.__proto__  == Function.prototype

而 Function.prototype.__proto__ 就等于 Object.protype

alert( Function.prototype.__proto__ === Object.prototype);//弹出 true

而Object.prototyep.__proto__ 为null

alert(Object.prototype.__proto__);//弹出 null

这也说明了 Object再往上没有祖先了

既然Object是祖先 那么我们可以给Object.__proto__添加方法从而是所有的对象都拥有这个方法

 function human(){
    this.say = function (){
      alert('I can say');
    }
 }
Object.prototype.sing = function(){ alert('i can sing');}
var Tom = new human();
Tom.sing();//弹出 i can sing

总结

 实例的__proto__等于方法(也可以叫类)的prototype;

而方法本身就可以看做是Function的实例

Function又可是看做是 Object的实例

即 方法的__proto__等于 Function.prototype 

Function.prototype.__proto__ == Object.prototype 

 

posted on 2014-10-15 18:17  刘溜溜  阅读(567)  评论(0编辑  收藏  举报

导航