Spirit带你彻底搞懂JS的6种继承方案

JavaScript中实现继承的6种方案

01-原型链的继承方案

function Person(){
    this.name="czx";
}
function Student(){}
var p1=new Person();
Student.prototype=p1;
var student1=new Student();
console.log(student1); // Person{}
console.log(student1.name); // czx

这是最简单的一种方案,同时也是弊端最多的方案,我们来分析下他的弊端

1. 如果直接打印Student的实例对象,打印出来是这样

   

   为啥不是打印出来的Student呢,我们先得了解一个东西,打印出来的这个名称是由constructor决定的

   我们直接将Person的实例对象赋值给Student的prototype,Student原来的prototype就被覆盖了
   
   而Person的实例对象的隐式原型是指向Person的prototype的

   而Person的prototype中是有constructor的,constructor是指向Person本身的
   
   你们可以这么理解,Person.prototype,那么constructor就是指向Person,Object.prototype中的constructor就是指向Object

   所以,Student1没找到自己的constructor,沿着原型链往上找,找到了Person的constructor,所以就是Person

2. 通过这种方式继承过来,打印学生的实例对象,继承过来的属性是看不见的

3. 如果在父类Person上添加引用类型的数据,如果我们创建多个学生对象实例,修改了引用类型的数据,那么父类中的数据也是会被改变的,那么实例的对象,相互之间就不是独立的,可以看下下面这段代码

   function Person(){
       this.friends=[];
   }
   function Student(){}
   var p1=new Person();
   Student.prototype=p1;
   var student1=new Student();
   var student2=new Student();
   student1.friends.push("czx");
   console.log(student2.friends); // ["czx"]
   

4. 无法传递参数

   细心的同学可能就会发现,我这样写是无法传递参数的.那以后我们要传递参数的话,就会相当麻烦

   所以,接下来我们看第二种方式

   ---

02-借用构造函数实现继承

这个方案的核心就是 call

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

// 第一个弊端: Person执行了两次
// 第一次是new出来的,第二次是call执行的
// 第二个弊端是 在new的时候,会往student上加上一些不必要的属性,会把继承的属性加到了Student上面,这是没必要的
Student.prototype = new Person();
Student.prototype.studying = function () {
    console.log(this.name + "再学习");
}
function Student(name, age, sno) {
    Person.call(this, name, age);
    this.sno = sno;
}

let stu1 = new Student("czx", 18, 180047101);
stu1.studying();
console.log(stu1);

这个方案解决了第一种方案的(2),(3),(4)弊端

1. 这两个放的顺序一定不能放错了

   Student.prototype = new Person();
   Student.prototype.studying = function () {
       console.log(this.name + "再学习");
   }
   

   顺序放错的话 studying那个函数加在了Student原来的原型上,而后又把Person的实例对象覆盖了Student的原型,那么在我们调用的话,就找不到了

2. 我们来看下这一段

   function Student(name, age, sno) {
       Person.call(this, name, age);
       this.sno = sno;
   }
   

   因为在我们内直接使用call调用了Person并执行了,那么Person的属性也都可以在Student里面使用,这也能使的我们可以传递属性,可以复用父类中定义的属性.并且在我们打印的时候,也能把属性全部打印出来,大家可以自己试试

3. 这个方案说实话已经很不错了,解决了大部分问题,如果简单使用也是可以的,但是这种方案就没有弊端吗?
   
   答案是有的,我们现在来看下它的弊端

   1. 第一个弊端: Person执行了两次
   2. 第一次是new出来的,第二次是call执行的
   3. 第二个弊端是 在new的时候,会往student上加上一些不必要的属性,会把继承的属性加到了Student上面,这是没必要的,我们只需要在call的时候,调用Person,并且把属性放到Student上面去就行了
   4. 第一种方案的第一个弊端也没有解决

我们现在来看下一种方案

---

03-直接继承父类的原型

function Person(name) {
    this.name = name;
}
Person.prototype.running = function () {
    console.log(this.name + " is running");
}

function Teacher(name, career) {
    Person.call(this, name);
    this.career = career;
}
function Student(name, age) {
    Person.call(this, name);;
    this.age = age;
}

// 这种方法可不可行呢?
// 答案是不行
// 我们看下面的例子
// 我明明是给学生单独加的属性,但是teacher也可以共用它,这是不合理的
// 我们需要的是学生和老师自己的原型上是属于自己独一无二的属性
// 这样子可复用性才会高
Student.prototype = Person.prototype;
Teacher.prototype = Person.prototype;
Student.prototype.studying = function () {
    console.log(this.name + " is learning");
}

var s1 = new Student("czx", 18);
var t1 = new Teacher("teacher", "math");
console.log(s1);
s1.running()
s1.studying();
t1.studying();

