JS继承的6种方式(非ES6)

发布时间:2021-01-10 发布网站:编程之家
编程之家收集整理的这篇文章主要介绍了JS继承的6种方式(非ES6)编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本篇博客主要来整合一下JS继承的六种方式及其优缺点。首先我们提供一个父类:

// 父类
function Person(name) {
  this.name = name;
  this.showName = function () {
    console.log(this.name);
  }
}

原型链继承

本节中我们使用到的子类如下:

// 子类
function Staff(office) {
  this.office = office;
  this.showOffice = function(){
    console.log(this.office);
  }
}
Staff.prototype = new Person('staff');
const a = new Staff('D302');
const b = new Staff('D232');
a.showName();		// satff
a.showOffice();		// D302
b.showName();		// staff
b.showOffice();		// D232

上述语句即为原型链继承,此时,ab有一个共有属性name,要注意此时name为基本数据类型,而原型链继承构造的子对象之间共享的是引用数据类型,如果我单独对aname属性进行修改,那么bname属性不会因此而改变。举例说明如下:

Staff.prototype = new Person('staff');
const a = new Staff('D302');
const b = new Staff('D232');
a.name = 'change'
a.showName();	// change
b.showName();	// staff

但是,如果Person对象的name属性值引用类型的话,那么构造出的子对象的属性就有可能会受到影响,实例如下:

Staff.prototype = new Person([1,2,3]);
const a = new Staff('D302');
const b = new Staff('D232');
a.showName();	// [1,3]
b.showName();	// [1,3]
a.name.push(4);
a.showName();	// [1,3,4]
b.showName();	// [1,4]
a.name = [1,2]
a.showName();	// [1,2]
b.showName();	// [1,4]

大家可以看到如上两种情况,我在往name属性里面push的时候ab的属性值都发生了变化,但是我在将aname属性重新赋值为[1,2]时,bname值并没有发生变化。这是因为进行push操作之后引用数据类型的地址值并没有发生变化,而bname属性指向的地址与aname属性指向的地址相同,所以ab会同时发生变化。但是我将其重新复制时,aname属性指向的地址发生了变化,b指向的还是原来的地址,所以ab并没有发生同步变化。

优点: 能通过instanceOfisPrototypeOf的检测

缺点

  1. 父对象中的属性也变成了子对象的prototype中的公用属性

     		2. 不能向父类型的构造函数中传递参数
     		3. 只能继承一个父类
    

借用构造函数

function Staff(name,office) {
  Person.call(this,name);
  this.office = office;
  this.showOffice = function(){
    console.log(this.office);
  }
}

const a = new Staff('a','D302');
const b = new Staff('b','D232');
a.showName();	// a
b.showName();	// b
console.log(a instanceof Person);  // false

通过这个实例我们可以看出我们可以向父类传递参数了,并且可以继承多个父类函数,只要调用多次call函数即可.

优点

  1. 可以向父类传递参数
  2. 可以实现多父类继承
  3. 父类的属性不会被子类共享

缺点:调用构造函数的话就相当于在每个新建对象内都有一个独立的属性已经函数,StaffPerson并不能使用instanceof方法,两者并不存在指向关系,函数复用并没有派上用场。

组合继承

function Staff(name,name);
  this.office = office;
  this.showOffice = function(){
    console.log(this.office);
  }
}
Staff.prototype = new Person();
const a = new Staff('a','D232');
a.showName();	// a
b.showName();	// b
console.log(a instanceof Person);  // true

这种方法就是对原型链继承和构造函数继承的结合。

优点

  1. 继承前两者的优点
  2. 可以实现对构造函数的复用

缺点:调用了两次父类构造函数,更耗内存

原型式继承

function container(obj){
  function F() {}
  F.prototype = obj;
  return new F();
}
const child = new Person('child');
const staff = container(child);
staff.showName();  // child

这种继承方式其实可以看做是直接复制了父类。

缺点:无法复用

寄生式继承

function container(obj){
  function F() {}
  F.prototype = obj;
  return new F();
}

function Staff(obj,office) {
  const sub = container(obj);
  sub.office = office;
  sub.showOffice = function(){
    console.log(this.office);
  }
  return sub;
}
const child = new Person('child');
const a = Staff(child,'D232');
const b = Staff(child,'C433');
a.showName();	// child
a.showOffice();	// D232
b.showName();	// child
b.showOffice();	// C433

这种继承方式就是在原型式继承的基础上又加了一个函数用来新增加属性,解决了原型式继承需要后续增加属性的问题。

寄生组合继承(常用)

寄生组合式继承强化的部分就是在组合继承的基础上减少一次多余的调用父类的构造函数:

function Staff(name,name);
  this.office = office;
  this.showOffice = function () {
    console.log(this.office);
  }
}
Staff.prototype = Object.create(Person.prototype);
Staff.prototype.constructor = Person;
const a = new Staff('a','D232');
const b = new Staff('b','C433');
a.showName();	// a
a.showOffice();	// D232
b.showName();	// b
b.showOffice(); // C433

总结

以上是编程之家为你收集整理的JS继承的6种方式(非ES6)全部内容,希望文章能够帮你解决JS继承的6种方式(非ES6)所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入编程之家官方QQ群:1065694478
编程之家官方公众号

微信公众号搜索 “ 程序精选 ” ,选择关注!

微信公众号搜索 “ 程序精选 ”
精选程序员所需精品干货内容!