下面的代码:
function Dog(name) {
this.name = name;
Dog.prototype = { shout: function() { alert("I am " + this.name); } }; } var dog1 = new Dog("Dog 1");
dog1.shout();
上面的代码看起来很“优美”,可一运行,却报错:Object #<Dog> has no method 'shout'
在 YUI 3 学习笔记:oop 中,曾提到过,对于代码:
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 方法。 (个人验证:
console.log(dog1.__proto__ === Dog.prototype);
输出为false。
上面的解释不是很清楚,可以这么理解,在我们在创建dog1的时候,一般是Dog1的prototype已经确定了的,但这里prototype在构造的时候更改了,
导致我们的_proto__发生改变了。 为什么改为下面的就可以了:
function Dog(name) {
this.name = name; }
Dog.prototype = { shout: function() { alert("I am " + this.name); } };
var dog1 = new Dog("Dog 1");
dog1.shout();//输出 i am dog1
因为是Dog.prototype首先确定下面了,再dog1=new Dog("dog1"); 上面的代码:
console.log(dog1.__proto__.constructor);
输出的是:function Object() { [native code] } 说明指向 的是Object。看http://www.cnblogs.com/youxin/p/3219175.html 这个图就明白了。 )
考考大家:
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();
请问运行结果是什么?
(i'm dog2 ,第二个dog1没有方法shout,运行错误)
注意是先创建的dog1,而后调用dog1.)
最后,想大声疾呼:作为一门语言,JavaScript 有自己的脾性。用 Java 等代码方式去书写 JavaScript 代码,是不妥当的。在不使用框架的情况下,一次性添加多个方法时,推荐以下书写风格:
function Dog(name) { this.name = name; }
Dog.prototype = { constructor: Dog, shout: function() { \* ... *\ }, run: function() { \* ... *\ } }; http://lifesinger.org/blog/2009/08/new-funtion-secret/#more-2103