之前对JS的prototype知识比较模糊,今天理清了记下来,以防忘记,直切正题:
1.要明白原型链,就必须先清楚JS的构造函数模式:
js是面向对象的语言,既然是面型对象,就一定会有一个对象的模板,Java中用"类"来作为对象的模板,而JS中,可以用构造函数来作为对象的模板,你可以认为相当于Java中的"类",
写法如下所示:
function Cat(name,color){
this.name=name;
this.color=color;
}
var c = new Cat();
Cat函数就是构造函数,构造函数中的this指向的就是当脚本运行时Cat所生成的实例,如果把构造函数看成类,就会轻松许多。
紧接着下面一句var c = new Cat();就是根据构造函数生成相应的对象,类似于JAVA中根据类生成实例对象一样。
这就是JS中面向对象的构造器模式。
2.明白了构造函数模式,来看看构造函数模式的弊端以及如何解决:
我们可以根据构造函数来创建N个对象,每个对象有自己的内存空间。我们来思考这么一个问题:如果构造函数中有两个固定值的属性,当我们用这个构造函数去创建对象的时候,每个对象都会在自己的内存空间中存放这个固定值的属性,这就造成了不必要的浪费,对吧?想一想JAVA是不是也存在这种情况?是存在的,那JAVA怎么解决的?对,继承!
在JAVA中我们会将一些对象存在共性的地方,抽取出来存放到Super类中;在JS中对于每一个构造函数都有这么一个额外的对象,用来存放一些共有的东西,是不是很父类很像?这个额外的对象就是原型对象,一个原型对象对应一个构造函数,也就是说一个构造函数只有一个原型对象,例如构造函数Object,就对应一个原型对象,构造函数Obejct的prototype属性指向他所对应的原型对象,而Object构造器生成的实例对象都有一个__proto__属性,也只想Obejct构造器所对应得原型对象,这样就实现了节省内存的目的。如下代码:
function Cat(name,color){
this.name = name;
this.color = color;
}
Cat.prototype.type = "猫科动物";
Cat.prototype.eat = function(){alert("吃老鼠")};
3.明白了原型的概念,再来看看原型链的概念:
要清楚在构造函数模式中有几个角色:构造函数、实例对象、原型对象。 在这三个对象之间,他们的关系是怎样的?先来理一理。
如上图所示,A代表构造函数,它持有一个prototype属性,指向他所对应的原型对象A.prototype,而A.prototype持有constructor属性指向A构造函数,以此来形成一对一的关系,而new A()代表着根据A构造函数来生成的实例对象,new A()持有一个__proto__属性,指向A所对应的原型对象,以此来实现多个实例对象共享原型对象中的固定状态的某些变量。
所以总结一下:构造函数中有一个prototype属性、原型对象有一个constructor属性、实例对象中有一个__proto__属性。
刚才好像落下一个,就是原型对象中除了constructor属性外,其实还有一个__proto__属性,这个怎么理解?如果你把原型对象看成一个实例对象,是不是他也可以从其他的原型对象中共享数据?这就是了,原型对象中的__proto__就是构成原型链的关键,你可以理解成继承链。
我们都知道JS是面向对象,那就不可避免的JS存在一个上帝级别的对象,就是Obejct,所有的一切对象来源于它,什么意思呢?
其实上面的A构造器所对应的原型对象中的__proto__指向就是Object的原型对象,所以可以向相面的图这样理解:
补充一点:其实构造函数其实也是一个对象对吧?那么它是那个构造函数构造出来的呢?当然是Function,所以说构造函数作为一个函数实例对象,也持有__proto__属性,并指向Function.prototype。
参考资料
- http://www.html-js.com/article/2841
- http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html