js原型、constructor、繼承總結

原型：函數創建時會自動內建一個prototype屬性，這個屬性是一個object，所以也稱該屬性稱爲原型對象。

代碼：

function Fun(){
    this.name = 'sven';
    this.getName = function(){
        alert( this.name );
    }
}
console.dir( Fun );

1. 輸出結果：
2. function Fun()
   1. arguments:null
   2. caller:null
   3. length:0
   4. name:"Fun"
   5. prototype:Object
   6. __proto__:function ()
   7. [[FunctionLocation]]:index.html:105
   8. [[Scopes]]:Scopes[1]

輸出prototype對象；

代碼：

function Fun(){
    this.name = 'sven';
    this.getName = function(){
        alert( this.name );
    }
}
console.dir( Fun.prototype );

結果：

1. Object
   1. constructor:function Fun()
   2. __proto__:Object

在prototype中也有個construct屬性，我們輸出一下：

console.dir( Fun.prototype.constructor );

1. function Fun()
   1. arguments:null
   2. caller:null
   3. length:0
   4. name:"Fun"
   5. prototype:Object
   6. __proto__:function ()
   7. [[FunctionLocation]]:index.html:105
   8. [[Scopes]]:Scopes[1]

當我看到內部也有個prototype的時候我在想Fun.prototype.constructor.prototype == Fun.prototype；輸出的結果是true，那麼可以得出Fun.prototype.constructor ==  Fun；這些結果就是爲了告訴我Fun是個構造函數？，在高程中有這麼一種說法，說函數名只是一個指針，那麼可以從中看出Fun指向的是它自身的構造函數。那麼Fun.prototype.constructor.prototype == Fun.prototype得出true就不矛盾了，可以得出一個結論原型對象其實是構造函數內部的一個屬性。

繼承：關於繼承，js中繼承是通過原型的方式繼承的，在原型中有個屬性__proto__，這個屬性稱爲原型鏈，

console.dir( Fun.prototype.__proto__ );

1. Object
   1. constructor:function Object()
   2. hasOwnProperty:function hasOwnProperty()
   3. isPrototypeOf:function isPrototypeOf()
   4. propertyIsEnumerable:function propertyIsEnumerable()
   5. toLocaleString:function toLocaleString()
   6. toString:function toString()
   7. valueOf:function valueOf()
   8. __defineGetter__:function __defineGetter__()
   9. __defineSetter__:function __defineSetter__()
   10. __lookupGetter__:function __lookupGetter__()
   11. __lookupSetter__:function __lookupSetter__()
   12. get __proto__:function __proto__()
   13. set __proto__:function __proto__()

從輸出結果我們可以看到Fun.prototype.__proto__指向的是function對象。

來new一個對象：

var fun = new Fun();
console.dir( fun.__proto__ );

輸出結果：

1. Object
   1. setName:function ( name )
      1. arguments:null
      2. caller:null
      3. length:1
      4. name:""
      5. prototype:Object
      6. __proto__:function ()
      7. [[FunctionLocation]]:index.html:111
      8. [[Scopes]]:Scopes[1]
   2. constructor:function Fun()
   3. __proto__:Object

這種結構形式和Fun,prototype很像，fun.__proto__ == Fun.prototype 得出的是true；

這裏說下關於new 關鍵字的一些特性，在之前我曾想過new 這個操作過程是什麼，但是奈何沒有找到相關資料，最近在看《JavaScript設計模式與開發實踐》一書的時候，有描述關於new 關鍵字，解釋是說new 的時候會將所new的構造函數返回一個對象，所以會說new一個對象。