繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > Javascript的构造函数和constructor属性
- Javascript
- JavaScript 解析Json字符串的性能比较分析代码
- js 日期字符串截取分割成单个具体的日期(2009-12-30 13:28:29)
- javascript 倒计时代码
- javascript 语法基础 想学习js的朋友可以看看
- javascript获取元素文本内容的通用函数
- javascript 动态设置已知select的option的value值的代码
- jquery 简单的图片展示效果
- js textarea自动增高并隐藏滚动条
- Javascript 中介者模式实例
- textbox 在光标位置插入字符功能的js实现(兼容ie,firefox)
- jQuery Attributes(属性)的使用(二、类篇)
- Javascript document.referrer判断访客来源网址
- [原创]javascript 移动鼠标得到单元格所在table表中的rowIndex位置[兼容ie,firefox]
- javascript获得光标所在的文本框(text/textarea)中的位置
- event.srcElement 用法笔记e.target
- javascript 导出数据到Excel(处理table中的元素)
- javascript DOM操作之动态删除TABLE多行
- Javascript在IE或Firefox下获取鼠标位置的代码
- Javascript 多浏览器兼容性问题及解决方案
- 让div层随鼠标移动的实现代码 ie ff
Javascript的构造函数和constructor属性
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 82 ::
收藏到网摘: n/a
我们知道，默认情况下，对一个函数前面使用new，可以构造出一个对象。每一个对象都有一个constructor属性，这个constructor属性指向构造出该对象的函数。 例如,在Chrome下调试如下程序，很清楚的展示了这点：
然而事情并不是这么简单。再看下面的代码：
很显然，这个时候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的官方文档未对此有任何说明。以后大家还是尽量用两参数版本的吧。
最后顺便再看几个表达式，
第一个是说函数的prototype的constructor是自己，这个上文已经谈到，没有问题；第二个是说函数也是一个对象，它是Function构造函数的一个对象，也还好理解；第三个是说Function构造函数本身一个对象，它还是Function构造函数的一个对象；最后一个其实是和第三个等价的，是说Function对象的构造函数是它自己…… 我确实有点想不明白Function是怎么自己构造自己的？鸡生蛋，蛋生鸡？要再追究下去就应该涉及到Javascript语言的具体实现了吧，就此打住。
哎，Javascript这个语言本身还是有点复杂啊。要不是有了XMLHttpObject，让它大红大紫了下，否则它还在黑暗的角落里暗自哭泣呢。
作为应用程序开发人员，或许我们自己写程序的并不会用到这些底层的东西，但是，JS框架中却大量的使用了这些高级特性，而且再详尽的文档也不可能把这些方法的作用、影响一一道来，所以开发人员还是需要尽量理解这些东西，以免死了还不知道怎么回事。上面的Ext.extend函数就是一个例子。
评论 (0) All
