Javascript继承
近期学习到Javascript的继承，所以记录下自己所学。
文中可能需要提前理解的知识（可以参考我其他的文章）：
- 原型与原型链: https://www.jianshu.com/p/2bca84951977
- 实例对象与new命令: https://www.jianshu.com/p/6ea91eb41283
首先用ES5语法来分析：
function Animal() {
this.body = 'body';
}
Animal.prototype.move = function() {
console.log('moving!');
};
function Human(name) {
this.name = name;
}
Human.prototype.useTool = function() {
console.log('use tools!');
}
let animal = new Animal();
let human = new Human('Jason');
我们创建两个「构造函数」，「Animal」和「Human」，然后创建两个「实例」，分别是animal和human。我们看看这两个对象里有啥。
image.png
如图：
对象「animal」和「human」都有自己的属性，而且「proto」属性指向了它的构造函数的「原型」，在「原型」上就有了我们所谓的「共有属性」，如上述的「move」和「useTools」方法。
但是我们有这样的想法：「Animal」是个大的集合，「Human」其实只是「Animal」里面的一部分。每一个「Human」的实例对象，其实都应该有「Animal」中的「move」的行为。为此，难道我们要像下图一样，在「Human」的原型上再加上「move」方法吗？
function Human(name) {
this.name = name;
}
Human.prototype.useTool = function() {
console.log('use tools!');
}
Human.prototype.move = function() {
console.log('moving!');
}
当然不是，这里我们可以让「Animal」和「Human」建立某种「联系」，这个「联系」就是「继承」。简单来说，继承就是子类的实例对象可以使用父类的属性和方法。此处就是，「Human」的实例对象可以使用「Animal」里面的属性和方法。
所以我们就把「Animal」和「Human」的「原型」联系起来，理论上来说通过下一句代码就可以了。
Human.prototype.__proto__ = Animal.prototpye;
image.png
如上图，「Human」的实例对象已经具有了「move」方法。不过也发现「Animal」里面的「body」属性没有在「Human」的实例对象中。我们加上去。
function Human(name) {
Animal.apply(this, arguments); // this指向「Human」的实例对象
this.name = name;
}
image.png
但是好像「Human.prototype.proto = Animal.prototpye」兼容性不好，有些浏览器不允许直接修改「proto」属性，所以我们只能另辟蹊径。我们想想什么命令可以让我们有操作「proto」的效果？我们想到了「new」命令。
首先我们回顾下「new」命令，简单来说4个步骤：
- 创建一个空对象
- 该空对象的原型指向其构造函数的原型
- 构造函数的this指向这个空对象
- 执行代码
如上，我们其实就是需要「第2步」的效果。那我们来试试用「new」命令来联系「Animal」和「Human」。
function Animal() {
this.body = 'body';
}
Animal.prototype.move = function() {
console.log('moving!');
};
function Human(name) {
Animal.apply(this, arguments); // this指向「Human」的实例对象
this.name = name;
}
// Human.prototype.__proto__ = Animal.prototype;
Human.prototype = new Animal();
Human.prototype.useTool = function() {
console.log('use tools!');
}
image.png
如图，我们虽然是有了「move」和「body」，但是在「Human」的「原型」上多了一个「body」，这可不是我们想要的效果，因为我们只想把「body」放在与「Human」的「name」属性同级的位置，那是什么原因造成这个结果呢？我们来分析一下。（注：截图中浏览器只是显示错误，第一层的「proto」就是指向「Human.prototype」,第二层的「proto」指向「Animal.prototype」）
「Human.prototype = new Animal()」这句话，把「Human.prototype」当作「Animal」的实例对象，看看「new」命令的「第3步」，「构造函数的this指向这个空对象（也就是实例）」，此时这个实例就是「Human.prototype 」，在构造函数「Animal」中的代码「this.body = 'body'」，其实也就是「Human.prototype.body = 'body'」。
哦，原来是这样呀。是由于「Animal」中的「this.body = 'body'」这句的原因，要是没有这句，就可以了，但是又有一个矛盾，「Animal」构造函数中必须要有这一句「this.body = 'body'」。怎么办呢？
我们需要一个「中介」来过渡下「Animal」和「Human」的联系。
以上就是ES5实现「继承」的原理。
然后我们来说说ES6语法。
class Animal {
constructor() {
this.body = 'body';
}
move() {
console.log('moving!');
}
}
class Human extends Animal {
constructor(name) {
super();
this.name = name;
}
useTool() {
console.log('use tools!');
}
}
let animal = new Animal();
let human = new Human('Jason');
那ES5语法和ES6语法各有什么优劣呢？
比如我们在「Animal」的「原型」上加一个「非函数」的属性，ES5就很方便，ES6要变通实现。
ES5：
Animal.prototype.eat = 'eating'; // 直接加上这句
image.png
ES6：
class Animal {
constructor() {
this.body = 'body';
}
get eat() {
return 'eating';
}
move() {
console.log('moving!');
}
}
class Human extends Animal {
constructor(name) {
super();
this.name = name;
}
useTool() {
console.log('use tools!');
}
}
image.png
ES6中需要在class 「Animal」中加一个 「get eat()」函数。可能看起来有些别扭。
最后强调一下：
- 截图中，「proto」指向只是显示错误，不要被误导了。浏览器的log有些「智障」。
