title: JavaScript模拟继承
date: 2018-11-01 23:05:39
tags: [JavaScript]
categories: JavaScript
前言
继承是面向对象思想中的重要概念， JavaScript 在ES 6 中正式引入了继承的概念。
下面介绍一下继承的概念，以及在 ES5 和 ES6 中写继承的方法。
面向对象中的继承
维基百科：
继承（ inheritance）是面向对象软件技术当中的一个概念。如果一个类别B“继承自”另一个类别A，就把这个B称为“A的子类”，而把A称为“B的父类别”也可以称“A是B的超类”。继承可以使得子类具有父类别的各种属性和方法，而不需要再次编写相同的代码。
所以继承是类和类之间的关系，然而JavaScript起初根本没有类的概念，那么为什么也有继承呢？
JavaScript中的继承
要了解JS的继承，就得先了解原型链。该部分可见我的另一篇博客
简单来说，就是每一个对象都有一个__proto__属性，指向该对象的原型prototype，原型的层层指向就形成了一个类似链表的结构（实际上原型的指向是多对一的，所以说成“树”的结构其实更准确一点）称之为原型链。
JavaScript中的继承就是基于原型链实现的。
JS里面没有类，只有函数，所以我们称呼：子类函数、父类函数（比如 Array 与 Object 的关系）
可以这么解释继承：子类函数构造出来的对象直接拥有父类的属性。
那么类到底是什么：能产生对象的东西即为类。
下面的例子中，Human 就可以称为类。person 是一个有自己属性的对象。
function Human(name){
this.name = name
}
Human.prototype.run = function(){
......
}
var person = new Human('Allen')
知道了什么是类，下面就来写继承。
假设我们想让Man类继承Human类。Man 有自己的属性和方法，同时也继承了 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 属性，即对象本身属性的添加
this.gender = '男'
}
// 要继承Human原型上的属性和方法，最简单的方式是：
// Man.prototype.__proto__ = Human.prototype
// 但是这不符合 ECMA 标准，因此要写下面三行
var f = function(){}
f.prototype = Human.prototype
Man.prototype = new f()
Man.prototype.fight = function(){ // Man类原型上自身的方法
console.log('糊你熊脸')
}
执行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新增的一个语法糖，实际上它的类型仍然是一个函数。
class Human{
constructor(name){
this.name = name
}
run(){
console.log("我叫"+this.name+"，我在跑")
return undefined
}
}
// 使用extends关键字来继承
class Man extends Human{ // 等价于 Man.prototype.__proto__ = Human.prototype
constructor(name){
super(name) // 等价于 Human.call(this,name)
this.gender = '男'
}
fight(){
console.log('糊你熊脸')
}
}
ES6写法的缺点
ES6写法确实很简洁，但是如果我们想在类的原型上写一个不是函数的属性，这代码就有点奇怪了：
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 = '人类'
