摘要：給添加屬性給的原型對象添加屬性原型鏈在中，每個對象都有一個屬性，其保存著的地址就構成了對象的原型鏈。實例變量實例函數原型鏈繼承有了原型鏈，就可以借助原型鏈實現繼承。是中唯一一個處理屬性但是不查找原型鏈的函數。

前端學習：教程&開發模塊化/規范化/工程化/優化&工具/調試&值得關注的博客/Git&面試-前端資源匯總

歡迎提issues斧正：原型&原型鏈&原型繼承

JavaScript的原型是一個重要的知識點，很多擴展應用都是從原型出發的。要說原型，我們先簡單說一下函數創建過程。上一篇文章用閉包實現類和繼承中用的是原型繼承，今天就講一講原型繼承。更多繼承在后面的文章中更新。

function Xzavier() {};

1.創建一個對象（有constructor屬性及[[Prototype]]屬性），其中[[Prototype]]屬性不可訪問、不可枚舉。
2.創建一個函數（有name、prototype屬性），再通過prototype屬性 引用第1步創建的對象。
3.創建變量Xzavier，同時把函數的引用賦值給變量Xzavier。

構造函數是用來新建同時初始化一個新對象的函數，所以，任何一個函數都可以是構造函數。只是我們在寫代碼的時候一般首字母大寫以便區分使用。

每個函數在創建的時候js都自動添加了prototype屬性，這就是函數的原型，原型就是函數的一個屬性，類似一個指針。原型在函數的創建過程中由js編譯器自動添加。

function Xzavier() {
    this.name = "xzavier";
    this.sex = "boy";
    this.job = "jser";
}
//給A添加屬性
Xzavier.age = 23;
//給A的原型對象添加屬性
Xzavier.prototype.sports = function() {console.log("basketball")}
Xzavier.prototype = {
    hobbit1: function() {console.log("basketball");},
    hobbit2: function() {console.log("running");}
}; 

在JavaScript中，每個對象都有一個[[Prototype]]屬性，其保存著的地址就構成了對象的原型鏈。
[[Prototype]]屬性是js編譯器在對象被創建時自動添加的，其取值由new運算符的右側參數決定。字面量的方式可轉化為new Obejct();

var x = new Xzavier();
vae o = {};  //var o = new Obejct();

通過對象的[[Prototype]]保存對另一個對象的引用，通過這個引用往上進行屬性的查找，這就是原型鏈查找機制。

對象在查找某個屬性的時候，會首先遍歷自身的屬性，如果沒有則會繼續查找[[Prototype]]引用的對象，如果再沒有則繼續查找[[Prototype]].[[Prototype]]引用的對象，依次類推，直到[[Prototype]].….[[Prototype]]為undefined

var str = new String("xzavier");
str

Object.prototype的[[Prototype]]就是undefined

function Xzavier() {
    this.name = "xzavier";
}
var x = new Xzavier();
x.age = 23;

console.log(x.job);  // 獲取x的job屬性 undefined

1、遍歷x對象本身，結果x對象本身沒有job屬性
2、找到x的[[Prototype]]，也就是其對應的對象Xzavier.prototype，同時進行遍歷。 Xzavier.prototype也沒有job屬性
3、找到Xzavier.prototype對象的[[Prototype]]，指向其對應的對象Object.prototype。Object.prototype也沒有job屬性
4、尋找Object.prototype的[[Prototype]]屬性，返回undefined。

說了函數的原型鏈，這里需要說一下的變量和內部函數。

私有成員，即定義函數內部的變量或函數，外部無法訪問。

function Xzavier(){
    var name = "xzavier"; //私有變量
    var sports = function() {console.log("basketball")}; //私有函數 
}
var x = new Xzavier();
x.name;  //undefined

如果要訪問，需要對外提供接口。

function Xzavier(){
    var name = "xzavier"; //私有變量
    var sports = function() {console.log("basketball")}; //私有函數
    return{
        name: name,
        sports: sports
    }
}
var x = new Xzavier();
x.name;  //"xzavier"

用點操作符定義的靜態變量和內部函數就是實例不能訪問到的變量和內部函數。只能通過自身去訪問。

function Xzavier(){
    Xzavier.name = "xzavier"; //靜態變量
    Xzavier.sports = function() {console.log("basketball")}; //靜態函數 
}
Xzavier.name; //"xzavier"
var x = new Xzavier();
x.name;  //undefined

