返回
原型与原型链:JavaScript 的基石
前端
2024-01-26 10:20:30
原型是 JavaScript 中一个核心的概念,理解它对于掌握这门语言至关重要。它为对象提供了一个继承机制,使我们能够轻松地创建和扩展对象。
原型链是一个链接对象的链条,它决定了对象可以访问哪些属性和方法。每个对象都有一个指向其原型的指针,而原型又可以有自己的原型,以此类推。
构造函数和原型
构造函数是用来创建对象的蓝图。当我们使用 new
调用构造函数时,它会创建一个新的对象实例。这个实例对象具有一个 __proto__
属性,该属性指向构造函数的 prototype
属性。
function Person(name) {
this.name = name;
}
const person1 = new Person('John');
const person2 = new Person('Mary');
在这个示例中,Person
是构造函数,我们使用 new
创建了两个实例对象 person1
和 person2
。person1
和 person2
的 __proto__
属性都指向 Person.prototype
对象。
原型对象
原型对象包含了构造函数所有实例对象共享的属性和方法。我们可以通过构造函数的 prototype
属性访问原型对象。
console.log(Person.prototype); // {constructor: ƒ}
如上所示,Person
的原型对象只有一个属性 constructor
,它指向构造函数本身。我们可以向原型对象添加我们想要所有实例对象共享的任何属性或方法。
Person.prototype.greet = function() {
console.log(`Hello, my name is ${this.name}`);
};
现在,所有 Person
实例都可以访问 greet()
方法。
person1.greet(); // Hello, my name is John
person2.greet(); // Hello, my name is Mary
原型链
当我们访问一个对象的不存在于自身中的属性或方法时,JavaScript 会沿着原型链向上查找。如果在原型中找到了该属性或方法,则会返回该值。
console.log(person1.name); // John
console.log(person1.age); // undefined
person1.__proto__ === Person.prototype; // true
在这个示例中,person1
没有一个名为 age
的属性,但是它的原型 Person.prototype
有。因此,JavaScript 沿着原型链找到了 age
属性,并返回了 undefined
。
摘要
- 原型是对象继承的基础,它为对象提供了一个共享属性和方法的机制。
- 构造函数的
prototype
属性指向原型对象。 - 原型链是一个对象的链条,它允许对象访问其原型中的属性和方法。
- 当我们访问一个对象不存在的属性或方法时,JavaScript 会沿着原型链向上查找。