原型链补充
javascript constructor 详解
2010-04-26 22:19
|
请参考：[0] http://hi.baidu.com/maxwin2008/blog/item/2b3a663582c1ad1a90ef39e5.html
课外读物： [1] http://joost.zeekat.nl/constructors-considered-mildly-confusing.html [2] http://dhtmlkitchen.com/learn/js/enumeration/index.jsp 这个是和js里面对象相关的问题，首先要了解的是类（函数对象）、实例之间的关系，也就是prototype chain[0, 2]。 每个class都有一个prototype，当使用该class创建instance时就会将该instance的[[Prototype]]指向class的prototype。 有些时候的应用我们想知道一个instance是由那个class创建的，这时候就要用到constructor属性。 class的prototype里有一个notEnum[2]属性的constructor来指向class本身。 <script type="text/javascript">
 这一切行为都很正常，偏偏多了js oop。那么我们需要在class里定义一些属性和方法。这里有两种写法： <script type="text/javascript"> 需要清楚这两种方法的区别，第一种是往A.prototype里塞东西，原有的东西并没有被修改。
第二种则是让B.prototype大搬家，先前的东西全部丢掉了，其中就包含了constructor属性。 （注意：这里B.prototype里是没了constructor方法，但是b.constructor依然有值：Object()。因为prototype chain上直接查找到了Object.prototype.constructor） <script type="text/javascript">
第二种方法导致constructor丢失了。如果写写简单的js，这个属性也用不到，没了就没了吧。但是这个属性对我们来说肯定是有用的，或者你对它感兴趣。 那就不能让这个属性就这样没了。 那也OK，我们都用第一中方法来定义class。但事情经常不尽人意，js里又需要通过prototype chain来模拟继承行为： <script type="text/javascript"> 为了实现继承，我们必须让Derived的prototype搬家，这样就是上述的第二种行为，导致自己constructor没了，Derived生成的instance通过constructor来找自己的时候会找到自己的superclass Base（有违伦理啊...）。
那只好我们手动设置Derived的constructor属性： <script type="text/javascript">
但是问题又来了，Derived.prototype.constructor = Derived 之后，原本这个constructor应该是指向Base的（单从Derived.prototype = new Base()）来理解。 现在为了修正instance能找到自己的class，却把instance的class的superclass给丢了，真是顾此失彼... <script type="text/javascript"> 这里z可以知道通过constructor获取他的class Z，但是却没有方法获得它superclass的superclass Y。
在firefox中可以使用__proto__（这个就是[[Prototype]]的指针），但是ie并不支持。比较通用的方法是给每个class设置一个属性指向它的superclass 比如 Z.superclass = Y, Y.superclass = X。 |
constructor属性始终指向创建当前对象的构造函数。比如下面例子：
//
等价于 var foo = new Array(1, 56, 34, 12);
var
arr
=
[
1
,
56
,
34
,
12
]; console.log(arr.constructor
===
Array);
//
true
//
等价于 var foo = new Function();
var
Foo
=
function
() { }; console.log(Foo.constructor
===
Function);
//
true
//
由构造函数实例化一个obj对象
var
obj
=
new
Foo(); console.log(obj.constructor
===
Foo);
//
true
//
将上面两段代码合起来，就得到下面的结论
console.log(obj.constructor.constructor
===
Function);
//
true
但是当constructor遇到prototype时，有趣的事情就发生了。
我们知道每个函数都有一个默认的属性prototype，而这个prototype的constructor默认指向这个函数。如下例所示：
function Person(name) { this .name = name; }; Person.prototype.getName = function () { return this .name; }; var p = new Person( " ZhangSan " ); console.log(p.constructor === Person); // true console.log(Person.prototype.constructor === Person); // true // 将上两行代码合并就得到如下结果 console.log(p.constructor.prototype.constructor === Person); // true
当时当我们重新定义函数的prototype时（注意：和上例的区别，这里不是修改而是覆盖），constructor属性的行为就有点奇怪了，如下示例：
function Person(name) { this .name = name; }; Person.prototype = { getName: function () { return this .name; } }; var p = new Person( " ZhangSan " ); console.log(p.constructor === Person); // false console.log(Person.prototype.constructor === Person); // false console.log(p.constructor.prototype.constructor === Person); // false
为什么呢？
原来是因为覆盖Person.prototype时，等价于进行如下代码操作：
Person.prototype = new Object({ getName: function () { return this .name; } });
看到这里可能有童鞋会问为什么改prototype的值会让p.constructor 的值改变呢,其实单纯的function里没有constructor属性,但为什么可以访问,因为当访问一个不存在的属性的时候,JS会找改属性在原型链里存在与否,其实也就是JS继承的实现,结果发现原型链里有,所以,如上例,p.constructor跟p.prototype.constructor是同一个东西来的,不信你修改p.prototype.constructor就知道了,如下文,但你修改p.constructor就不会影响到p.prototype.consturctor,相当于重写了一个方法(add lonely 2011-9-28)
而constructor属性始终指向创建自身的构造函数，所以此时Person.prototype.constructor === Object，即是：
function Person(name) { this .name = name; }; Person.prototype = { getName: function () { return this .name; } }; var p = new Person( " ZhangSan " ); console.log(p.constructor === Object); // true console.log(Person.prototype.constructor === Object); // true console.log(p.constructor.prototype.constructor === Object); // true
怎么修正这种问题呢？方法也很简单，重新覆盖Person.prototype.constructor即可：
function Person(name) { this .name = name; }; Person.prototype = new Object({ getName: function () { return this .name; } }); Person.prototype.constructor = Person; var p = new Person( " ZhangSan " ); console.log(p.constructor === Person); // true console.log(Person.prototype.constructor === Person); // true console.log(p.constructor.prototype.constructor === Person); // true