JS原型、原型鏈和7種繼承方法【白話文講解】

前言

在學習JS原型、原型鏈和繼承之前，我們必須先弄懂三個W，也就是我們常說的“學習三問”

學習三問：

1.它是什么？（What）

2. 為什么用它？（Why）

3. 什么時候用它？(When)

帶著這三個問題去思考下面將要所學的知識，相信你一定會明白今后所學的每個知識點！！

友情提醒：學會某個知識點后一定要反復多敲幾遍相關知識的代碼，看懂和敲懂真的是兩回事！

正文

小編先在這里簡單概述一下建構式

建構式

                function Person(name,age){
                    this.name=name;
                    this.age=age;
                    this.sex='男';
                    return this;//每個函式都會有個默認return回傳值屬性，這里不寫return意思就是默認回傳值是this
                }
                var person = new Person('xiaoming'18);//創建一個實體物件
                var person2= new Person('xiaohong',16)//創建多個實體物件

大寫字母開頭一般都是建構式：function Person(){}

new的程序：

1.var person = new Person('a',123)=>將引數傳進去，函式中的 this 會變成空物件

2.this.name = name;this.age = age;this.sex= '男' 為賦值；return this 為實際的運行機制

3.return 之后賦值給 person，person具備了 person.name = xiaoming、person.age = 18、person.sex= '男'

4. 繼續往下執行person2其屬性值也是一樣根據實參傳遞

new總結：

1. 在建構式中創建一個空物件

2. 函式的this指向空物件,并且將這個物件的隱式原型(__proto__)指向建構式的原型(prototype)

3. 逐行執行代碼

4. 隱式回傳這個物件

擴展知識：

var o ={}=>var o = new Object()的語法糖 因為o的建構式就是Object函式，在JS底層其實已經幫我們自動new（實體化）了一遍

陣列以及自定義函式也是一樣的

注意：

• 所有原始資料型別（Number、String....）以及參考資料型別最終都是由Function衍生而來的，而Function是由JS引擎自帶產生的
• 而所有的建構式原型的隱式原型都來源于Object建構式原型，所以這就是我們常說的萬物皆物件的原因

1.原型prototype

(1)原型的定義：每個函式都有一個屬性——prototype，在默認情況下，prototype的值就是一個普通的object物件（屬性的集合），它有一個默認叫做constructor的屬性，而constructor是用來指向這個函式本身（可以理解為函式的來源），

(2)原型的使用：當一個函式被用作建構式來創建實體時，這個函式的prototype屬性值會被作為原型賦值給所有物件實體（也就是設定 實體的__proto__屬性），也就是說，所有實體的原型參考的是函式的prototype屬性

注意：

1.prototype是函式(建構式)的屬性

2.__proto__是物件的屬性

Person.prototype.name = "man";//在Person建構式的原型上創建一個name屬性并賦值
Person.prototype.say = function(){//在Person建構式的原型上創建一個say方法
	console.log("hello");
}
function Person(){}//創建一個建構式
var person = new Person();//創建一個實體物件=>設定實體物件的__proto__屬性（實體物件的原型鏈也就產生了）
console.log(person.name);// man
person.say();// hello

(3)consturctor 建構式

定義：此屬性只有原型物件才有，它默認指回prototype屬性所在的建構式

2.隱式原型 __proto__

定義：所有物件上都有的一個屬性，叫做隱式原型，__proto__，它指向創建該物件的建構式的原型(prototype) ，即fn._proto_ === Fn.prototype

用法：

• 當訪問一個物件的成員是，如果該物件中存在這個屬性，直接使用
• 如果該屬性不存在物件中，沿著該物件的隱式原型去查詢

var obj = {
    a:1,
    b:2
}
obj.__proto__.c = 123;//往obj隱式原型直接添加c屬性并賦值
console.log(obj.c)//123

注意：

1. 每個建構式原型的隱式原型都指向Object.prototype，但是Object.prototype是一個特例——它的__proto__指向的是null，切記切記!!!（null其實就是JS給的一個出口值）

