hand
_1_11_55
4
返回栏目
0k
2k
1k
2k
1k
1k
1k
2k
2k
2k
1k
2k
1k
2k
1k
1k
1k
1k
1k
2k
1k
1k
1k
1k
1k
1k
1k
1k
1k
2k
1k
1k
1k
1k
1k
1k
1k
1k
1k
2k
1k
1k
1k
1k
1k
1k
1k
2k
1k
2k
1k
1k
1k
1k
1k
1k
1k
2k
2k
1k
1k
1k
2k
1k
1k
2k
2k
1k
1k
1k
2k
1k
1k
2k
2k
1k
2k
1k
1k
2k
2k
2k
3k
3k
2k
3k
2k
3k
3k
3k
1k
2k
3k
2k
2k
3k
3k
2k
2k
6k
3k
2k
2k
5k
3k
4k
3k
3k
2k
4k
3k
3k
2k
3k
3k
1k
4k
4k
4k
2k
5k
3k
2k
3k
4k
3k
3k
4k
2k
3k
3k
4k
2k
2k
3k
4k
3k
3k
2k
5k
2k
3k
3k
3k
3k
2k
3k
3k
3k
2k
2k
2k
2k
3k
2k
2k
2k
3k
2k
2k
2k
2k
2k
2k
0.1k
0.2k
3k
2k
3k
2k
0.1k
2k
2k
4k
2k
2k
1k
2k
2k
3k
3k
3k
3k
2k
2k
3k
3k
3k
4k
3k
3k
4k
3k
2k
2k
3k
3k
3k
3k
3k
3k
2k
3k
3k
4k
4k
3k
3k
2k
2k
3k
2k
2k
1k
2k
3k
1k
2k
2k
2k
2k
2k
2k
2k
2k
2k
4k
2k
3k
2k
1k
2k
2k
2k
2k
2k
3k
2k
3k
1k
2k
2k
2k
0k
2k
2k
2k
2k
2k
2k
2k
3k
2k
2k
1k
1k
3k
2k
3k
1k
2k
1k
2k
2k
2k
2k
3k
1k
3k
2k
2k
2k
2k
2k
2k
1k
2k
2k
4k
3k
3k
2k
2k
2k
2k
2k
2k
4k
3k
3k
3k
2k
2k
2k
2k
2k
2k
3k
4k
返回前端 - Javascript栏目
作者:
贺及楼
成为作者
更新日期:2025-02-21 17:21:45
在 JavaScript 的世界里,原型链是一个非常重要的概念,它为对象之间的继承提供了强大的支持。让我们一起来揭开原型链的神秘面纱。
在 JavaScript 中,每个对象都有一个隐藏的属性 [[Prototype]]
,这个属性指向该对象的原型对象。当我们访问一个对象的属性或方法时,JavaScript 首先会在该对象本身查找,如果找不到,就会顺着 [[Prototype]]
指向的原型对象继续查找,以此类推,直到找到该属性或方法,或者到达原型链的末尾(Object.prototype
,它的 [[Prototype]]
为 null
)。
下面通过一个简单的例子来理解:
// 创建一个原型对象
const animalPrototype = {
eat: function() {
console.log("I'm eating!");
}
};
// 创建一个对象并将其原型设置为 animalPrototype
const cat = Object.create(animalPrototype);
// 调用 eat 方法
cat.eat(); // 输出: I'm eating!
在这个例子中,cat
对象本身并没有 eat
方法,但由于它的原型是 animalPrototype
,JavaScript 会在 animalPrototype
中找到 eat
方法并执行。
当一个对象的原型又是另一个对象时,就形成了原型链。下面是一个更复杂的例子:
// 最顶层的原型对象
const livingThing = {
exist: function() {
console.log("I exist!");
}
};
// 中间层的原型对象,其原型为 livingThing
const animal = Object.create(livingThing);
animal.move = function() {
console.log("I'm moving!");
};
// 底层的对象,其原型为 animal
const dog = Object.create(animal);
dog.exist(); // 输出: I exist!
dog.move(); // 输出: I'm moving!
在这个例子中,dog
对象的原型是 animal
,animal
对象的原型是 livingThing
,形成了一条原型链:dog -> animal -> livingThing -> Object.prototype -> null
。当我们调用 dog.exist()
时,JavaScript 会沿着原型链依次查找 exist
方法,最终在 livingThing
中找到并执行。
步骤 | 操作 | 解释 |
---|---|---|
1 | 访问对象属性或方法 | 当我们访问一个对象的属性或方法时,JavaScript 开始查找过程。 |
2 | 在对象本身查找 | 首先在对象本身查找该属性或方法,如果找到则返回。 |
3 | 查找原型对象 | 如果对象本身没有该属性或方法,JavaScript 会查找对象的 [[Prototype]] 指向的原型对象。 |
4 | 沿着原型链继续查找 | 如果原型对象也没有该属性或方法,JavaScript 会继续沿着原型链向上查找,直到找到该属性或方法,或者到达原型链的末尾(Object.prototype 的 [[Prototype]] 为 null )。 |
5 | 未找到属性或方法 | 如果到达原型链的末尾仍然没有找到该属性或方法,返回 undefined 。 |
原型链是 JavaScript 实现继承的一种重要方式,它允许对象继承其他对象的属性和方法。通过理解原型链的概念和原理,我们可以更好地利用 JavaScript 的面向对象特性,编写出更加灵活和可复用的代码。在实际开发中,原型链的应用无处不在,它为我们构建复杂的应用程序提供了强大的支持。
希望通过本文的介绍,你对 JavaScript 中的原型链有了更深入的理解。让我们在 JavaScript 的世界里,充分利用原型链的魅力,创造出更多精彩的应用!
前端 - Javascript
整章节共299节
快分享给你的小伙伴吧 ~