JavaScript里的原型链,也曾是一座大山

本文详细介绍了JavaScript中的原型、原型链概念,包括如何访问和设置原型对象,区分属性来源,以及对象、原型、构造函数之间的关系。通过实例和方法总结,帮助前端小白建立清晰的理解。
摘要由CSDN通过智能技术生成

学过前端的小伙伴肯定都知道“原型”、“原型链”这些概念,也正如标题所言,它曾经是每个初学者的大山,特点如下:

  • 网上的解释太多且各不一样,导致概念难懂。
  • MDN里的官方解释,自己又看不下去,大部分一扫而过,导致看与不看,效果一样。
  • 牵扯的知识点琐碎且精细,加上工作中又不常用(甚至不用),导致对这个知识点总是模模糊糊。

作为曾经被迫害的一份子,我觉得有必要将这个知识点记录下来,给想要入门的前端小白,搭建一个比较清晰的思路,我们直接进入正题吧。

在此之前,我们今天讨论的内容,只针对引用数据类型。

你将收获

  • 理解什么是原型?
  • 理解什么是原型链?
  • 如何设置原型?
  • 如何区分属性是对象自有的,还是原型链上的?
  • 对象、原型、构造函数、constructor之间的关系?

什么是原型?

JavaScript中所有的对象都有一个内置的对象,这个内置的对象就叫做“原型”。特别注意,在JavaScript中,只有 null、undefined 没有原型对象

如何访问原型对象呢?这个是要做出区分的,具体如下:

在这里插入图片描述

动手实践一下:

function Person(name){
    this.name = name;
}

let p1 = {};
console.log('p1对象的原型对象:', p1.__proto__);

let p2 = new Person();
console.log('p2对象的原型对象:', p2.__proto__);

console.log('名字为Person的构造函数对应的原型对象:', Person.prototype);

原型链的定义

原型对象里也有原型,一直向上查找,直到为null。这一整条链路就叫做“原型链”。

如何遍历对象上的所有原型对象?我们以Date为例:

let date = new Date(); 

do {
    date = Object.getPrototypeOf(date);
    console.log('date:', date);
}while(date);

如何设置原型对象?

这个方式就有很多,如下:

  • 如果你想给函数设置原型,那么你可以选择直接操纵 prototype属性。
  • 如果你想给字面量对象设置原型,那么你可以选择直接操纵 ._proto_ 属性。
  • 你也可以选择通过 Object.create(a) 方法来创建一个新对象b,这样b的原型对象就是a。
  • 你也可以选择new一个对象,那么这个 实例对象的原型 就是 构造函数的原型对象

如何区分属性是原型链上的还是自有的?

针对 对象属性来说,它的属性类型(string类型、还是symbol类型)、以及是否可被遍历 对于我们来说是很重要的。

获取对象属性的方式有很多,整理如下:

方法说明
Object.keys返回自身可遍历的字符串属性。
Object.getOwnPropertyNames返回自身的字符串属性(无论是否可被遍历)。
Object.getOwnPropertySymbols返回自身的symbol属性(无论是否可被遍历)。
Object.hasOwnProperty此方法用于判断属性是否是对象自有的。
Reflect.ownKeys这个API是最强大的,它可以返回对象自身的所有属性(无论是什么类型,无论是否可遍历)
for … in …遍历 自身以及原型链上 可被遍历的字符串属性

相信有了上面的这张表,如何判断一个属性是否在原型链上,对你而言已不在话下。

对象、原型、构造函数、constructor之间的关系?

来用一张图收尾:

在这里插入图片描述

最后

好啦,本期的内容就分享到这里,如果上述过程中,有内容错误,请在评论区里指正,如果我的内容对您有帮助,还请给个5星好评,我们下期再见啦~~

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值