这种方案是基于第二种方案的一个改版,但是我们看下这种方案可不可行

看完代码,大家也知道不行了,我在代码上也有详细的注释

1. 我明明是给学生单独加的属性,但是teacher也可以共用它,这是不合理的,这是因为我们加的方法都是直接加在了父类的原型上
2. 我们需要的是学生和老师自己的原型上是属于自己独一无二的属性
3. 这样子可复用性才会高

接下来会介绍基于对象来实现继承的两种方案,这两种方案对于最后一种方案的出现有很大的帮助,请大家仔细看看理解

---

04-原型式继承

这个方案是由道格拉斯·克罗克福德（Douglas Crockford）所提出来的,是对我们前端届贡献特别大的一个人物

这个方案是专门针对对象的

我们先看下他当时是怎么实现的

// o是对象
function createObject(o){
    function fn(){};
    //将对象赋值给fn的原型
    fn.prototype=o;
    //将实例化的fn赋值给新对象,这样新对象的隐式原型就会指向我们传递进来的obj
    var newObj=new fn();
    return newObj;
}

大家可以浏览下我上面写的代码,这是道格拉斯当时的想法

现在随着js的逐渐变化,我们写这种方案也变得比较简单了,我们来看下面代码

function createObject(o){
    var newObj={};
    Obejct.setPrototypeof(newObj,o);
    return newObj;
}

Object.setPrototypeof()可以给对象设置一个新的原型,相比之前更加方便了

基于最新的ECMA标准的化,我们还可以这么写

var newObj=Object.create(o);

直接创建一个以o为原型的对象

接下来是针对这一种方案做的一个完善版

---

05-寄生式继承

var personObj = {
  running: function() {
    console.log("running")
  }
}
function createStudent(name) {
  var stu = Object.create(personObj)
  stu.name = name
  stu.studying = function() {
    console.log("studying~")
  }
  return stu
}
var stuObj = createStudent("why")
var stuObj1 = createStudent("kobe")
var stuObj2 = createStudent("james")

这种方案是基于第四种方案进行改编的

寄生式继承的思路是结合原型类继承和工厂模式的一种方式；

即创建一个封装继承过程的函数, 该函数在内部以某种方式来增强对象，最后再将这个对象返回；

好,现在结合上述五种方案,我们可以开始介绍最后一种方案啦,只有了解了上述五种方案后,再来看这种方案,会有一种恍然大悟的感觉

---

06-寄生组合式继承

这种方案就是JS社区这么多年积累出来的最佳方案,我们来看下

//因为继承是一个可能很常用的方法,所以我们把继承的方法提炼出来了,作为一个工具函数
//这样我们只需要传递父类和子类,函数就能自动帮助我们实现继承
function inherit(faObj, chiObj) {
    //因为父类和子类的原型都是对象,所以可以用这个方法
    //创建一个以父类原型对象为原型的对象,并且将它赋值给子类原型
    //这帮助我们解决了第二种方案的父类执行了两次的问题,不需要实例化父类对象
    chiObj.prototype = Object.create(faObj.prototype);
    //这是为了解决前面方案都没有解决的constructor的方法
    Object.defineProperty(chiObj.prototype, "constructor", {
        value: chiObj,
        enumerable: false,
        writable: false,
        configurable: false,
    })
}

function Person(name, age, height) {
    this.name = name;
    this.age = age;
    this.height = height;
}
//下面是我们讲的第二种方案 借用构造函数实现继承
function Student(name, age, height, sno) {
    Person.call(this, name, age, height);
    this.sno = sno;
}
function Teacher(name, age, height, pro) {
    Person.call(this, name, age, height);
    this.pro = pro;
}

//在这里使用我们自己定义的继承函数
inherit(Person, Student);
inherit(Person, Teacher);
//注意:上下的顺序不能错,我在第二种方案的时候有讲过
Person.prototype.playing = function () {
    console.log(this.name + " is playing");
}
Student.prototype.studying = function () {
    console.log(this.name + " is studying");
}
Teacher.prototype.teaching = function () {
    console.log(this.name + " is teaching");
}
var s1 = new Student("czx", 18, 1.88, 180047101);
var t1 = new Teacher("Mr.cao", 21, 1.88, "computer");

//可以打印出所有的属性 并且打印的是对应的类,而不是父类了
console.log(s1);  // Student{}
console.log(t1); // Teacher{}
s1.studying();
t1.teaching();
s1.playing();
t1.playing();

我在代码中写的很详细了,大家一定要好好看看下,理解理解,如果觉得有啥疑惑,可以把之前的几种方案连起来好好看看

如果还有什么疑惑,欢迎大家在评论区留言