web前端tips：js继承——借用构造函数继承

news2024/12/25 9:11:02

输入图片描述

上篇文章给大家分享了 js继承中的原型链继承

web前端tips：js继承——原型链继承

在文章末尾，我提到了

原型链的继承，子类需要传递参数给父类的构造函数，就无法通过直接调用父类的构造函数来实现，需要通过中间的过程来传递参数

那这篇文章，也就能解决这个传参问题了。

借用构造函数继承

又叫经典继承，它通过在子类构造函数中调用父类构造函数来继承父类的属性和方法。

借用构造函数继承的核心思想是，在子类构造函数中使用 call() 或 apply() 方法调用父类构造函数，并将子类实例作为参数传递给父类构造函数。这样就能够在子类实例中创建父类的属性，并且每个子类实例都有它们自己的属性副本。

以下是借用构造函数继承的基本步骤：

定义父类构造函数，设置父类的属性和方法。
定义子类构造函数，使用 Parent.call(this, ...) 在子类中调用父类构造函数，并传递子类特有的参数。
在子类构造函数中定义子类的属性和方法。

// 1
function Parent(name) {
  this.name = name
  this.arr = [1,2,3]
}

// 2
function Child(name, age) {
  // 借用父类构造函数
  Parent.call(this, name)
  this.age = age
}

// 实例化
var child = new Child('我是 child', 666)
child.name // 我是 child
child.arr // [1,2,3]
child.age // 666

通过以上步骤，我们就实现了简单的借用构造函数继承，也解决了原型链继承传参问题。

并且由于每个子类实例都有它们自己的属性副本，所以对属性修改是不会互相影响的：

var child1 = new Child('我是 child1', 111)
var child2 = new Child('我是 child2', 222)
child1.arr.push(4)
child1.arr // [1,2,3,4]
child2.arr // [1,2,3]

优点

子类实例具有独立的属性，不会共享父类实例的属性。
子类可以向父类构造函数传递参数。

缺点

无法继承父类原型链上的方法和属性，只能继承父类构造函数中的属性和方法。

function Parent(name) {
  this.arr = [1,2,3]
}
Parent.prototype.getArr = function() {
  return this.arr
}
function Child() {
  // 借用父类构造函数
  Parent.call(this)
}
// 实例化
var child = new Child()
child.getArr() // Uncaught TypeError: child.getArr is not a function