js中繼承的示例分析

這篇文章給大家分享的是有關js中繼承的示例分析的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

繼承的簡介

繼承”是JavaScript面向對象設計的重要一環，愿你認真讀完本文，吃透繼承的概念。

繼承的核心

1. 繼承方式一：原型鏈

1.1 介紹

原型鏈是實現繼承最原始的模式，即通過prototype屬性實現繼承。

//父級-構造函數
function Father() {
 this.fatherProp = true
}

//父級-原型屬性
Father.prototype.getFatherValue = function() {
 return this.fatherProp
}

//子級-構造函數
function Son() {
 this.sonProp = false
}

//子級-原型屬性：繼承父級
//即__proto__指向父級的prototype
//若不理解請閱讀《一張圖徹底KO原型鏈(prototype,__proto__》
Son.prototype = new Father()

//子級-添加原型方法
Son.prototype.getSonValue = function() {
 return this.sonProp
}

//創建子級的實例對象
var son = new Son()
console.log(son.getFatherValue()) //true

1.2 解析：son實例對象是如何找到getFatherValue()方法的呢？

1. 首先在son對象自身中找。若對象自身沒找到

2. 然后在Son.prototype中找。若Son.prototype中沒找到

3. 繼續往上一層，Son.prototype.__proto__(Fater.prototype)

4. 依次類推，直到找到需要的屬性或方法，或到達原型鏈頂端Object.prototype

如果到最后都沒找到，會發生什么呢？

//一個不存在的方法
console.log(son.getValue()) //ERROE：not a function

1.3 注意事項

重寫父級原型鏈的方法或者添加父級原型鏈不存在的方法，必須在父級原型鏈代碼之后。（這個很好理解，不放代碼演示了）

通過原型鏈實現繼承后，不能再使用字面量的方式創建原型對象，因為會覆蓋原型鏈。

//子級-原型屬性：繼承父級
Son.prototype = new Father()

//不能像下面這樣，這樣會使得上面的代碼無效
//因為這相當于重新創建了一個原型對象
Son.prototype = {
 getSonValue: function() {
  return this.sonProp
 }
}

1.4 原型鏈實現繼承的弊端

世間萬事萬物都不可能十全而十美，原型鏈雖然強大，但也存在缺陷。

原型鏈中引用類型的屬性會被所有實例共享的，即所有實例對象使用的是同一份數據，會相互影響。

 function Father() {
  this.arr = [1,2,3]
 }

 function Son() {
 }

 Son.prototype = new Father()

 var son1 = new Son()
 console.log(son1.arr) //1,2,3

 var son2 = new Son()
 son2.arr.push(4)

 console.log(son2.arr) //1,2,3,4
 console.log(son1.arr) //1,2,3,4

無法向父級構造函數傳參

2. 繼承方式二：借用構造函數

2.1 介紹

方式一中引用類型帶來的問題可借用構造函數的方式解決。其核心思想是：在子級構造函數中調用父級構造函數。

如何實現在一個構造函數中調用另一個函數？——call()和apply()

 function Father() {
  this.arr = [1,2,3]
 }

 function Son() {
  //call的第一個函數是this指向的對象,即構造函數的實例對象
  Father.call(this)

  /*上面代碼等同于下面這段代碼：
  (function() {
   this.arr = [1,2,3]
  }).call(this)
  */
 }

 var son1 = new Son()
 console.log(son1.arr) //1,2,3

 var son2 = new Son()
 son2.arr.push(4)

 console.log(son2.arr) //1,2,3,4
 console.log(son1.arr) //1,2,3

//解決傳參問題：
function Father(name) {
 this.name = name
}

function Son(name) {
 Father.call(this, name)
}

var son1 = new Son("小名")
console.log(son1.name)  //小名

var son2 = new Son("一燈")
console.log(son2.name)  //一燈

2.2 借用構造函數的缺陷

這種方式是通過構造函數實現的，當然也把構造函數自身的問題帶過來了——破壞了復用性。因為每個實例都創建了一份副本。

3. 組合繼承

3.1 介紹

組合繼承 = 原型鏈 + 借用構造函數。取其長避其短：共享的用原型鏈，各自的借用構造函數

function Father(name) {
 this.name = name
 this.arr = [1,2,3]
}

Father.prototype.getName = function() {
 console.log(this.name)
}

function Son(name, age) {
 Father.call(this, name)
 this.age = age
}

Son.prototype = new Father()
Son.prototype.constructor = Son
Son.prototype.getAge = function() {
 console.log(this.age)
}

var son1 = new Son("小名", 23)
son1.arr.push(4)
console.log(son1.arr) //1,2,3,4
son1.getName()    //小名
son1.getAge()     //23

var son2 = new Son("一燈", 24)
console.log(son2.arr) //1,2,3
son1.getName()    //一燈
son1.getAge()     //24

感謝各位的閱讀！關于“js中繼承的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！