JavaScript 继承

发表于 更新于 分类于 Waline：

最近突然发现自己对于JavaScript的继承有些生疏，再来回顾一下。

在看这篇博客之前最好回顾下关于原型链的博客：https://sunra.top/posts/7a3d3c75/

原型链的设计思想

远古时代

要理解Javascript的设计思想，必须从它的诞生说起。

1994年，网景公司（Netscape）发布了Navigator浏览器0.9版。这是历史上第一个比较成熟的网络浏览器，轰动一时。但是，这个版本的浏览器只能用来浏览，不具备与访问者互动的能力。比如，如果网页上有一栏"用户名"要求填写，浏览器就无法判断访问者是否真的填写了，只有让服务器端判断。如果没有填写，服务器端就返回错误，要求用户重新填写，这太浪费时间和服务器资源了。

因此，网景公司急需一种网页脚本语言，使得浏览器可以与网页互动。工程师Brendan Eich负责开发这种新语言。他觉得，没必要设计得很复杂，这种语言只要能够完成一些简单操作就够了，比如判断用户有没有填写表单。

1994年正是面向对象编程（object-oriented programming）最兴盛的时期，C++是当时最流行的语言，而Java语言的1.0版即将于第二年推出，Sun公司正在大肆造势。

Brendan Eich无疑受到了影响，Javascript里面所有的数据类型都是对象（object），这一点与Java非常相似。但是，他随即就遇到了一个难题，到底要不要设计"继承"机制呢？

抉择

如果真的是一种简易的脚本语言，其实不需要有"继承"机制。但是，Javascript里面都是对象，必须有一种机制，将所有对象联系起来。所以，Brendan Eich最后还是设计了"继承"。

但是，他不打算引入"类"（class）的概念，因为一旦有了"类"，Javascript就是一种完整的面向对象编程语言了，这好像有点太正式了，而且增加了初学者的入门难度。

他考虑到，C++和Java语言都使用new命令，生成实例。

C++的写法是：

1
ClassName *object = new ClassName(param);

Java的写法是：

1
Foo foo = new Foo();

因此，他就把new命令引入了Javascript，用来从原型对象生成一个实例对象。但是，Javascript没有"类"，怎么来表示原型对象呢？

这时，他想到C++和Java使用new命令时，都会调用"类"的构造函数（constructor）。他就做了一个简化的设计，在Javascript语言中，new命令后面跟的不是类，而是构造函数。

举例来说，现在有一个叫做DOG的构造函数，表示狗对象的原型。

1
2
3
4
5
function DOG(name){

    this.name = name;

}

对这个构造函数使用new，就会生成一个狗对象的实例。

1
2
3
var dogA = new DOG('大毛');

alert(dogA.name); // 大毛

注意构造函数中的this关键字，它就代表了新创建的实例对象。

new运算符的缺点

用构造函数生成实例对象，有一个缺点，那就是无法共享属性和方法。

比如，在DOG对象的构造函数中，设置一个实例对象的共有属性species。

1
2
3
4
5
6
7
function DOG(name){

    this.name = name;

    this.species = '犬科';

}

然后，生成两个实例对象：

1
2
3
var dogA = new DOG('大毛');

var dogB = new DOG('二毛');

这两个对象的species属性是独立的，修改其中一个，不会影响到另一个。

1
2
3
dogA.species = '猫科';

alert(dogB.species); // 显示"犬科"，不受dogA的影响

每一个实例对象，都有自己的属性和方法的副本。这不仅无法做到数据共享，也是极大的资源浪费。

prototype属性的引入

考虑到这一点，Brendan Eich决定为构造函数设置一个prototype属性。

这个属性包含一个对象（以下简称"prototype对象"），所有实例对象需要共享的属性和方法，都放在这个对象里面；那些不需要共享的属性和方法，就放在构造函数里面。

实例对象一旦创建，将自动引用prototype对象的属性和方法。也就是说，实例对象的属性和方法，分成两种，一种是本地的，另一种是引用的。

还是以DOG构造函数为例，现在用prototype属性进行改写：

1
2
3
4
5
6
7
8
9
10
11
12
function Dog(name) {
    this.name = name;
    this.spec = function() {
        console.log(this.species);
    }
}

Dog.prototype = { species: '犬科' }

const dog = new Dog();

dog.spec();

现在，species属性放在prototype对象里，是两个实例对象共享的。只要修改了prototype对象，就会同时影响到两个实例对象。

1
2
3
4
5
DOG.prototype.species = '猫科';

alert(dogA.species); // 猫科

alert(dogB.species); // 猫科

由于所有的实例对象共享同一个prototype对象，那么从外界看起来，prototype对象就好像是实例对象的原型，而实例对象则好像"继承"了prototype对象一样。

这就是JavaScript继承机制的设计思想。

JavaScript的继承方式

ES5

原型链继承

1
2
3
4
5
6
7
8
9
10
11
12
13
function Dog(name) {
    this.name = name;
}

function animal(species) {
    this.species = species;
}

Dog.prototype = new animal("犬科")

