在JavaScript中,每个对象都有一个关联的原型对象,而原型链是由这些对象链接在一起形成的链式结构。当你访问一个对象的属性或方法时,JavaScript引擎会首先在对象本身查找,如果找不到,则会沿着原型链向上查找,直到找到匹配的属性或方法,或者到达原型链的顶端(Object.prototype)。
工作原理:
对象和原型:
- 每个对象都有一个内部属性
[[Prototype]]
,它指向其原型对象。你可以通过Object.getPrototypeOf(obj)
来访问一个对象的原型。
let obj = { }; let prototypeOfObj = Object.getPrototypeOf(obj);
- 每个对象都有一个内部属性
原型链的连接:
- 当你试图访问一个对象的属性或方法时,如果对象本身没有这个属性,JavaScript引擎会在其原型对象上查找,依此类推,直到找到匹配的属性或到达原型链的顶端。
// 定义一个构造函数 function Person(name) { this.name = name; } // 创建一个实例 let person = new Person('John'); // person 对象的原型是 Person.prototype // Person.prototype 的原型是 Object.prototype // 形成原型链:person -> Person.prototype -> Object.prototype
Object.prototype:
- 所有的 JavaScript 对象都继承自
Object.prototype
,它是原型链的顶端。
// Object.prototype 的原型是 null,表示原型链的终点 // 形成原型链:Object.prototype -> null
- 所有的 JavaScript 对象都继承自
作用:
继承:
- 原型链是 JavaScript 中实现继承的基础。当你创建一个对象时,它自动继承了其原型对象的属性和方法。
共享属性和方法:
- 如果多个对象共享相同的原型,它们就共享相同的属性和方法,这有助于节省内存空间。
示例:
// 定义一个构造函数
function Animal(name) {
this.name = name;
}
// 在 Animal 的原型上添加方法
Animal.prototype.sayHello = function() {
console.log('Hello, I am ' + this.name);
};
// 创建一个实例
let cat = new Animal('Whiskers');
// 使用原型链上的方法
cat.sayHello(); // 输出: Hello, I am Whiskers
在这个例子中,cat
对象通过原型链继承了 Animal.prototype
上的 sayHello
方法。当我们调用 cat.sayHello()
时,JavaScript引擎首先在 cat
对象中查找,然后在 Animal.prototype
中找到了 sayHello
方法。