理解原型和原型链

当你理解JavaScript中的原型和原型链,你就能理解为什么JavaScript中一切皆对象,以及为什么函数也是对象。让我帮你梳理一下。

原型 (Prototype)

在JavaScript中,每个对象都有一个原型对象(prototype)。当你创建一个对象时,JavaScript会自动为这个对象分配一个原型,并且你可以通过 proto 属性来访问这个原型对象。

javascript 复制代码
let obj = {}; // 创建一个空对象
console.log(obj.__proto__); // 输出:Object.prototype

原型链 (Prototype Chain)

原型链是由对象的原型对象组成的链条。当你试图访问一个对象的属性时,JavaScript引擎会首先在这个对象本身中查找,如果找不到,它会继续在原型链上查找,直到找到属性或者到达原型链的末端(即原型链为 null)。

javascript 复制代码
let obj = {};
obj.toString(); // 查找toString方法,如果obj对象本身没有,则会在它的原型链上查找

构造函数 (Constructor)

构造函数是用来创建对象的函数。在JavaScript中,构造函数也是函数,因此它们也有原型,并且可以创建其他对象的实例。

javascript 复制代码
function Foo() {} // 定义一个构造函数
let fooInstance = new Foo(); // 创建Foo的一个实例
console.log(fooInstance instanceof Foo); // 输出:true

原型和构造函数的关系

每个函数都有一个 prototype 属性,该属性指向一个对象,这个对象包含了由该构造函数创建的所有实例对象共享的属性和方法。当你创建一个新的实例时,该实例的 proto 属性会指向构造函数的 prototype 属性所指向的对象。

javascript 复制代码
function Foo() {}
let fooInstance = new Foo();
console.log(fooInstance.__proto__ === Foo.prototype); // 输出:true

对象与函数的关系

在JavaScript中,函数也是对象,因此函数也有原型,并且可以作为构造函数使用。函数对象的原型链上有 Function.prototype,而 Function.prototype 的原型链上有 Object.prototype,最终指向 null。

javascript 复制代码
function myFunction() {}
console.log(myFunction instanceof Function); // 输出:true
console.log(myFunction.__proto__ === Function.prototype); // 输出:true
console.log(Function.prototype.__proto__ === Object.prototype); // 输出:true
console.log(Object.prototype.__proto__); // 输出:null

总结

JavaScript中的原型和原型链是理解其面向对象特性的关键。通过原型,对象可以继承属性和方法;通过原型链,可以实现对象间的属性和方法的共享和继承;通过构造函数和函数的原型,可以方便地创建对象和实现对象间的复用。

相关推荐
ZC跨境爬虫12 分钟前
跟着 MDN 学 HTML day_38:(DocumentFragment 文档片段接口详解)
前端·javascript·ui·html·音视频
@大迁世界1 小时前
41.ShadCN 是什么?它如何和 Tailwind CSS 集成,从而更容易构建可访问且可自定义的 React 组件?
前端·javascript·css·react.js·前端框架
xiangxiongfly9153 小时前
Vue3 根据角色权限动态加载路由
前端·javascript·vue.js·动态加载路由
费曼学习法4 小时前
React 18 并发模式(Concurrent Mode):Fiber 架构的终极进化
javascript·react.js
_风满楼4 小时前
TDD 进阶:换个角度看会议室预约
前端·javascript·github
子兮曰4 小时前
SuperSplat 深度解析:7.6K Stars 的浏览器端 3D 高斯泼溅编辑器 — 在 Web 上编辑现实
前端·javascript·webgl
xiangxiongfly9155 小时前
Vue3 动态加载静态资源
前端·javascript·vue.js
克里斯蒂亚诺更新5 小时前
ruoyi切换新版本初始化需要修改的地方
前端·javascript·vue.js
zithern_juejin5 小时前
JS的防抖与节流
javascript
是梦终空6 小时前
计算机源码273—基于SpringBoot+Vue3停车场管理系统带支沙箱支付(源代码+数据库)
数据库·spring boot·vue·mybatis·停车场管理系统·沙箱支付·毕设设计