您的位置:首页 > 其它

[zz]new FunctionName()的内部机制

2009-11-07 23:28 302 查看
测试代码:

function Dog(name) {

this.name = name;

Dog.prototype = {

shout: function() { alert("I am " + this.name); }

};

}

var dog1 = new Dog("Dog 1");

dog1.shout();

上面的代码看起来很“优美”,可一运行,却报错:“Object doesn’t support this property or method”.

对于代码:

Fn() {};

var fn = new Fn();

new Fn() 的实际构造过程可以等价为以下伪代码:

var o = {__proto__: Fn.prototype};

Fn.apply(o);

return o;

理解了 new 的构造过程,我们可以分析上面的实例了。

首先,JS引擎在遇到函数声明 function Dog(…) 时,会给函数对象添加 prototype 属性,伪代码如下:

Dog.prototype = {constructor: Dog};

当运行到 var dog1 = new Dog(”Dog 1″) 时,内部操作:

var o = {__proto__: Dog.prototype};

Dog.apply(o);

return o;

也许你已经知道问题所在了。为了更清楚,添加点注释:

// Dog.prototype = {constructor: Dog};var o = {__proto__: Dog.prototype};

// 此时,o = {__proto__: {constructor: Dog}}

Dog.apply(o);

// 此时,Dog.prototype = {shout: function(){...}}

return o;


显然,运行 dog1.shout() 时,dog1 的确没有 shout 方法。

考考大家:

function Dog(name) {

this.name = name;

Dog.prototype = {

shout: function() { alert("I am " + this.name); }

};

}

var dog1 = new Dog("Dog 1");

var dog2 = new Dog("Dog 2");

dog2.shout();

dog1.shout();

请问运行结果是什么?

最后,想大声疾呼:作为一门语言,JavaScript 有自己的脾性。
用 Java 等代码方式去书写 JavaScript 代码,是不妥当的。在不使用框架的情况下,一次性添加多个方法时,推荐以下书写风格:

function Dog(name) {

this.name = name;

}

Dog.prototype = {

constructor: Dog,

shout: function() { /* ... */ },

run: function() { /* ... */ }

};
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: