[可乐的随手记 - 2] 原型和原型链

31 阅读1分钟

原型

在JavaScript中,几乎所有对象都有一个内部属性 Prototype,这个属性是对象的原型。原型是一个对象,包含了可以被对象继承的属性和方法。当你访问一个对象的属性或者方法的时候,如果在对象身上无法查找到的时候, JavaScript引擎就会沿着原型链向上查找,直到找到属性或方法,或者到达原型链的末端(Object.prototype)

原型链

原型链是一个对象访问另外一个对象的属性和方法. 当你创建好了一个新对象的时候, 新对象会继承构造函数的原型上的属性和方法, 同时这个构造函数如果也有自己的原型, 那么这个时候新对象也可以访问这些更高层原型上的属性和方法, 这样就形成了一个链式结构, 从而称之为原型链

代码示例

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

Animal.prototype.speak = function() {
    return this.name + ' makes a noise.';
};

function Dog(name) {
    Animal.call(this, name); // 调用 Animal 构造函数并继承其原型
}

Dog.prototype = Object.create(Animal.prototype); // 设置 Dog 的原型为 Animal 原型的副本
Dog.prototype.constructor = Dog; // 修正构造函数指针

Dog.prototype.bark = function() {
    return this.speak() + ' Woof!';
};

var dog = new Dog('Rex');
console.log(dog.speak()); // 输出: Rex makes a noise.
console.log(dog.bark()); // 输出: Rex makes a noise. Woof!
  • Animal 是一个构造函数,它有一个 prototype 属性,包含了 speak 方法。
  • Dog 是另一个构造函数,它通过 Animal.call(this, name); 继承了 Animal 的原型。
  • 我们通过 Object.create(Animal.prototype); 创建了一个新的对象,这个对象的 [[Prototype]] 链接指向 Animal.prototype,并将这个新对象赋值给 Dog.prototype
  • Dog.prototype 被扩展,增加了一个 bark 方法。
  • 当我们创建 Dog 的一个实例 dog 时,dog 继承了 Dog.prototype 上的 bark 方法,同时也继承了通过原型链从 Animal.prototype 继承来的 speak 方法