2.Function.__proto__指向自身Function.prototype，因為上文提到所有建構式都是由大的Function創建的，既然Function是函式，當然指向的是其本身了

下面我將上文總結一張圖，便于知識的整體梳理：（圖片來源于掘金網技術社區）

f:代表自定義函式

3.原型鏈

定義：原型鏈即是隱式原型 ，

為什么說原型鏈就是隱式原型，相信看完上圖結構你已經有所明白了！

因為每個物件和原型都有隱式原型，物件的隱式原型指向創建該物件的建構式的原型物件，而父的原型又指向父的父，這種原型層層連接起來的就構成了原型鏈，

其實原型鏈的介紹就是隱式原型的介紹，下面我將附上幾張圖供大家作為原型鏈總結的參照

1.函式是通過Function創建的

2.每個函式都有原型物件

3.普通物件都是通過new 函式創建的

4.隱式原型的指向

5. 原型中的constructor指向函式本身

6.一條原型鏈的全貌

擴展知識：

1. JavaScript中非常重要的兩條鏈

2. 原型鏈的查找屬性是從下往上的程序，作用域鏈的查找是從上往下的程序

3. 作用域鏈中找不到出現報錯，原型鏈找不到不會報錯，出現undefined

4.原型的應用

1.基礎方法：w3c不推薦直接使用系統屬性

1.Object.getPrototypeOf(物件) 獲取物件的隱式原型

注意：

○ 物件.__proto__

○ [[scopes]] 、 __proto__ 系統屬性不能被直接呼叫

2.Object.prototype.isPrototypeOf(指定物件) 判斷當前物件是否在指定的物件的原型鏈上

3.物件 instanceof 函式：用來判斷函式的原型在不在物件的原型鏈上

4.Object.Create(物件) ：創建一個空物件，并且將物件的隱式原型修改為指定的引數

注意：在創建一個物件時，可以修改隱式原型，但是不要修改為null

5.Object.prototype.hasOwnProperty(屬性名)：判斷某個物件屬性名是不是物件自身的

2.將偽陣列轉換為真陣列

○ Array.isArray(偽陣列)
○ Array.prototype.slice.call(偽陣列)

3.判斷一個陣列是不是真陣列的常用方法

1.用 getPrototypeOf 方法獲取物件的隱式原型

var obj={};
var arr=[];
console.log(Object.getPrototypeOf(obj)===Array.prototype)//false
console.log(Object.getPrototypeOf(arr)===Array.prototype)//true

2.用 constructor 方法通過物件的建構式判斷

var obj = {};
var arr = [];
console.log(obj.constructor === Array)//false
console.log(arr.constructor === Array)//true

3.用 instanceof 運算子方法

 var obj = {};
 var arr = [];
console.log(obj instanceof Array); // false
console.log(arr instanceof Array); // true

4.用 Object.prototype.toString 方法來檢測物件資料型別

var str = 123456;
//注意：原始型別是沒有屬性和方法的
//所有的資料在呼叫toString()時，呼叫的都是自身建構式原型上的toString()
str.toString(); //'123456'

//所以必須去呼叫Object.prototype.toString()
console.log(Object.prototype.toString.call(123));//"[object Number]"

console.log(Object.prototype.toString.call(function(){}));//"[object Function]"

console.log(Object.prototype.toString.call(new Date()));//"[object Date]"

console.log(Object.prototype.toString.call([1,2,3]) === '[object Array]');//true

4.繼承

定義：不嚴格的說繼承的本質就是復制，即重新創建一個原型物件，而新型別的實體繼承了父原型里的所有屬性，

在學習繼承之前，其實還有一個原型鏈的問題沒講，而我們即將要學的繼承就是去彌補原型鏈產生的問題的

原型鏈的問題

問題一: 當原型鏈中包含參考型別值的原型時,該參考型別值會被所有實體物件所共享;

問題二: 在創建子型別(例如創建Son的實體)時，不能向超型別(例如Father)的建構式中傳遞引數.

