JS之繼承（ES5 & ES6）

antyiwei 發布于2019-08-26 10:41 / 2418人閱讀

摘要：繼承可以使得子類具有父類別的各種屬性和方法。繼承是類與類之間的關系。繼承的實質就是兩次的原型搜索，像是實例屬性而不是繼承，才是繼承。更多用法見繼承。

前言

面試中最常會問到的問題：什么是繼承？如何分別用 ES5 和 ES6 實現？想要學習繼承，必須先學好原型與原型鏈，如果此部分還不清楚，請先學習此部分再來閱讀本文，可參考我的文章JS之原型與原型鏈或瀏覽其他相關的學習網站。

定義

繼承到底是什么？維基百科是這樣說的：繼承（英語：inheritance）是面向對象軟件技術當中的一個概念。如果一個類別B“繼承自”另一個類別A，就把這個B稱為“A的子類”，而把A稱為“B的父類別”也可以稱“A是B的超類”。繼承可以使得子類具有父類別的各種屬性和方法。詳情點我。繼承是類與類之間的關系。

var a = new Array()
a.valueOf()

上面的a為什么可以使用valueOf方法？實際上是它是通過了原型鏈的搜索最終在Object.prototype里拿到了valueOf方法。

繼承的實質就是兩次的原型搜索，像a.push()是實例屬性而不是繼承，a.valueOf()才是繼承。

自己實現原型鏈繼承

上面的結構就是我們要實現的，其中子類的Human和父類Object之間的繼承是自帶的，我們需要在Human后再加一個Man讓person繼承Human的屬性和方法。

ES5實現繼承

1.把Human的自身的屬性直接寫在Man上：Human.call(this, name)

function Human(name) {    // 創建一個 Human 構造函數
  this.name = name
}
Human.prototype.run = function () {
  console.log("I can run")
}

function Man(name) {    // 創建一個 Man 構造函數
  Human.call(this, name)
  this.gender = "男"
}
Man.prototype.fight = function () {
  console.log("I can fight")
}
var dong = new Man("dong")

以上代碼實現了上圖的效果，但是我們并沒有把Human也聯系起來，我們想做的就是在第一第二層中加上Human這一層，即形成dong → Man → Human → Object 鏈式，也就是實現下圖：

2.改變Man.prototype.__proto__的指向

所以我們只要把Man.prototype.__proto__的指向由Object.prototype變為指向Human.prototype即可，此時你可能覺得簡單的加上一句Man.prototype.__proto__ = Human.prototype就可以改變它的指向，確實這種寫法成功的改變了Man.prototype.__proto__的指向，但由于IE不支持這樣的寫法，所以我們要把代碼修改為：

var f = function(){}
f.prototype = Human.prototype
Man.prototype = new f()

3.代碼總結

function Human(name) {    // 創建一個 Human 構造函數
  this.name = name
}
Human.prototype.run = function () {
  console.log("I can run")
}

function Man(name) {    // 創建一個 Man 構造函數
  Human.call(this, name)
  this.gender = "男"
}
var f = function(){}
f.prototype = Human.prototype
Man.prototype = new f()
//這里需要注意的問題是被修改的原型鏈的屬性必須修改完后才能聲明
//也就是這句話必須得寫在fight 前，否則原型鏈一修改它里面的屬性和方法就沒了
Man.prototype.fight = function () {
  console.log("I can fight")
}
var dong = new Man("dong")

ES6實現繼承（class 和 extends）

class Human {
  constructor(name) {
    this.name = name
  }
  run() {
    console.log("I can run")
  }
}

class Man extends Human {  //Man.prototype.__proto__ = Human.prototype
  constructor(name) {
    super(name)  //Human.call(this,name)
    this.gender = "男"
  }
  fight(){
    console.log("I can fight")
  }
}

ES6中類的寫法：自身屬性name寫在constructor里面，共有屬性（原型鏈上的）run直接和他并列著寫，而繼承的寫法：class后面是子類然后extends你的父類。更多用法見ES6繼承。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106598.html

React&amp;ES6

摘要：在中必須調用方法，因為子類沒有自己的對象，而是繼承父類的對象，然后對其進行加工而就代表了父類的構造函數。雖然代表了父類的構造函數，但是返回的是子類的實例，即內部的指的是，因此在這里相當于。要求，子類的構造函數必須執行一次函數，否則會報錯。 1.class ES6 提供了更接近傳統語言的寫法，引入了 Class（類）這個概念，作為對象的模板。通過class關鍵字，可以定義類。基本上，ES...

jeffrey_up 2019-08-02 14:11 評論0 收藏0
React&amp;ES6

摘要：在中必須調用方法，因為子類沒有自己的對象，而是繼承父類的對象，然后對其進行加工而就代表了父類的構造函數。雖然代表了父類的構造函數，但是返回的是子類的實例，即內部的指的是，因此在這里相當于。要求，子類的構造函數必須執行一次函數，否則會報錯。 1.class ES6 提供了更接近傳統語言的寫法，引入了 Class（類）這個概念，作為對象的模板。通過class關鍵字，可以定義類。基本上，ES...

mist14 2019-08-26 13:28 評論0 收藏0
JavaScript &amp; 6小時了解ES6基本語法

摘要：返回布爾值，表示參數字符串是否在源字符串的頭部。參考語法返回一個布爾值與的全等操作符比較兼容環境把對象的值復制到另一個對象里淺拷貝定義方法用于將所有可枚舉的屬性的值從一個或多個源對象復制到目標對象。語法要設置其原型的對象。一步一步似爪牙。前言學習es6之前我們可能并不知道es6相比es5差距在哪, 但是這并不妨礙我們站在巨人的肩膀上; 程序員就是要樂于嘗鮮; 學習es6最終目的是...

Amos 2019-08-20 19:03 評論0 收藏0
es6之js的類

摘要：生成的類的原型會被自動調整，而你還能調用方法來訪問基類的構造器。唯一能避免調用的辦法，是從類構造器中返回一個對象。起源 JS 從創建之初就不支持類，也沒有把類繼承作為定義相似對象以及關聯對象的主要方式，這讓不少開發者感到困惑。而從 ES1 誕生之前直到ES5 時期，很多庫都創建了一些工具，讓 JS 顯得貌似能支持類。盡管一些 JS 開發者強烈認為這門語言不需要類，但為處理類而創建的代...

libin19890520 2019-07-31 10:15 評論0 收藏0