JS面向对象之继承

原型链

在 JS 中原型链就是实现继承的方式，由于 JS 中没有类的概念，所以实现的是构造函数之间的继承关系。

所谓继承就是在子级对象中可以访问父级中的属性和方法。如下代码实现了继承的关系：

function Animal(){
    this.eatFood = function (){
        console.log('干饭了，干饭了')
    }
}
var monkey = new Animal();

function Person(name){
    this.name = name;
}
Person.prototype = monkey;
var people = new Person('小明');

function Student(){
    this.goSchool = function (){
        console.log('我去上学了')
    }
}
Student.prototype = people;

var stu = new Student();

stu.eatFood();
console.log(stu.name);
stu.goSchool();

结果：

干饭了，干饭了
小明
我去上学了

仅仅继承于原型

在上面的方法中，我们为了实现继承需要依靠，创建对象来进行，为了提高效率我们可以直接将属性和方法添加到原型上。
实现代码如下：

function Animal(){}
// 为Animal 的原型添加 eatFood 方法
Animal.prototype.eatFood = function () {
    console.log('干饭了，干饭了')
};

function Person(){}
//为Person 的原型添加 name 和继承 Animal 中的成员
Person.prototype = Animal.prototype;
Person.prototype.name = '小明';

function Student(){
    this.goSchool = function (){
        console.log('我去上学了')
    }
}
//为 Student 的原型继承 Person 的原型
Student.prototype = Person.prototype;

var stu = new Student();
stu.goSchool();
console.log(stu.name);
stu.eatFood()

第 3 行代码必须添加到原型上，否则原型为空对象，后面函数继承的原型也为空对象。

第 9、10 行代码的顺序不能颠倒，否则后面将 Animal 的原型赋值给了 Person 的原型。会覆盖第 9 行的原型的 name 属性

结果：

我去上学了
小明
干饭了，干饭了

原型链实现继承的问题

之前说过 JS 是没有继承的，我们之前的测试只是通过原型链实现了一个类似继承的东西，准确的说是共享。
原型链实现的继承，是存在问题的。如下代码：

function Animal() {}
Animal.prototype.a = 'this is Animal';

function Person() {}
Person.prototype = Animal.prototype;
Person.prototype.p = 'this is Person';

function Student() {}
Student.prototype = Person.prototype;
Student.prototype.s = 'this is Student';

var stu = new Student();
var ani = new Animal();
var per = new Person();

// 在 “父级” 中访问子级对象中的属性也能访问到，所以是共享的
console.log(stu.a);
console.log(ani.s);
console.log(per.s);

结果：

this is Animal
this is Student
this is Student

• 原型链实现的继承实际上是共享了构造函数的属性和方法。
• 创建子级对象，不能向父级中传递参数。

原型式继承

原型式继承就是定义一个函数，该函数中传入一个 Object 类型的形参，且在该函数中创建一个临时性的构造函数，
临时构造函数的原型指向传入的 Object 类型的形参，然后返回临时构造函数构造的对象。
实现代码如下：

function fn1(obj) {
    function innerFun() {}
    innerFun.prototype = obj;
    return new innerFun();
}

var obj = {
    name: '小明'
};

var result = fn1(obj);

console.log(result.name);

结果：

小明

我们可以对其进行改造，可以在外部构造函数中定义自己的属性和方法，实现代码如下：

function fn1(obj, args) {
    innerFun.prototype = obj;
    function innerFun() {
        for (var attr in args){
            this[attr] = args[attr]
        }
    }
    return new innerFun();
}

var parentObj = {
    name: '小明'
};

var obj1 = fn1(parentObj,{
    age: 18,
    say: function () {
        console.log('this is say function');
    }
});

console.log(obj1.age);
obj1.say();

//检测 say 方法是否为 obj1 的自有属性
console.log(obj1.hasOwnProperty('say'));

关键代码为 1-9 行

结果：

18
this is say function
true

Object.create() 方法实现继承

Object中的 create 方法，于我们上面提到的方法的实现原理是相同的，只不过使用的方式不一样。

语法结构：