通過this定義給實例使用的屬性和方法。

function Xzavier(){
    this.name = "xzavier"; //實例變量
    this.sports = function() {console.log("basketball");}; //實例函數 
}
Xzavier.name; //undefined
var x = new Xzavier();
x.name;  //"xzavier"

有了原型鏈，就可以借助原型鏈實現繼承。

function Xzavier() {
    this.name = "xzavier";
    this.sex = "boy";
    this.job = "jser";
}

function X() {};

X的原型X.prototype原型本身就是一個Object對象。F12打開控制臺輸入函數，再打印X.prototype:

Object {
    constructor: X()
    __proto__: Object
}

prototype本身是一個Object對象的實例，所以其原型鏈指向的是Object的原型。

X.prototype = Xzavier.prototype;

這樣相當于把X的prototype指向了Xzavier的prototype；
這樣只是繼承了Xzavier的prototype方法，Xzavier中的自定義方法則不繼承。

X.prototype.love = "dog";

這樣也會改變Xzavier的prototype，所以這樣基礎就不好。

X.prototype = new Xzavier();

這樣產生一個Xzavier的實例，同時賦值給X的原型，也即X.prototype相當于對象：

{
    name: "xzavier", 
    sex: "boy", 
    job: "jser",
    [[Prototype]] : Xzavier.prototype
}

這樣就把Xzavier的原型通過X.prototype.[[Prototype]]這個對象屬性保存起來，構成了原型的鏈接。
不過，這樣X產生的對象的構造函數發生了改變，因為在X中沒有constructor屬性，只能從原型鏈找到Xzavier.prototype，讀出constructor:Xzavier。

var x = new X;
console.log(x.constructor);

輸出：
Xzavier() {
    this.name = "xzavier";
    this.sex = "boy";
    this.job = "jser";
}

手動改正：

X.prototype.constructor = X;

這是X的原型就多了個屬性constructor，指向X。這樣就OK。

function Xzavier() {
    this.name = "xzavier";
    this.sex = "boy";
    this.job = "jser";
}

function X(){}
X.prototype = new Xzavier();
var x = new X()
x.name  // "xzavier"

關于我們經常遇到的[[Prototype]]，__proto__，prototype：

我們在控制臺打印 var str = new String("xzavier")，展開查看屬性時，只會看到__proto__，所以起作用的是__proto__，__proto__是對象的內置屬性，是每個對象都有的屬性，但是這個屬性使用不標準，所以不建議直接使用。但是，我們的原型鏈就是基于 __proto__的。通過構造函數得到的實例的 __proto__ 屬性，指向其對應的原型對象 String.prototype，這正如文中我們打印 var str = new String("xzavier") 中看到的一樣。

[[Prototype]]是一個隱藏屬性，指向的是這個對象的原型。幾乎每個對象有一個[[prototype]]屬性。

而prototype是每個函數對象都具有的屬性，指向原型對象，如果原型對象被添加屬性和方法，那么由應的構造函數創建的實例會繼承prototype上的屬性和方法，這也是我們在代碼中經常遇到的。構造函數產生實例時，實例通過其對應原型對象的 constructor 訪問對應的構造函數對象。所以，我們繼承出來的實例往往沒有constructor，只是通過原型鏈查找，會讓我們產生錯覺，可參見本系列原型鏈文章。

hasOwnProperty是Object.prototype的一個方法，判斷一個對象是否包含自定義屬性而不是原型鏈上的屬性。
hasOwnProperty 是JavaScript中唯一一個處理屬性但是不查找原型鏈的函數。

function Xzavier() {
    this.name = "xzavier";
    this.sex = "boy";
    this.job = "jser";
}
//給A的原型對象添加屬性
Xzavier.prototype.sports = function() {console.log("basketball");};

var x = new Xzavier();
x.name; // "xzavier"
"sex" in x; // true

x.hasOwnProperty("job"); // true
x.hasOwnProperty("sports"); // false

當檢查對象上某個屬性是否存在時，hasOwnProperty 是非常推薦的方法。

繼承在js中使用頻繁。ES6也設計了專門的CLASS語法糖供開發者使用。
更多繼承方法在新的文章中更新...

難得周末，應該運動O(∩_∩)O~ 打打籃球，運動運動，有代碼，有籃球，有生活。。。
長時間不動肩膀（其實身體各地方都是），還真疼啊。希望程序猿們都健健康康的?。?！