返回

探究原型、对象原型与原型链的奥秘

前端

在 JavaScript 中,原型是一个对象,它作为另一个对象的基准。当创建新对象时,它从原型中继承属性和方法。对象原型是一个指向原型对象的指针,它包含对象自身及其原型链上所有继承的属性和方法。原型链是一系列对象,每个对象都具有一个原型对象,而原型对象又具有另一个原型对象,如此递归,直到到达最顶层的原型对象。

原型

原型是 JavaScript 中的一个重要概念。原型是一个对象,它作为另一个对象的基准。当创建新对象时,它从原型中继承属性和方法。原型可以是任何类型的对象,包括函数、数组、字符串和对象。

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.greet = function() {
  console.log("Hello, my name is " + this.name + " and I am " + this.age + " years old.");
};

const person1 = new Person("John", 30);
person1.greet(); // Hello, my name is John and I am 30 years old.

在上面的示例中,Person 函数是一个原型,它定义了 Person 对象的属性和方法。当使用 new 运算符创建一个新的 Person 对象时,该对象会从 Person.prototype 对象中继承属性和方法。因此,person1 对象具有 nameagegreet 属性和方法。

对象原型

对象原型是一个指向原型对象的指针。它包含对象自身及其原型链上所有继承的属性和方法。

const person1 = new Person("John", 30);

console.log(person1.__proto__); // { greet: [Function: greet] }

在上面的示例中,person1.__proto__ 属性的值是 Person.prototype 对象。这表明 person1 对象从 Person.prototype 对象中继承了 greet 方法。

原型链

原型链是一系列对象,每个对象都具有一个原型对象,而原型对象又具有另一个原型对象,如此递归,直到到达最顶层的原型对象。

const person1 = new Person("John", 30);

console.log(person1.__proto__.__proto__); // {}

在上面的示例中,person1.__proto__.__proto__ 属性的值是一个空对象。这意味着 Person.prototype 对象的原型对象是 Object.prototype 对象,而 Object.prototype 对象的原型对象是 null。因此,person1 对象的原型链是 person1Person.prototypeObject.prototype

原型、对象原型和原型链是 JavaScript 中的重要概念。理解这些概念有助于理解面向对象编程的基本思想和原理。通过本文的讲解,读者应该对原型、对象原型和原型链有了更深入的了解。