JS补原型链 - 技术栈

JS补原型链

冰履踏青云2024-10-27 20:36

在JavaScript中，补足一个对象的原型链通常是指确保一个对象继承自另一个对象。这涉及到原型和构造函数。

对于构造函数（通常首字母大写，如 Animal），它们有一个 prototype 属性，这个属性是一个对象，它定义了通过这个构造函数创建的所有实例的原型。当你使用 new 关键词创建一个新对象时，新对象的内部 [[Prototype]]（也就是它的 __proto__ 属性）会被设置为构造函数的 prototype 属性。

例如：

javascript 复制代码

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

Animal.prototype.speak = function() {
  console.log(`${this.name} makes a noise.`);
};

let dog = new Animal('Rover');

dog.speak(); // Rover makes a noise.
console.log(dog.__proto__ === Animal.prototype); // true

在这个例子中，dog 对象的原型链是这样的：

dog -> Animal.prototype -> Object.prototype -> null

这里的 dog.__proto__ 指向 Animal.prototype，而 Animal.prototype 的 __proto__ 又指向 Object.prototype，这是所有对象默认的原型。

如果你想为一个已经存在的对象补足原型链，你不能直接使用 对象.prototype，因为实例对象没有 prototype 属性（这个属性是属于构造函数的）。而是应该使用：

Object.getPrototypeOf(obj) 来获取对象的原型。
Object.setPrototypeOf(obj, prototype) 来设置对象的原型（尽管这种做法在性能上不是很好，因此不推荐在性能敏感的环境中使用）。

例如：

javascript 复制代码

let cat = {
  meow: function() {
    console.log('Meow!');
  }
};

let myCat = {
  name: 'Whiskers'
};

// Set myCat's prototype to cat
Object.setPrototypeOf(myCat, cat);

myCat.meow(); // Meow!

在这个例子中，myCat 对象的原型链被补足为：

myCat -> cat -> Object.prototype -> null

现在 myCat 能够访问 cat 对象中定义的 meow 方法了。