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」其实只是「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」的联系。

var f = function(){}
  f.prototype = Animal.prototype
  Human.prototype = new f()

上一个完整代码：

function Animal() { // 用函数的的形式创建一个Animal父类
    this.body = 'body'; // 随便配置一下属性
}

Animal.prototype.move = function() { // 在「原型」上，配置这个类的公共方法
    console.log('欢乐的移动呀！！！！！')
}

function Man(name) { // 创建一个「男人」类
    Animal.apply(this, arguments); // 这句的含义就是把Animal类里面的属性搬过来（「成员属性的继承」），等价于「 this.body = 'body'; 」，其中此处的this指向Man的实例对象
    this.name = name; // 配置一下属性
}

// 接下来我们实现「原型的继承」
function f() {}; // 这是个「中介」函数
f.protoype = Animal.prototype;
Man.prototype = new f();

const temp = function(){}
temp.prototype = Animal.prototype
Man.prototype = new temp()


Man.prototype.useTools = function() {
    console.log('人类使用工具呢！！！')
}

let obj = new Man('Jason');

console.dir(obj)

以上就是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有些「智障」。