一文掌握原型和原型链的理解

前言

在前端这个岗位已经工作了快两年了,现如今居然还对原型和原型链处于半知半解的状态,正好最近也在准备面试题,现对原型和原型链再次做一次补充,写这篇文章的初衷在于自身对原型和原型链的彻底深挖,二来呢希望也能帮助同我一样的前端朋友! 话不多说 正文开始(此文也借鉴了其他博主的文章)

原型和原型链相关理解

首先读此篇文章之前我们也需要理解一个概念

JavaScript 中的对象分为函数对象普通对象 。每个对象(无论是函数对象还是普通对象)都有 __proto__ 属性,但只有函数对象才有 prototype 属性

原型

首先我们来说一下在JavaScript这门语言中是使用构造函数来新建一个对象的,每一个函数的内部都有一个 prototype 属性,这个属性是一个对象,所有通过该构造函数创建出来的实例都共享这个原型对象所有的属性和方法。当使用构造函数新建一个对象后,在这个对象的内部将包含一个指针,这个指针指向构造函数的 prototype 属性,这个指针被称为对象的原型(目前已被弃用)MDN,推荐使用Object.getPrototypeOf()/Reflect.getPrototypeOf()Object.setPrototypeOf()/ Reflect.setPrototypeOf()

原型链

当访问一个对象的属性时,如果这个对象内部不存在这个属性,那么它就会去它的原型对象里找这个属性,这个原型对象又会有自己的原型,于是就这样一直找下去,就形成了原型链。原型链的尽头一般来说都是Object.prototype 所以这就是新建的对象为什么能够使用 toString() 等方法的原因。

特点: JavaScript 对象是通过引用来传递的,创建的每个新对象实体中并没有一份属于自己的原型副本。当修改原型时,与之相关的对象也会继承这一改变。

用通俗易懂的话来讲:对象是通过引用传递的,而不是通过复制,当创建一个新的对象时,JavaScript 并没有为这个对象复制一份原型对象,而是通过引用指向了原型对象。所以,当修改原型对象时,所有通过该原型对象创建的对象都会继承这一改变。这是因为这些对象共享同一个原型对象,它们都指向相同的内存地址。

来看下图再次理解原型链:

js之父在设计js原型、原型链的时候遵从以下两个准则

js 复制代码
1. Person.prototype.constructor == Person // **准则1:原型对象(即Person.prototype)的constructor指向构造函数本身**
2. person01.__proto__ == Person.prototype // **准则2:实例(即person01)的__proto__和原型对象指向同一个地方**

一般来说:

  • 当你使用 new 关键字创建对象时,JavaScript 会自动设置对象的 constructor 属性为创建该对象的构造函数。
  • 对于自定义的构造函数,它们的 prototype 对象上也有一个 constructor 属性,指向自身。

因此,constructor 本质上是构造函数的一个属性,实际上用于标识对象是由哪个构造函数创建的。

结语: 原型是JS这门语言非常重要的一点,有错误或者其它看法欢迎指出!

相关推荐
安晴晚风1 小时前
从0开始在linux服务器上部署SpringBoot和Vue
linux·运维·前端·数据库·后端·运维开发
前端小小王2 小时前
pnpm、Yarn 和 npm 的区别?
前端·npm·node.js
supermapsupport2 小时前
使用npm包的工程如何引入mapboxgl-enhance/maplibre-gl-enhance扩展包
前端·webpack·npm·supermap·mapboxgl
牛奔2 小时前
windows nvm 切换node版本后,npm找不到
前端·windows·npm·node.js
鱼大大博客2 小时前
Edge SCDN酷盾安全重塑高效安全内容分发新生态
前端·安全·edge
鸭梨山大。2 小时前
NPM组件包 vant部分版本内嵌挖矿代码
前端·安全·npm·node.js·vue
蟾宫曲7 小时前
在 Vue3 项目中实现计时器组件的使用(Vite+Vue3+Node+npm+Element-plus,附测试代码)
前端·npm·vue3·vite·element-plus·计时器
秋雨凉人心7 小时前
简单发布一个npm包
前端·javascript·webpack·npm·node.js
liuxin334455667 小时前
学籍管理系统:实现教育管理现代化
java·开发语言·前端·数据库·安全
qq13267029407 小时前
运行Zr.Admin项目(前端)
前端·vue2·zradmin前端·zradmin vue·运行zradmin·vue2版本zradmin