JavaScript原型链

最新推荐文章于 2025-08-09 20:51:19 发布

原创最新推荐文章于 2025-08-09 20:51:19 发布 · 687 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #原型链与作用域链 #原型链

JavaScript 专栏收录该内容

2 篇文章

订阅专栏

本文详细解释了JavaScript中的原型链概念，包括其构成、工作原理及与作用域链的区别，并通过实例说明了prototype与__proto__的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

面试中老是会问这个问题，自己也看了很多资料，对此概念有些一知半解，这里简单梳理下;

JavaScript原型链

在JavaScript中，每一个对象都有一个指向原型对象的内部链接。而这个原型对象又有自己的原型，直到某个对象的原型为null止，组成了这个链的最后一环。这种一级一级的结构称为原型链。
–继承与原型链 MDN

这里给出的概念觉得是最好理解的，但是需要注意以下几点：

原型链的形成真正是靠__proto__ 而非prototype,当JS引擎执行对象的方法时，先查找对象本身是否存在该方法，如果不存在，会在原型链上查找，但不会查找自身的prototype。
一个对象的__proto__记录着自己的原型链，决定了自身的数据类型，改变__proto__就等于改变对象的数据类型。
函数的prototype不属于自身的原型链，它是子类创建的核心，决定了子类的数据类型，是连接子类原型链的桥梁。
在原型对象上定义方法和属性的目的是为了被子类继承和使用。

有了以上部分的总结，原型链差不多能理解了。

function f(){}
f.prototype.foo = "abc";
console.log(f.foo); //undefined
var obj = new f();
console.log(obj.foo);  //"adc"
function  B(){}; 
B.prototype=f; 
B.__proto__===f.prototype;//false
B.__proto__===f.__proto__;//true
B.__proto__===Function.__proto__;//true
//B->Function->Object->null
    var b=new B();
    console.log(b.foo);//undefined
function C(){};
C.prototype=new f();//对C本身的__proto__无影响
C.__proto__===f.__proto__;//true
C.__proto__===Function.__proto__;//false
//C->Function->Object->null
    var c=new C();
    console.log(c.foo);//"abc"