怎么理解js的原型链继承？

Posted 2020-11-22 「烟雨星空」

前言

了解java等面向对象语言的童鞋应该知道。面向对象的三大特性就是：封装，继承，多态。

今天，我们就来聊一聊继承。但是，注意，我们现在说的是js的继承。

在js的es6语法出来之前，我们想实现js的继承关系，需要借助于原型链。之前的文章，我有讲过原型和原型链的概念。在这，再重新回顾一下。

1. js中万物皆对象，每个对象都有一个隐式原型 __proto__ ，指向创建它的构造函数的原型对象。
2. 函数（构造函数）除了有一个隐式原型对象，还有一个属性prototype，它指向一个对象，这个对象就是原型对象，也叫显式原型。
3. 原型对象有一个属性constructor，它指向这个构造函数本身。

而原型链，就是为了实现js的继承，把实例对象的__proto__属性一层一层的指向它的构造函数的原型对象，直到它（Object.prototype）的原型对象为null。

举例分析

我们现在定义一个构造函数Person作为父类，传入一个name属性，给原型对象添加一个getName的方法。

function Person(name){
    this.name = name;
}

Person.prototype.getName = function(){
    console.log(`姓名:${this.name}`);
}

然后再定义一个构造函数Student，用以继承父类Person

function Student(name){
    //此处可以通过call方法来改变this的指向
    Person.call(this,name);
    //this.name = name;
}

var student = new Student("小明");

注意，此时我们只是调用了Person的构造函数，不等同于继承了Person。

可以通过打印 student实例对象来看它的原型链关系:

student  =>  Student.prototype => Object.prototype => null

这不是我们想要的结果，我们需要把原型链的继承关系改为这样的：

student  =>  Student.prototype => Person.prototype => Object.prototype => null

因此，我们需要把Student的原型指向父类Person的一个实例对象：

//创建一个父类构造函数的实例person
var person = new Person();
//把Student的原型指向新创建的 person实例
Student.prototype = person;
//同时需要把Student的构造函数修正为Student，
//因为此时Student的构造函数为Person，可自行 console.log(Student.prototype.constructor)查看
Student.prototype.constructor = Student;

//此时就可以正常的调用父类的方法了
student.getName(); //姓名:小明

以上，就可以实现js基于原型链的继承，这是在es6的class概念出来之前。在es6之后，就可以通过class的extends来实现继承。其实，这只是js的语法糖，在js引擎内部帮你实现了原型链的继承关系。

大胆猜测一下，es6这样的语法设计，也是为了迎合大部分面向对象的程序员吧。。。（感兴趣的小伙伴可以了解下typescript和es6）