javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > Javascript 构造函数 constructor

Javascript的构造函数和constructor属性

作者：

我们知道，默认情况下，对一个函数前面使用new，可以构造出一个对象。每一个对象都有一个constructor属性，这个constructor属性指向构造出该对象的函数。
例如,在Chrome下调试如下程序，很清楚的展示了这点：

image 

然而事情并不是这么简单。再看下面的代码：

image
很显然，这个时候obj的constructor已经不再是创建它的函数，注意到obj.name也是undefined，因此修改构造函数的prototype的contructor并不会影响构造函数所产生的对象。真正的原因是：一个对象的constructor是它的构造函数的prototype.constructor，而每一个函数都有一个prototype，默认情况下，这个prototype有一个constructor属性，指向的是它自己。 我觉得Javascript的设计本意是让每个对象的constructor都指向自己的构造函数，然而有像上面的例子可以破坏这一点。另外，这样的设计其实也不很完美，一个很大的问题就是在继承的时候必须小心的维护constructor的指向。在最简单的继承中，可以把子类的构造函数的prototype设置为父类的一个实例，而父类的实例的constructor是父类的构造函数，从而子类的prototype的constructor是父类的构造函数，这就造成了子类的每个对象的构造函数都是父类的构造函数。这是很容易引起困惑的。

最后，再回到上一篇遗留下来的问题，上文谈到Extjs官网给出的一个继承Observable的例子：

复制代码 代码如下:

Employee = Ext.extend(Ext.util.Observable, {
constructor: function(config){
this.name = config.name;
this.addEvents({
"fired" : true,
"quit" : true
});

// Copy configured listeners into *this* object so that the base class's
// constructor will add them.
this.listeners = config.listeners;

// Call our superclass constructor to complete construction process.
Employee.superclass.constructor.call(config)
}
});

这个例子给人的错觉就是你可以重写父类的constructor属性，从而达到改变子类的构造函数的行为的效果。这对于Javascript基础却不深的人是一种误导。 我们再仔细看下Ext.extend的源代码：
复制代码 代码如下:

extend : function(){
// inline overrides
var io = function(o){
for(var m in o){
this[m] = o[m];
}
};
var oc = Object.prototype.constructor;

return function(sb, sp, overrides){
if(Ext.isObject(sp)){
overrides = sp;
sp = sb;
sb = overrides.constructor != oc ? overrides.constructor : function(){sp.apply(this, arguments);}; //注意这里 }
//以下省略………}(), 请注意加注释的那一行。extend如果检测到overrides参数中有constructor属性，也就是说子类试图改写父类的prototype的constructor的时候，就直接将子类设置为这个函数！这样就达到效果了。不过我立刻发现这句检测仅在这个if语句块中，也就是extend的两参数版本中有，那么使用extend的另一个三参数版本这样设置应该是无效的。 写段代码测试下：

<head>
<title></title>
<script type="text/javascript" src="ext-3.1.0/src/core/core/Ext.js"></script>
<script type="text/javascript">
function MyClass() {
this.id = 'class';
}
function SubClass() { }

// SubClass=Ext.extend(SubClass, MyClass, { constructor: function() {
// this.overrideProperty = 'OK';
// }
// });
SubClass = Ext.extend(MyClass, { constructor: function() {
this.overrideProperty = 'OK';
}
});
var obj = new SubClass();
alert(obj.overrideProperty);
</script>
</head>

两种写法，运行的结果果然是第一种是undefined而第二种是OK。呃，名字相同的函数仅仅是参数写法不同，执行的效果却不相同，这个是有点出乎意料的。而且Extjs的官方文档未对此有任何说明。以后大家还是尽量用两参数版本的吧。
最后顺便再看几个表达式，
image 
第一个是说函数的prototype的constructor是自己，这个上文已经谈到，没有问题；第二个是说函数也是一个对象，它是Function构造函数的一个对象，也还好理解；第三个是说Function构造函数本身一个对象，它还是Function构造函数的一个对象；最后一个其实是和第三个等价的，是说Function对象的构造函数是它自己…… 我确实有点想不明白Function是怎么自己构造自己的？鸡生蛋，蛋生鸡？要再追究下去就应该涉及到Javascript语言的具体实现了吧，就此打住。

哎，Javascript这个语言本身还是有点复杂啊。要不是有了XMLHttpObject，让它大红大紫了下，否则它还在黑暗的角落里暗自哭泣呢。

作为应用程序开发人员，或许我们自己写程序的并不会用到这些底层的东西，但是，JS框架中却大量的使用了这些高级特性，而且再详尽的文档也不可能把这些方法的作用、影响一一道来，所以开发人员还是需要尽量理解这些东西，以免死了还不知道怎么回事。上面的Ext.extend函数就是一个例子。

您可能感兴趣的文章:
阅读全文