JavaScript原型链继承详解：理解属性屏蔽和继承本质

2024-02-13 03:16:06

JavaScript 中的继承方法

探索原型链、构造函数和组合式继承

在 JavaScript 中，继承是对象获取另一个对象的属性和方法的过程。作为一门面向对象的语言，JavaScript 提供了多种继承方法，每种方法都有其独特的优点和缺点。本文将深入探讨原型链、构造函数和组合式继承，帮助你理解这些技术在 JavaScript 中的应用。

原型链继承

原型链继承是最基本的继承形式，它通过将父对象的属性和方法复制到子对象上来实现。当子对象尝试访问属性或方法时，它会首先检查自身，如果找不到，它将沿原型链向上查找，直到找到该属性或方法。

优点：

简单易用
继承自父对象的所有属性和方法

缺点：

属性屏蔽： 如果子对象拥有与父对象同名的属性，则子对象属性将屏蔽父对象属性，导致父对象属性不可访问。

示例：

const parent = {
  name: 'parent',
};

const child = Object.create(parent);
child.name = 'child';

console.log(child.name); // child
console.log(parent.name); // parent

构造函数继承

构造函数继承通过在子对象的构造函数中调用父对象的构造函数来实现继承。这样，子对象实例将继承父对象实例的所有属性和方法。

优点：

避免属性屏蔽
继承自父对象的所有属性和方法

缺点：

无法继承父对象原型方法

示例：

function Parent(name) {
  this.name = name;
}

function Child(name) {
  Parent.call(this, name);
}

const child = new Child('child');
console.log(child.name); // child

组合式继承

组合式继承结合了原型链继承和构造函数继承的优点。它在子对象的构造函数中调用父对象的构造函数，同时将父对象的原型赋给子对象的原型。这样，子对象实例既可以继承父对象实例的属性和方法，又可以继承父对象的原型方法。

优点：

避免属性屏蔽
继承自父对象的所有属性、方法和原型方法

缺点：

代码比原型链继承和构造函数继承复杂

示例：

function Parent(name) {
  this.name = name;
}

Parent.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}`);
};

function Child(name) {
  Parent.call(this, name);
}

Child.prototype = Object.create(Parent.prototype);

const child = new Child('child');
child.sayHello(); // Hello, my name is child

结论

原型链、构造函数和组合式继承是 JavaScript 中常见的继承方法。每种方法都有其自身的优缺点，在不同的场景下可能会有不同的适用性。原型链继承简单易用，但存在属性屏蔽的问题。构造函数继承可以避免属性屏蔽，但无法继承父对象的原型方法。组合式继承结合了两种方法的优点，既避免属性屏蔽，又继承了父对象的原型方法。

常见问题解答