首页 > 其他分享> > JS 的继承有几种方式？是怎么实现的？

JS 的继承有几种方式？是怎么实现的？

2022-08-21 10:36:58 作者：互联网

js继承的目的是重复利用另一个对象的属性和方法

原型链继承

让一个构造函数A的原型是另一个构造函数B的实例对象;那么A构造函数new出来的实例就拥有B的属性和方法

优点:父类方法可以复用

缺点:父类中的属性会被所有子类共享,当其中一个子类修改其值后,所有子类都会共享修改后的值;子类实例不能给父类构造函数传参

function Parent() {
   this.isShow = true
   this.info = {
       name: "mjy",
       age: 18,
   };
}
 
Parent.prototype.getInfo = function() {
   console.log(this.info);
   console.log(this.isShow);
}
 
function Child() {};
Child.prototype = new Parent();
 
let Child1 = new Child();
Child1.info.gender = "男";
Child1.getInfo(); // {name: 'mjy', age: 18, gender: '男'} ture
 
let child2 = new Child();
child2.isShow = false
console.log(child2.info.gender) // 男
child2.getInfo(); // {name: 'mjy', age: 18, gender: '男'} false

构造函数继承

在子类型构造函数内部调用父类型构造函数时,使用call()或apply()方法将父对象构造函数绑定到子对象上

优点:解决了原型链继承不能传参和父类属性共享问题

缺点:子类不能访问父类原型属性上的方法

function Parent(gender) {
  this.info = {
    name: "yhd",
    age: 19,
    gender: gender
  }
}
 
function Child(gender) {
    Parent.call(this, gender)
}
 
let child1 = new Child('男');
child1.info.nickname = 'xiaoma'
console.log(child1.info); //{name: 'yhd', age: 19, gender: '男', nickname: 'xiaoma'}
 
let child2 = new Child('女');
console.log(child2.info); //{name: 'yhd', age: 19, gender: '女'}

组合继承

将 原型链继承 和 构造函数继承 组合到一起;通过原型链实现对原型属性和方法的继承,借用构造函数实现队实例属性的继承

优点:解决了 原型链继承 和 构造函数继承 的缺点

缺点:会调用两次超类型构造函数,一次在创建子类型原型时,一次在子类型构造函数内部

function Person(gender) {this.info = {
    name: "mjy",
    age: 19,
    gender: gender
  }
}
 
Person.prototype.getInfo = function () {   // 使用原型链继承原型上的属性和方法
  console.log(this.info.name, this.info.age)
}
 
function Child(gender) {
  Person.call(this, gender) // 使用构造函数法传递参数
}
 
Child.prototype = new Person()
 
let child1 = new Child('男');
child1.info.nickname = 'xiaoma'
child1.getInfo() //mjy 19
console.log(child1.info); //{name: 'mjy', age: 19, gender: '男', nickname: 'xiaoma'}
 
let child2 = new Child('女');
console.log(child2.info); //{name: 'mjy', age: 19, gender: '女'}

原型式继承

方法一:在构造函数A内部临时创建一个构造函数B;将传入A的对象作为B的原型;最后返回B的新实例

function createObject(obj) {
  function Fun() {}
  Fun.prototype = obj
  return new Fun()
}
 
let person = {
  name: 'mjy',
  age: 18,
  hoby: ['唱', '跳'],
  showName() {
    console.log('my name is:', this.name)
  }
}
 
let child1 = createObject(person)
child1.name = 'xxxy'
child1.hoby.push('rap')
let child2 = createObject(person)
 
console.log(child1)
console.log(child2)
console.log(person.hoby) // ['唱', '跳', 'rap']

方法二:Object.create() 是把现有对象的属性，挂到新建对象的原型上，新建对象为空对象

ECMAScript 5通过增加Object.create()方法将原型式继承的概念规范化了。这个方法接收两个参数：作为新对象原型的对象，以及给新对象定义额外属性的对象（第二个可选）。在只有一个参数时，Object.create()与这里的函数A方法效果相同。

let person = {
  name: 'mjy',
  age: 19,
  hoby: ['唱', '跳'],
  showName() {
    console.log('my name is: ', this.name)
  }
}
 
let child1 = Object.create(person)
child1.name = 'xxt'
child1.hoby.push('rap')
let child2 = Object.create(person)
 
console.log(child1)
console.log(child2)
console.log(person.hoby) // ['唱', '跳', 'rap']

寄生式继承

寄生式继承的思路与(寄生) `原型式继承` 类似, 即创建一个仅用于封装继承过程的函数,该函数在内部以某种方式来增强对象,最后再像真的是它做了所有工作一样返回对象。

优点:不需要单独创建构造函数。

缺点:通过寄生式给对象添加函数,导致函数不能复用,从而降低效率

function objectCopy(obj) {
  function Fun() { };
  Fun.prototype = obj;
  return new Fun();
}
 
function createAnother(obj) {
  let clone = objectCopy(obj);
  clone.showName = function () {
    console.log('my name is：', this.name);
  };
  return clone;
}
 
let person = {
     name: "mjy",
     age: 18,
     hoby: ['唱', '跳']
}
 
let child1 = createAnother(person);
child1.hoby.push("rap");
console.log(child1.hoby); // ['唱', '跳', 'rap']
child1.showName(); // my name is： mjy
 
let child2 = createAnother(person);
console.log(child2.hoby); // ['唱', '跳', 'rap']

寄生组合式继承

组合继承是常用的经典继承模式，不过，组合继承最大的问题就是无论什么情况下，都会调用两次父类构造函数；一次是在创建子类型的时候，一次是在子类型的构造函数内部。寄生组合继承就是为了降低父类构造函数的开销而实现的。

优点:高效率只调用一次超类型函数,避免了在子类型上创建不必要的属性

缺点:代码复杂

function objectCopy(obj) {
  function Fun() { };
  Fun.prototype = obj;
  return new Fun();
}
 
function inheritPrototype(child, parent) {
  let prototype = objectCopy(parent.prototype);
  prototype.constructor = child;
  Child.prototype = prototype;
}
 
function Parent(name) {
  this.name = name;
  this.hoby = ['唱', '跳']
}
 
Parent.prototype.showName = function () {
  console.log('my name is：', this.name);
}
 
function Child(name, age) {
  Parent.call(this, name);
  this.age = age;
}
 
inheritPrototype(Child, Parent);
Child.prototype.showAge = function () {
  console.log('my age is：', this.age);
}
 
let child1 = new Child("mjy", 18);
child1.showAge(); // 18
child1.showName(); // mjy
child1.hoby.push("rap");
console.log(child1.hoby); // ['唱', '跳', 'rap']
 
let child2 = new Child("yl", 18);
child2.showAge(); // 18
child2.showName(); // yl
console.log(child2.hoby); // ['唱', '跳']

标签：function,child1,console,name,继承,几种,log,JS,构造函数
来源： https://www.cnblogs.com/qianduan-Wu/p/16609491.html

JS 的继承有几种方式 ？是怎么实现的？

JS 的继承有几种方式？是怎么实现的？