Fork me on GitHub

javascript 原型机制

JavaScript 原型链

prototype,__proto__,constructor

在 JavaScript 原型继承结构里面,规范中用 [[Prototype]] 表示对象隐式的原型,在 JavaScript 中用 __proto__ 表示,并且在 Firefox 和 Chrome 浏览器中是可以访问得到这个属性的,但是 IE 下不行。所有 JavaScript 对象都有 __proto__ 属性,但只有 Object.prototype.__proto__ 为 null,前提是没有在 Firefox 或者 Chrome 下修改过这个属性。这个属性指向它的原型对象。 至于显示的原型,在 JavaScript 里用 prototype 属性表示。

/**
* 声明构造函数Person,创建Person的实例p
*/
var Person = function () { };
var p = new Person();

//等价于:
var p = {}; //初始化一个对象p
p.__proto__ = Person.prototype; //
Person.call(p); //初始化p 

证明一下:

var Person = function () { };
var p = new Person();
p.__proto__ === Person.prototype; // true

每个函数都有一个prototype属性,这个属性是指向一个对象的引用,这个对象称为原型对象,原型对象包含函数实例共享的方法和属性,也就是说将函数用作构造函数调用(使用new操作符调用)的时候,新创建的对象会从原型对象上继承属性和方法。默认情况下prototype属性会默认获得一个constructor(构造函数)属性,这个属性是一个指向prototype属性所在函数的指针,有些绕了啊,写代码、上图!  

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

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

Function,Object

function f1(){}
var f2 = function(){}
var f3 = new Function('str','console.log(str)');
f1 instanceof Function //true

f2 instanceof Function //true

f3 instanceof Function //true

Object instanceof Function   //true
Function instanceof Function //true

Object.__proto__ === Function.prototype   //true
Function.__proto__ === Function.prototype //true

f1、f2、f3为函数但是其实函数也是对象,是Function的实例。

Function , Object 都是函数引用,由Function创建出来,所有均有__proto__属性,指向Function.prototype。

 

总结

每一个函数都有prototype这个显示属性,这个属性是一个引用,指向一个对象,这个对象包含一个属性constructor,指向prototype属性所在的函数的指针。

每一个实例都有一个__proto__这个隐藏属性,这个属性指向实例构造函数的prototype属性。

当我们访问一个对象的属性 时,如果这个对象内部不存在这个属性,那么他就会去__proto__里找这个属性,这个__proto__又会有自己的__proto__,于是就这样 一直找下去,也就是我们平时所说的原型链的概念。

posted @ 2014-05-19 19:46  云中桥  阅读(613)  评论(0编辑  收藏  举报