總結：所以在我們真正的實踐中會很少單獨使用原型鏈，都是運用以下幾種繼承方法來彌補原型鏈產生的不足之處，

1.原型鏈繼承

function A(){
  this.nums= ["1", "2", "3"];
}
function B(){}

//關鍵點在于此行代碼，創建一個A的實體物件，并將該實體物件賦值給B.prototype
//也就是被創建的A物件將繼承B原型上所有的屬性
B.prototype = new A();
var instance1 = new B();
instance1.nums.push("4");
console.log((instance1.nums)); //"1,2,3,4"

var instance2 = new B(); 
console.log((instance2.nums)); //"1,2,3,4"

原型鏈繼承存在的問題：

問題一：當子類實作繼承后，會繼承超型別原型上所有的屬性，也就是說超型別原型的參考型別屬性會被所有的子類訪問到，這樣繼承原型參考型別屬性的子類之間就不再具有自己的私有屬性了，

問題二：在創建子型別的實體時，沒有辦法在不影響所有物件實體的情況下給超型別的建構式中傳遞引數，

2. 借用建構式繼承

為解決原型鏈中上述兩個問題, 我們開始使用一種叫做借用建構式，它是用來增強子類實體物件，等同于復制一遍超類（父類）的實體給子類，

function Father(){
    this.colors = ["red","blue","green"];
}
function Son(){
    Father.call(this);//繼承了Father,且向超型別傳遞引數
    //擴展知識：如果有函式形參時可以用apply方法
    //Father.apply(this,arguments); arguments作為一個偽陣列存盤函式的每一個實參
}
var instance1 = new Son();
instance1.colors.push("black");
console.log(instance1.colors);//"red,blue,green,black"

var instance2 = new Son();
console.log(instance2.colors);//"red,blue,green" 可見參考型別值是獨立的

核心代碼是Father.call(this)，創建子類實體時呼叫Father建構式，于是Son的每個實體都會將Father中的屬性復制一份，

缺點：

• 只能繼承父類的實體屬性和方法，不能繼承原型屬性/方法（因為超型別的原型中定義的方法對于子型別是獨立不可訪問的）

• 因此每個方法都必須在建構式中定義，所以無法實作函式復用，極度影響性能，

3.組合繼承

也叫偽經典繼承，將原型鏈和借用建構式的技術組合到一塊，用原型鏈實作對原型屬性和方法的繼承，用借用建構式技術來實作實體屬性的繼承，

function Father(name){
    this.name=name;
    this.colors=['red','yellow','pink'];
}
Father.prototype.sayName=function(){
    alert(this.name);
};
function Son(name,age){
    Father.apply(this.arguments);//繼承Father原型的實體屬性，第一次呼叫Father()
    this.age=age;
};
Son.prototype=new Father();//繼承父類原型的實體方法，第二次呼叫Father()
Son.prototype.sayAge = function(){
	alert(this.age);
};
var instance1 = new Son("xm",3);
instance1.colors.push("black");
console.log(instance1.colors);//"red,yellow,pink,black"
instance1.sayName();//xm
instance1.sayAge();//3

var instance1 = new Son("xh",10);
console.log(instance1.colors);//"red,yellow,pink"
instance1.sayName();//xh
instance1.sayAge();//10

組合繼承避免了原型鏈繼承和借用建構式繼承的缺點，且融合了它們的優點，也是JS中最常用的繼承模式，而組合繼承創建的物件也能夠被instanceof和isPrototype（）檢測，

雖然組合繼承是JS中最常用的繼承方式，但是它也存在了一個缺點，就是在使用子類創建實體物件時無論什么情況下都會呼叫兩次超型別的建構式，并且創建的每個實體中都要屏蔽超型別物件的所有實體屬性，造成了不必要的記憶體消耗，

下面即將要講的圣杯式繼承就有效的解決了此問題，成為了JS最理想的繼承模式

4.傳統繼承——原型繼承

在object()函式內部, 先創建一個臨時性的建構式, 然后將傳入的物件作為這個建構式的原型,最后回傳了這個臨時型別的一個新實體，（該方法這是由道格拉斯·克羅克福德所提出來的）

