javascript 原型详解

引:http://www.cnblogs.com/wangfupeng1988/p/3978131.html

1.什么是javascript原型

 每一个函数都有prototype属性(默认生成的)和原型。这个prototype的属性值是一个对象(属性的集合,再次强调!),默认的只有一个叫做constructor的属性,指向这个函数本身。

javascript 原型详解

如上图,SuperType是是一个函数,右侧的方框就是它的原型。

function Fn() { }
Fn.prototype.name = '王福朋';
Fn.prototype.getYear = function () {
return ;
}; var fn = new Fn();
console.log(fn.name);
console.log(fn.getYear());

即,Fn是一个函数,fn对象是从Fn函数new出来的,这样fn对象就可以调用Fn.prototype中的属性。

因为每个对象都有一个隐藏的属性——“__proto__”,这个属性引用了创建这个对象的函数的prototype。即:fn.__proto__ === Fn.prototype

每个函数function都有一个prototype,即原型。这里再加一句话——每个对象都有一个__proto__,可成为隐式原型.

 var obj={};

obj这个对象本质上是被Object函数创建的,因此obj.__proto__=== Object.prototype。我们可以用一个图来表示。

javascript 原型详解

即,每个对象都有一个__proto__属性,指向创建该对象的函数的prototype。

在说明“Object prototype”之前,先说一下自定义函数的prototype。自定义函数的prototype本质上就是和 var obj = {} 是一样的,都是被Object创建,所以它的__proto__指向的就是Object.prototype。

但是Object.prototype确实一个特例——它的__proto__指向的是null,切记切记!

javascript 原型详解

好了,根据上面说的一句话——对象的__proto__指向的是创建它的函数的prototype,就会出现:Object.__proto__ === Function.prototype。用一个图来表示。

javascript 原型详解

上图中,很明显的标出了:自定义函数Foo.__proto__指向Function.prototypeObject.__proto__指向Function.prototype,唉,怎么还有一个……Function.__proto__指向Function.prototype?这不成了循环引用了?

对!是一个环形结构。

其实稍微想一下就明白了。Function也是一个函数,函数是一种对象,也有__proto__属性。既然是函数,那么它一定是被Function创建。所以——Function是被自身创建的。所以它的__proto__指向了自身的Prototype。

篇幅不少了,估计也都看烦了。快结束了。

最后一个问题:Function.prototype指向的对象,它的__proto__是不是也指向Object.prototype?

答案是肯定的。因为Function.prototype指向的对象也是一个普通的被Object创建的对象,所以也遵循基本的规则。

javascript 原型详解

 因为原型方法和属性在内存中是共享的,可以用于节约内存,不会因为new一个对象,就开辟一块内存用于存放相同的方法。

javascript 原型详解

javascript 原型详解

上一篇:jiajianhao


下一篇:HTML5 Canvas中实现绘制一个像素宽的细线