JS原型链详解

本文详细介绍了JavaScript的原型链概念,包括proto(隐式原型)和prototype(显式原型)的区别,以及它们如何构成原型链。重点讨论了函数、对象之间的关系,如所有函数都是Function的实例,而Function.prototype的proto指向Object.prototype。同时,阐述了原型链的工作原理,即当查找对象属性时,会沿着proto链向上搜索,直至Object.prototype。文中还提到了constructor属性以及相关的参考资料。

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

好久没写博客了,比较忙,最近的话同事正好在研究原型链,我也顺便自己复习了下,顺便总结归纳,尽可能的写的详尽一些。下面这幅图就是一个比较全面的原型链的图,在图中有两个比较容易搞混的单词,一个是 proto (隐式原型) 一个是prototype(显式原型),这两个名词形成了原型链的爱恨情仇。

下面我们看下这两个原型出自哪里,比较重要

这里写图片描述
这里写图片描述
这里写图片描述

下面的图片是从知乎上面弄下来的祖传老图,被我挖过来了

这里写图片描述
下面总(chao)结(xi)了几条原型的概念,然后就不难理解上面的这幅图了
1 . 任何对象都拥有 proto(隐式原型) 属性, 一般指向他们的构造函数的原型 (prototype) .

var a = new Array () 
// a 是一个数组对象 默认拥有__proto__ 属性 
console.log(a.__proto__ === Array.prototype);  // true

2 . 原型链的顶端是Object.prototype,其 proto为 null

console.log(Object.prototype.__proto__ === null); // true

3 . 所有函数都拥有prototype (显式原型)属性
同最上面的图,实例(对象/构造函数new 出来的东西)存在proto,函数/方法存在prototype(万物皆对象,也存在proto,指向下面的Function)

4 . 所有函数都是Function 的 实例

function fn () { 
}
// fn 是 Function 构造函数创建出来的 
console.log(fn.__proto__ === Function.prototype);  // true
console.log(obj.__proto__ === Object.prototype); // true
console.log(arr.__proto__ === Array.prototype);    // true 

5 . Object Function Array 本身也都是一个函数,由于是最常用的,所以JavaScript帮我们实现了

// 当我们通过构造函数的方式来创建一个对象 ,其本质也是new一个普通的函数
// 因此可以得出
console.log(Function.__proto__ === Function.prototype); // true
console.log(Object.__proto__ === Function.prototype );  // true
console.log(Array.__proto__ === Function.prototype);    // true

6 . 原型对象中又拥有constructor属性,该属性指向函数本身,这个好理解(constructor为构造器,不修改的情况下prototype.constructor等于自己)

console.log(Function.prototype.constructor === Function); // true
console.log(Object.prototype.constructor === Object);     // true
console.log(Array.prototype.constructor === Array);       // true

7 . 原型链 概念
如果想要找到一个对象的属性,首先会先在自身查找,如果没有,就会通过proto属性一层层的向上查找,直到原型链的顶端 Object.prototype(proto: null),这种通过某种纽带(proto)将对象之间形成一种继承关系 这种关系呈现出一种链条的形状 将这种链条称之为原型链

function foo(name) {
   this.name = name;
}
foo.prototype = {
    showName: function() {console.log(this.name)}
}

var zyc = new foo('zyc');
zyc.showName = function(){ console.log('superMan') };
zyc.showName();     // superMan

// 删除了本身属性,查构造函数的prototype,不行再去查Object和Function的prototype
delete zyc.showName; 
zyc.showName();    // zyc

8 . 根据第 6 条可以推论得:

console.log(fn.constructor===Function); // true 
// fn自身并没有constructor属性,所以他会顺着原型链向上找
// fn.__proto__ 指向的是 Function.prototype 见第4
// Function.prototype.constructor  === Function
console.log(Function.constructor === Function); // true
console.log(Object.constructor === Function);   //true

9 . Function.prototype.proto === Object.prototype
Function是一个特殊的例子 他创造了所有的函数,但他自身就是也是一个函数 总不能自己创造自己吧 所以他的上级是 Object.prototype

参考资料:
继承与原型链
JS原型链图解教程
图文并茂深入浅出完全理解JavaScript原型

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值