前言
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對象
然后看一下Animal類
原型是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一直到現在，真的是每個階段對于這方面的內容都有不同的理解。希望通過這篇文章的分享可以讓大家對于原型有更深入的理解。
