【JavaScript笔记 · 基础篇(十)】面向对象编程之三：继承机制

深入理解过JavaScript中的对象体系（基于构造函数（constructor）和原型对象（prototype））过后，再来学习JS中的继承机制就很简单啦~

一. 原型链单继承

前两篇博客里详细介绍了构造函数（constructor）和原型对象（prototype），多多少少都已经讲过继承的知识了，这里就再系统罗列一下。

讲这一部分之前，我们先来定义一个父构造函数Animal()及其原型对象Animal.prototype——

// 父构造函数
function Animal (name,age){
    
    
    this.name = name;
    this.age = age;
};

// 父构造函数原型对象
Animal.prototype = {
    
    
    constructor:Animal,
    color:"white",
    sayName:function(){
    
    
        console.log("my name is",this.name);
    },
    sayAge:function(){
    
    
        console.log("my age is",this.age);
    }
};

这里介绍三种单继承的子构造函数的写法，略有不同，按需而定：

1.1 第一步 —— 子类继承父类的实例

具体分为两个步骤：

1.1.1 调用父构造函数

通过call()方法把子类实例对象的this绑定到父构造函数来调用，这样子类实例也会具有父类实例的属性：

// 子构造函数
function Dog(name,age,gender){
    
    
    Animal.call(this,name,age);  // 借用构造函数
    this.gender = gender;
};

1.1.2 设置base属性

// 子构造函数
function Dog(name,age,gender){
    
    
    this.base = Animal;
    this.base(name,age);
    this.gender = gender;
};

1.2 第二步 —— 子类继承父类的原型

1.2.1 父类原型对象的克隆对象

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
// 健全关系

这里切记是让Dog.prototype等于父类原型对象的克隆对象（通过Object.create()方法生成），而不是直接等于Animal.prototype。否则之后对Dog.prototype的操作，也会连父类的原型Animal.prototype一起修改掉。

声明一个Dog的实例对象wangcai，可以看到他可以正常访问其祖先级构造函数Animal中的属性和方法：

var wangcai = new Dog("wangcai",2,"male");
console.log(wangcai.name);
console.log(wangcai.color);
wangcai.sayName();


——————OUTPUT——————
wangcai
white
my name is wangcai

instanceof运算符用来判断当前对象是否为某个构造函数的实例，返回一个布尔值。wangcai对Dog和Animal都返回了true。

console.log(wangcai instanceof Dog);
console.log(wangcai instanceof Animal);


——————OUTPUT——————
true
true

1.2.2 父类的一个实例

Dog.prototype = new Animal();
Dog.prototype.constructor = Dog;  
// 健全关系

1.3

两种方法：原型链继承和借用构造函数。

// 子构造函数
function Dog(name,age,gender){
    
    
    Animal.call(this,name,age);  // 借用构造函数
    this.gender = gender;
};

Dog.prototype = new Animal();  // 原型链继承
Dog.prototype.constructor = Dog;  // 健全关系
Dog.prototype.sayGender= function (){
    
    
    console.log("my gender is",this.gender);
};

// 创建实例对象
var dog = new Dog("zevin",21,"male");
console.log(dog.constructor);
dog.sayGender();
dog.sayName();


——————OUTPUT——————
[Function: Dog]
my gender is male
my name is zevin

二. 多重继承