const dog = new Dog();

console.log(dog.species);

原理：

species并不是dog实例上的属性，而是dog.__proto__，也就是Dog.prototype，也就是new animal()实例上的

优点：

简单易于实现，父类的新增的实例与属性子类都能访问

缺点：

可以在子类中增加实例属性，如果要新增加原型属性和方法需要在new 父类构造函数的后面

无法实现多继承

创建子类实例时，不能向父类构造函数中传参数

借用构造函数继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function Dog(name) {
    this.name = name;
    Animal.call(this, "犬科");
}

function Animal(species) {
    this.species = species;
    this.setCount = function(count) {
        this.count = count;
    }
}

const dog = new Dog();

dog.setCount(2);

console.log(dog.species);
console.log(dog.count);

原理：

species就是dog实例上的，因为在new Dog()的时候，调用了Animal.call方法，这个this就是后面的dog实例，所以其实是在dog的上下文上调用Animal方法，也就是说Animal执行的时候，上下文是dog，就直接在dog上挂在了species属性

count则是执行setCount时挂载在dog实例上的。

优点：

解决了子类构造函数向父类构造函数中传递参数

可以实现多继承（call或者apply多个父类）

缺点：

方法都在构造函数中定义，无法复用

不能继承原型属性/方法，只能继承父类的实例属性和方法

原型式继承（实例继承）

1
2
3
4
5
6
7
8
9
10
11
12
13
function Dog(name) {
    let instance = new Animal("犬科");
    instance.name = name;
    return instance;
}

function Animal(species) {
    this.species = species;
}

const dog = new Dog();

console.log(dog.species);

原理：

这里的dog其实是Animal的实例，并不是Dog的实例，也就是说dog instanceof Dog 是false。

这种方法就是先创建一个Animal实例，然后在实例上创建新的属性。

优点：

不限制调用方式

简单，易实现

缺点：不能多次继承

组合式继承

调用父类构造函数，继承父类的属性，通过将父类实例作为子类原型，实现函数复用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
function Animal(species) {
    this.species = species;
    this.setCount = function(count) {
        this.count = count;
    }
}

Animal.prototype.setAge = function(age) {
    this.age = age;
}

function Dog(name) {
    this.name = name;
    Animal.call(this, "犬科");
}

Dog.prototype = new Animal("quanke");
Dog.prototype.constructor = Dog;

const dog = new Dog('first');

dog.setCount(2);
dog.setAge(12);

console.log(dog.species);
console.log(dog.count);
console.log(dog.age);

//犬科
//2
//12

原理：

利用构造函数继承来创建每个子类实例的属性，也就是说每个子类上的属性都是独享的。

利用原型链继承的方式共享父类原型上的方法。

缺点：

由于调用了两次父类，所以产生了两份实例

优点：

函数可以复用

不存在引用属性问题

可以继承属性和方法，并且可以继承原型的属性和方法

寄生组合式继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//父类
function People(name,age){
  this.name = name || 'wangxiao'
  this.age = age || 27
}
//父类方法
People.prototype.eat = function(){
  return this.name + this.age + 'eat sleep'
}
//子类
function Woman(name,age){
  //继承父类属性
  People.call(this,name,age)
}
//继承父类方法
(function(){
  // 创建空类
  let Super = function(){};
  Super.prototype = People.prototype;
  //父类的实例作为子类的原型
  Woman.prototype = new Super();
})();
//修复构造函数指向问题
Woman.prototype.constructor = Woman;
let womanObj = new Woman();

原理：

在组合式继承的基础上，利用寄生式继承的思想，改造原型链继承方式，因为原型链继承的方式会再次创建一个父类的实例，会造成内存的浪费，所以就创建一个空类，然后把空类的原型对象置为父类的原型对象，再让子类的__proto__指向空类的一个实例。

ES6

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
//class 相当于es5中构造函数
//class中定义方法时，前后不能加function，全部定义在class的protopyte属性中
//class中定义的所有方法是不可枚举的
//class中只能定义方法，不能定义对象，变量等
//class和方法内默认都是严格模式
//es5中constructor为隐式属性
class People{
  constructor(name='wang',age='27'){
    this.name = name;
    this.age = age;
  }
  eat(){
    console.log(`${this.name} ${this.age} eat food`)
  }
}
//继承父类
class Woman extends People{ 
   constructor(name = 'ren',age = '27'){ 
     //继承父类属性
     super(name, age); 
   } 
    eat(){ 
     //继承父类方法
      super.eat() 
    } 
} 
let wonmanObj=new Woman('xiaoxiami'); 
wonmanObj.eat();

ES5继承和ES6继承的区别

es5继承首先是在子类中创建自己的this指向，最后将方法添加到this中

Child.prototype=new Parent() || Parent.apply(this) || Parent.call(this)

es6继承是使用关键字先创建父类的实例对象this，最后在子类class中修改this

参考链接

https://zhuanlan.zhihu.com/p/37735247

http://www.ruanyifeng.com/blog/2011/06/designing_ideas_of_inheritance_mechanism_in_javascript.html