Object.create(obj, {
    attr : {
        value: 值,
        writable: true/false,
        ...
    },
    func : {
        value: function () {
            ...
        },
        writable: true/false,
        ...
    },
    ...

示例代码：

var obj = {
    name: '小明'
};

var newObj = Object.create(obj, {
    age : {
        value: 18,
        writable: true
    },
    say: {
        value: function () {
            console.log('我是小明')
        },
        writable: false
    }
});

console.log(newObj.age);
newObj.say();

结果：

18
我是小明

这种方式和上面方式的区别在于，本方法只能将属性或方法写为属性描述符的形式。

借助构造函数实现继承（精华）

这种方式主要是通过 call 和 apply 函数加上 this 关键字来实现。实现的核心在于 this 关键字加上 JS 函数的灵活性。
其实原理就是在子级构造函数中使用 call或apply 方法调用父级构造函数，通过 this 灵活的传递参数，在加上一些参数。
可以更加类似于其他语言的继承。

来看简版代码：

function Person() {
    this.name = '小明';
}

function Student(){
    Person.apply(this);
    this.age = 16;
}

var stu = new Student();
console.log(stu);

读者要密切留意这里的 this，因为它为此方法的核心。

代码剖析：

• 首先看 Student 函数，我们通过前面的学习得知，当调用函数时会自动传入一个 this，
  第 6 行代码将 Student 函数创建的对象传递进了 Person 方法。
• 接下来进入 Person 方法，此方法同样接收了一个 this，我们在 Student 函数中的
  this 传递到了这里，因为 this 的传递无需依赖形参。也就是说，这里的this依然代表
  Student 函数创建的对象（前提为在 Student 中调用时）。然后为 Student 的对象
  创建了一个 name 属性。

打印结果：

Student { name: '小明', age: 16 }

在理解了上面的简版之后，我们将父级中的参数改为有形参定义的。
要实现此方法就要去看 call 和 apply 方法了。这里直接给出代码：

function Parent(name) {
    this.name = name;
}
function Son(name, age) {
    Parent.call(this, name);
    this.age = age;
}
var son1 = new Son('大儿子', 18);
var son2 = new Son('小儿子', 3);

console.log(son1);
console.log(son2);

结果：

Son { name: '大儿子', age: 18 }
Son { name: '小儿子', age: 3 }

组合方式继承

所谓组合式继承就是将上述继承方式整合起来，取其优点。从而称为较优的解决方案。如下代码所示：

function Person(name) {
    this.name = name;
}
Person.prototype.say = function () {
    console.log('我是一个人');
};

function Student(name, age) {
    Person.call(this, name);
    this.age = age;
}
Student.prototype = Person.prototype;
Student.prototype.job = '学生';

var stu = new Student('小明', 15);

stu.say();
console.log(stu.name);
console.log(stu.age);
console.log(stu.job)

结果：

我是一个人
小明
15
学生

封装继承方法

ps：关于继承的方式笔者会一直更新

学过其他语言的铁子一定知道，在继承中都有 extends 这个关键字来实现继承，but，这个单词在 ES5 中是个保留字，在ES6中
才能用于实现继承，我们这里伪造一个 myExtends 方法用来实现继承，日后需要直接调用方法即可。

这种方法内置一个内部构造函数，形参中需要两个对象，一个父级对象，一个子级对象，我们将父级对象中的属性和方法添加到内部
构造函数的原型上，将子级对象中的属性和方法添加到内部构造函数创建的对象上，然后返回此对象。

实现代码：

function myExtends(parentObj, childObj) {
    function createObj() { }

    createObj.prototype = parentObj;

    var newObj = new createObj();

    for (attr in childObj){
        newObj[attr] = childObj[attr];
    }

    return newObj;
}

代码解析：

首先是第 2 行代码，这行代码定义了一个空构造函数。

第 4 行代码将内部构造函数的原型指向了第一个形参。也就是父级对象，这样创建出的对象具有了父级中的属性和方法。

第 6 行创建了一个待返回对象。

第 8-10 行使用迭代器将子级对象中的属性和方法添加到了待返回对象。