title: JavaScript模擬繼承
date: 2018-11-01 23:05:39
tags: [JavaScript]
categories: JavaScript
前言
繼承是面向?qū)ο笏枷胫械闹匾拍睿?JavaScript 在ES 6 中正式引入了繼承的概念。
下面介紹一下繼承的概念隶债，以及在 ES5 和 ES6 中寫繼承的方法饵骨。
面向?qū)ο笾械睦^承
維基百科：
繼承（ inheritance）是面向?qū)ο筌浖夹g(shù)當(dāng)中的一個(gè)概念隶校。如果一個(gè)類別B“繼承自”另一個(gè)類別A之众，就把這個(gè)B稱為“A的子類”堪遂，而把A稱為“B的父類別”也可以稱“A是B的超類”缘薛。繼承可以使得子類具有父類別的各種屬性和方法泛粹，而不需要再次編寫相同的代碼胰柑。
所以繼承是類和類之間的關(guān)系截亦，然而JavaScript起初根本沒有類的概念，那么為什么也有繼承呢柬讨？
JavaScript中的繼承
要了解JS的繼承崩瓤，就得先了解原型鏈。該部分可見我的另一篇博客
簡單來說踩官，就是每一個(gè)對(duì)象都有一個(gè)__proto__屬性却桶，指向該對(duì)象的原型prototype，原型的層層指向就形成了一個(gè)類似鏈表的結(jié)構(gòu)（實(shí)際上原型的指向是多對(duì)一的蔗牡，所以說成“樹”的結(jié)構(gòu)其實(shí)更準(zhǔn)確一點(diǎn)）稱之為原型鏈颖系。
JavaScript中的繼承就是基于原型鏈實(shí)現(xiàn)的。
JS里面沒有類辩越，只有函數(shù)嘁扼，所以我們稱呼：子類函數(shù)、父類函數(shù)（比如 Array 與 Object 的關(guān)系）
可以這么解釋繼承：子類函數(shù)構(gòu)造出來的對(duì)象直接擁有父類的屬性黔攒。
那么類到底是什么：能產(chǎn)生對(duì)象的東西即為類趁啸。
下面的例子中，Human 就可以稱為類亏钩。person 是一個(gè)有自己屬性的對(duì)象莲绰。
function Human(name){
this.name = name
}
Human.prototype.run = function(){
......
}
var person = new Human('Allen')
知道了什么是類，下面就來寫繼承姑丑。
假設(shè)我們想讓Man類繼承Human類蛤签。Man 有自己的屬性和方法，同時(shí)也繼承了 Human 的屬性和方法栅哀。
ES5寫法
function Human(name){
this.name = name // 自身的屬性
}
Human.prototype.run = function(){ // 在原型上添加屬性或方法
console.log("我叫"+this.name+"震肮，我在跑")
return undefined
}
function Man(name){
Human.call(this, name) // 使得Man類有了Human類自身的 name 屬性，即對(duì)象本身屬性的添加
this.gender = '男'
}
// 要繼承Human原型上的屬性和方法留拾，最簡單的方式是：
// Man.prototype.__proto__ = Human.prototype
// 但是這不符合 ECMA 標(biāo)準(zhǔn)戳晌，因此要寫下面三行
var f = function(){}
f.prototype = Human.prototype
Man.prototype = new f()
Man.prototype.fight = function(){ // Man類原型上自身的方法
console.log('糊你熊臉')
}
執(zhí)行var person = new Man('Allen')
person的原型鏈：
person.__proto__ === Man.prototype
person.__proto__.__proto__ === Human.prototype
person.__proto__.__proto__.__proto__ === Object.prototype
person.__proto__.__proto__.__proto__.__proto__ === null
ES6寫法
class是ES6新增的一個(gè)語法糖，實(shí)際上它的類型仍然是一個(gè)函數(shù)痴柔。
class Human{
constructor(name){
this.name = name
}
run(){
console.log("我叫"+this.name+"沦偎，我在跑")
return undefined
}
}
// 使用extends關(guān)鍵字來繼承
class Man extends Human{ // 等價(jià)于 Man.prototype.__proto__ = Human.prototype
constructor(name){
super(name) // 等價(jià)于 Human.call(this,name)
this.gender = '男'
}
fight(){
console.log('糊你熊臉')
}
}
ES6寫法的缺點(diǎn)
ES6寫法確實(shí)很簡潔，但是如果我們想在類的原型上寫一個(gè)不是函數(shù)的屬性，這代碼就有點(diǎn)奇怪了：
class Human{
constructor(name){
this.name = name
}
get kind(){
return '人類'
}
run(){
console.log("我叫"+this.name+"豪嚎，我在跑")
return undefined
}
}
而用ES5的寫法就很好理解：
function Human(name){
this.name = name
}
Human.prototype.kind = '人類'
