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

原型链继承

原型链继承是 JavaScript 中实现继承的一种方式，它通过使用原型来实现对象之间的继承关系。

在 JavaScript 中，每个对象都有一个原型（prototype），它是一个指向另一个对象的引用。当我们访问一个对象的属性时，如果该对象自身没有该属性，则会去它的原型上查找，如果原型上也没有，则会继续往上层原型查找，直到找到该属性或者到达原型链的顶端。

原型链继承就是利用这种原型链的特性来实现继承。具体步骤如下：

1. 创建一个父类的构造函数，并定义父类的属性和方法。
2. 创建一个子类的构造函数，并将其原型对象指向父类的实例。
3. 在子类的构造函数中添加子类独有的属性和方法。

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

// 2
function Child() {
  this.name = 'Child'
}
Child.prototype = new Parent()

// 3
Child.prototype.getName = function() {
  return this.name
}

// 实例化
var child = new Child()
child.getName() // 'Child'
child.getArr() // [1,2,3]

通过以上步骤，我们就实现了子类继承父类的属性和方法，并且可以在子类中添加自己独有的属性和方法。这样，当我们创建子类的实例时，它会先在自身查找属性和方法，如果没有找到，则会去父类的原型上查找，从而实现了继承。

优点

原型链继承方式的优点在于 简单。

缺点

使用原型链继承的一个缺点是，所有子类的实例都共享同一个父类的实例，这可能会导致子类实例之间相互影响。

child.arr.push(4)
child.getArr() // [1,2,3,4]

var child2 = new Child()
child2.gerArr() // [1,2,3,4]，想要的结果应该是[1,2,3]

另外，如果子类需要传递参数给父类的构造函数，就无法通过直接调用父类的构造函数来实现，需要通过中间的过程来传递参数。

结语

牵手 持续为你分享各类知识和软件 ，欢迎访问、关注、讨论 并留下你的小心心❤