利用一個空物件作為中介，將某個物件直接賦值給空物件建構式的原型，

function object(o){
	function F(){}
	F.prototype = o;
	return new F();
}

而此方法回傳值是一個參考傳入物件的新實體，所以也就存在了某些資料被共享的問題

var Person = {
	colors : ["red","pink","blue"]
};
var PersonScd = Object(Person);//創建一個PersonScd實體物件，將Person原型上的所有屬性賦值給它
PersonScd.colors.push("black");//往PersonScd的colors屬性上添加一個值
var PersonTrd = Object(Person);
alert(Person.colors );//"red,pink,blue,black"

缺點：

• 原型鏈繼承多個實體的參考型別屬性會被各個實體之間共享，且存在修改的可能，
• 無法傳遞引數

另外，ES5中新增了Object.create()的方法，它能夠有效代替傳統繼承方法，

5.寄生式繼承

其實就是在原型式繼承得到物件的基礎上，在內部再以某種方式來增強物件，然后回傳建構式，

function createPerson(original){
  var clone = Object(original); // 通過呼叫 object() 函式創建一個新物件
  clone.sayHi = function(){  // 以某種方式來增強物件
    alert("hi");
  };
  return clone; // 回傳這個物件
}

函式的主要作用是為建構式新增屬性和方法，以增強函式

寄生式繼承的缺點跟原型式繼承一樣

6. 寄生組合式繼承（圣杯式繼承）

結合借用建構式傳遞引數和寄生模式實作繼承，因此圣杯模式成為了JS最理想的繼承式方法

function inheritPrototype(subType,superType){
    var prototype = Object.create(superType.prototype);//創建物件，創建父類原型的一個副本
    prototype.constructor=subType;//增強物件，彌補因重寫原型而失去的默認的constructor 屬性
    subType.prototype=prototype;//指定物件，將新創建的物件賦值給子類的原型
}

// 父類初始化實體屬性和原型屬性
function SuperType(name){
  this.name = name;
  this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function(){
  alert(this.name);
};

// 借用建構式傳遞增強子類實體屬性（支持傳參和避免篡改）
function SubType(name, age){
  SuperType.apply(this, arguments);
  this.age = age;
}

// 將父類原型指向子類
//此行代碼等同于組合繼承寫的 SubType.prototype = new SuperType()
inheritPrototype(SubType, SuperType);

// 新增子類原型屬性
SubType.prototype.sayAge = function(){
  alert(this.age);
}

總結：圣杯式繼承的核心在于只呼叫了一次SuperType建構式，因此避免了在SubType.prototype 上創建不必要的、多余的屬性，于此同時,原型鏈還能保持不變; 因此還能正常使用 instanceof 和 isPrototypeOf() 方法，

7. 混入方式繼承多個物件

function MyClass() {
     SuperClass.call(this);
     OtherSuperClass.call(this);
}

// 繼承一個類
MyClass.prototype = Object.create(SuperClass.prototype);
// 混合其它
Object.assign(MyClass.prototype, OtherSuperClass.prototype);
// 重新指定constructor
MyClass.prototype.constructor = MyClass;

MyClass.prototype.myMethod = function() {
     // do something
};

總結：Object.assign會把 OtherSuperClass原型上的函式拷貝到 MyClass原型上，使 MyClass 的所有實體都可用 OtherSuperClass 的方法，

此方法摘自掘金技術社區——‘木易楊說’

關于繼承還有一個ES6——extends關鍵字方法，該方法主要用于類宣告或者類運算式中，以創建一個類，該類是另一個類的子類，其中constructor表示建構式，一個類中只能有一個建構式，有多個會報出SyntaxError錯誤,如果沒有顯式指定構造方法，則會添加默認的 constructor方法，

具體內容介紹請轉自ES6 入門教程

全文總結：不管是學習哪個知識點，我們在學它之前都要帶著三個W去學每一個內容，且學完記得多敲些相關的例題，相信你一定能夠學有所成！！！