从一个实例，看new FunctionName()的内部机制

下面的代码：

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