原型继承

要成为做饭糕手
51 阅读2分钟

在 JavaScript 中，原型继承是其核心特性之一，它允许对象从其他对象继承属性和方法。理解原型继承对于有效地使用 JavaScript 非常重要，尤其是在处理复杂的对象关系和继承结构时。

原型对象

每个 JavaScript 对象在其创建时都会关联一个原型对象。当我们试图访问一个对象的某个属性或方法时，如果该对象本身并没有这样的属性或方法，JavaScript 引擎会沿着原型链向上查找，直到找到该属性或方法或者到达原型链的末端。

如何查看原型：

你可以通过 .prototype 属性来访问一个构造函数的原型对象，也可以通过 __proto__ 属性来访问一个对象的原型对象。

创建对象与原型链

JavaScript 中的对象可以通过多种方式创建，其中最常见的是使用构造函数：

Javascript
深色版本
function Person(name) {
    this.name = name;
}

Person.prototype.sayHello = function() {
    console.log('Hello, ' + this.name);
};

var john = new Person('John');
john.sayHello(); // 输出: Hello, John

在这个例子中，Person 是一个构造函数，当使用 new 关键字调用时，会创建一个新的 Person 实例。Person.prototype 包含了所有 Person 实例共享的方法和属性。

原型链继承

如果我们想要让一个构造函数继承另一个构造函数的属性和方法，我们可以将父构造函数的一个实例设置为子构造函数的原型：

Javascript
深色版本
function Animal(sound) {
    this.sound = sound;
}

Animal.prototype.makeSound = function() {
    console.log(this.sound);
};

function Dog(sound) {
    Animal.call(this, sound); // 调用父构造函数
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

var dog = new Dog('Bark');
dog.makeSound(); // 输出: Bark

这里我们使用 Object.create() 方法来创建一个新的对象，该对象的原型是 Animal.prototype。然后我们将新创建的对象设置为 Dog.prototype，这样所有的 Dog 实例就能够访问 makeSound 方法了。

注意事项

当使用原型继承时，需要注意以下几点：

  1. 原型链查找：对于一个对象来说，如果它自身没有某个属性或方法，JavaScript 会沿着原型链查找，直到找到或者达到原型链的顶端（通常是 Object.prototype）。
  2. 原型污染：由于所有实例共享同一个原型对象上的属性和方法，因此如果在原型上添加或修改属性，会影响到所有实例。
  3. 构造函数的调用：当一个构造函数被继承时，通常需要在子构造函数中显式调用父构造函数以确保父构造函数得到正确的执行。

结论

原型继承是 JavaScript 中实现继承的主要机制。相比于传统的类继承模型，原型继承更加灵活，但也可能引入一些复杂性和潜在的问题，比如原型污染。理解和掌握原型继承对于编写高效、可维护的 JavaScript 代码至关重要。

avatar
文章
阅读
粉丝