JavaScript中的類、原型、原型鏈、繼承

小白沖沖沖沖 發佈 2019-12-31T23:29:37+00:00

小結JavaScript的原型可以說是這門語言最核心的知識之一了,本人從接觸JS一直到現在,真的是每個階段對於這方面的內容都有不同的理解。

前言

JavaScript在ES6之前嚴格意義上是沒有像JAVA,C#這種語言中類的概念的。ES6添加了class,但其實這個class也只是ES6以前的構造函數和原型的語法糖而已。要想真正了解JavaScript中最複雜的部分,就得從最初的構造函數和原型講起。

在ES6以前,我們是這樣實例化一個對象的:

首先聲明一個構造函數,一般用首字母大寫來區分構造函數和普通函數.

function Animal(name, age) {
  this.name = name
  this.age = age
}

接下來在構造函數的prototype上掛載公共方法

Animal.prototype.say = function () {
  console.log(this.name)
}

最後實例化一個對象

const dog = new Animal('dog', 3)
dog.say()  //會在控制台列印出dog

當我們使用ES6的class來聲明上面這個類的話,代碼如下

class Animal {
  constructor(name, age) {
    this.name = name
    this.age = age
  }
  say() {
    console.log(this.name)
  }
}


const dog = new Animal('dog', 3)
dog.say()  //會在控制台列印出dog


使用class的新語法明顯更讓我們有面向對象類的感覺,但是實際上他們的原理是一致的。

接下來使用這個對象來分析一下JavaScript獨特的原型。

原型

首先列印一下dog對象

dog對象

然後看一下Animal類

Animal類


在這裡 dog.__proto__ 與 Animal.prototype就是所謂的原型,在這個原型對象里我們可以看到有constructor欄位,它指向dog這個實例的構造函數,也就是Animal, dog.__proto__.constructor === Animal 返回的是true.所以原型、類和實例直接的關係可以這樣表示:

我自己是一名從事了多年開發的web前端老程式設計師,目前辭職在做自己的web前端私人定製課程,今年年初我花了一個月整理了一份最適合2019年學習的web前端學習乾貨,各種框架都有整理,送給每一位前端小夥伴,想要獲取的可以關注我的頭條號並在後台私信我:前端,即可免費獲取。

原型關係圖

原型是JavaScript的特色之一,雖然類、實例這些面向對象的概念和Java這些語言很像,但本質上卻並不一樣。在JavaScript中,由構造函數實例化出的每個對象,本身一般只包含自己的屬性,但是當我們調用這個對象上沒有的方法或屬性時,實例化的對象就會沿著自己的原型向上找。如果原型上還沒有找到,且這個原型對象還有自己的原型,那就會順著這個原型鏈一直回溯到最頂級的原型Object.prototype。這也是我們一般在構造函數的原型上掛載公共方法的原因 Animal.prototype.xxx = function () {},這樣可以讓實例化出的每一個對象沿著自己的原型鏈找到這個方法,所有的實例化的對象共用同一個方法。

原型鏈

JavaScript中所有的對象都有原型,其中最頂級的原型就是Object.prototype,任何一個對象的原型鏈的頂端必然是Object.prototype,下面來看一下上面示例中的原型鏈。


原型鏈

上圖中的原型鏈: dog -> Animal.prototype -> Object.prototype,最終由實例化對象追溯到了Object.prototype。我們平時用字面量定義的普通對象 { name: harlan, age: 24 },這個對象的原型就是Object.prototype。

原型繼承

介紹完原型鏈之後,必須得提一下JavaScript中的繼承,其實從上面的例子就可以看出,可以認為所有的對象都繼承自Object,因為所有的對象的原型鏈的頂端都是Object.prototype。

我們再來看一個JavaScript內置的繼承關係:

定義一個函數a
function a () { }
JS中所有的函數都繼承自內置的類Function,而Function則繼承自Object

a.__proto__ === Function.prototype  // true
a.__proto__.__proto__ = Object.prototype // true

所以這個原型鏈是
a -> Function.prototype -> Object.prototype

現在我們要自己定義類來實現這種繼承。

首先需要在子類實例化時調用父類的構造函數

Function Dog (name, age, weight) {
  Animal.call(this, name, age)
  this.weight = weight
}

註:有些初學者可能不是太理解這裡發生了什麼,我在這裡詳細介紹一下

首先我們來看一個構造函數使用new調用會發生什麼

new Animal(name, age)

上面一行代碼可以理解為如下代碼

Animal(name, age) {
  const this = {}

  this.name = name
  this.age = age

  return this
}
Animal()

在JS中new這個運算符可以認為在要執行的函數語句前先定義了一個this對象,最後又把這個this對象返回。

在搞清楚new的實際操作後我們再來看一下new Dog(name, age, weight)的過程

Function Dog(name, age, weight) {
  const this = {}

  Animal(this, name, age)
  // 這行代碼又可以理解為下面的語句
  // this.name = name
  // this.age = age

  this.weight = weight

  return this
}
Dog(name, age, weight)

在初始化屬性之後,我們需要將Dog.prototype的原型設置成Animal.prototype,即Dog.prototype.__proto__ === Animal.prototype返回true,這樣掛載在Animal.prototype原型上的方法就可以被Dog實例化出的對象調用,當然這裡我們不能直接設置__proto__屬性,這個屬性其實沒有在ES的規範中被提及,只是被各個瀏覽器實現了。在這裡我們使用Object.create()這個方法。

Dog.prototype = Object.create(Animal.prototype)

Object.create會創建一個新的對象,這個對象的原型就是這個方法傳入的參數,在這裡我們實現了原型鏈的修改,此時的原型鏈如下

const dog = new Dog(name, age, weight)

dog -> Dog.prototype -> Animal.prototype -> Object.prototype

最後,我們還必須讓dog的原型的constructor屬性指向構造函數

Dog.prototype.constructor = Dog

至此,一個繼承自Animal的Dog類就建立完畢了,完整代碼如下

Function Dog (name, age, weight) {
  Animal.call(this, name, age)
  this.weight = weight
}
Dog.prototype = Object.create(Animal.prototype)
Dog.prototype.constructor = Dog


這種方式也被稱為寄生組合繼承。

class繼承

ES6中提出了class,class的繼承的本質就是上面我們提到的寄生組合繼承,但是在代碼量上和形式上都更加簡單

class Dog extends Animal {
  constructor(name, age, weight) {
    super(name, age) // 這一句代碼一定不能缺
    this.weight = weight
  }
}


小結

JavaScript的原型可以說是這門語言最核心的知識之一了,本人從接觸JS一直到現在,真的是每個階段對於這方面的內容都有不同的理解。希望通過這篇文章的分享可以讓大家對於原型有更深入的理解。




作者:Harlan_Zhang
連結:https://www.jianshu.com/p/f7e794b30392

關鍵字: