JavaScript原型和原型链：深入解析继承奥秘

2024-01-25 10:21:19

JavaScript原型的奥秘

在JavaScript世界里，一切皆对象，包括函数、数组和null。这些对象都拥有一个原型，原型又是一个对象，它包含了该对象所继承的属性和方法。这便是JavaScript中独有的原型和原型链机制。

原型的理解

每个对象都有一个原型，原型是一个指向另一个对象的指针。我们可以通过Object.getPrototypeOf()方法来获取一个对象的原型。

const obj = {};
const proto = Object.getPrototypeOf(obj);
console.log(proto); // {}

上面的代码中，我们创建一个空对象obj，并使用Object.getPrototypeOf()方法获取它的原型。输出结果是一个空对象，它是所有对象的原型，称为基本原型对象（base prototype object）。

原型链的探索

对象的原型链是一条从该对象到基本原型对象的路径。我们可以通过原型链来访问对象的属性和方法。

const obj = {
  name: 'John Doe',
};

const proto = Object.getPrototypeOf(obj);
console.log(proto.hasOwnProperty('name')); // false
console.log(obj.hasOwnProperty('name')); // true
console.log(obj.name); // 'John Doe'

上面的代码中，我们创建一个对象obj，并设置一个name属性。我们使用Object.getPrototypeOf()方法获取obj的原型，并检查它是否具有name属性。输出结果为false，因为原型链中的基本原型对象不具有name属性。

然后，我们使用hasOwnProperty()方法检查obj是否具有name属性。输出结果为true，因为obj本身具有name属性。

最后，我们使用obj.name访问name属性。输出结果为'John Doe'，这是因为JavaScript会沿着原型链向上查找，直到找到具有该属性的对象。

继承的实现

在JavaScript中，继承是通过原型链实现的。子对象继承父对象的属性和方法，从而实现代码的复用和维护。

function Parent() {
  this.name = 'John Doe';
}

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

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

const child = new Child();
child.greet(); // Hello, my name is John Doe