JS手搓代码----(new)

引言,书接上回我们已经了解过了call.apply在函数调用当中的指向,但我们今天要使用这两个关键字来实现手搓JS代码中的关键字---new。

一、New的用法与功能

在我们手搓操作符具体实现之前,需要回顾一下new操作符的具体做法:

new 操作符执行时,实际上完成了以下几个核心步骤:

  1. 创建一个全新的空对象
  2. 将这个新对象的原型 (__proto__) 指向构造函数的 prototype 属性
  3. 执行构造函数,并将 this 绑定到新创建的对象上
  4. 根据构造函数的返回值类型,决定最终返回的对象

二、手写实现New的方式

2.1构造手写new的函数

现在需要一步步手动手写实现New的方法,我们定义函数objectFactory来替代传统的new,实现手写new。这时候我们就要思考该函数的参数该如何定义了?

传统的参数往往是不确定的,我们在objectFactory中对参数的处理采用argments:

定义objectFactory时不需要指定参数,在内部用argments来处理,这样子无论有多少个参数都能处理了

2.2创建一个新对象

这行代码创建了一个全新的空对象 obj,它将成为最终的实例对象。

js 复制代码
function objectFactory(){
  var obj = {};
}

2.3构造函数

这一步我们需要把参数中的第一项:构造函数给拿出来,因为等下我们针对构造函数可能要做一些操作,比如指定原型链。需要使用下列代码:

js 复制代码
  var Constructor = [].shift.call(arguments);

由于aruguments不支持直接使用shift方法,所以我们需要借助别的方式来让arguments来使用shift方法,该行代码通过数组shift方法从arguments中提取第一个参数作为构造函数,通常用于模拟new关键字创建实例。

所以此时就可以达到我们想要的效果:删除arguments中的第一项,并且将其返回,此时Constructor就是Person构造函数,而arguments现在只剩下除了Person以外的参数(比如'name'、'age')

2.4 原型链操作

接下来,我们来实现将obj的__proto__设置为构造函数的prototype。

2.5 更改this指向

让Constructor里的this指向变成我们的最终返回的对象obj。这里即可以使用call,也可以使用apply,在这里使用apply是因为arguments去除第一个元素剩下的都是其参数。

三、处理返回对象

判断构造函数返回值是否为对象,如果为对象就使用构造函数返回的值,否则使用 obj,这样就实现了忽略构造函数返回的原始值。

如果构造函数有返回值,返回值且是对象的时候,使用返回值。使用||的写法,当return null时,也能很好地处理了。

四、结语

本文手动实现了 new 操作符核心逻辑:通过创建空对象、挂载原型链、执行构造函数、处理返回值四步,完美模拟对象实例化过程。重点解析原型链指向、构造函数上下文绑定及显式返回对象的特殊处理,搭配 Person 类测试用例,直观展示 instanceof 验证结果,是理解 JS 面向对象底层机制的绝佳实践。

相关推荐
拖孩13 分钟前
AI 帮我写的小程序「厨菜记」上线满月了,挣了两百块!!!
前端·后端·微信小程序
用户3600555790013 分钟前
Kestrel_VLLM - 13 · 为什么排除 MoE FFN Tiling 与 Tensor Core
前端
Hilaku23 分钟前
AI 流式输出都用 SSE,什么时候必须换 WebSocket?
前端·javascript·程序员
奇牙coding31 分钟前
Codex CLI 升级后多文件编辑静默失效:config.yaml 枚举变更排查与修复指南
java·前端·javascript·ai
小羊没烦恼!38 分钟前
Ajax与JSON的一些总结
android·java·前端·数据库·mysql·算法·okhttp
程序员老赵40 分钟前
Docker 部署 Filestash:轻松搭建浏览器文件管理平台
前端·docker·开源
夏天要喝冰可乐42 分钟前
给 23 万字修仙小说造个阅读站:浏览器内打包 EPUB 分页阅读 + 三主题实战
前端·产品·全栈
茶底世界之下1 小时前
林间步道要不要加暗角?用 Awaking 把强度收在20%
前端·ios·图片资源
执子念的飞鱼1 小时前
纯前端预览 275 种文件格式是怎么做到的
前端·vue.js·react.js
行者全栈架构师1 小时前
【鸿蒙心迹】互动卡片全链路——把核心功能放到桌面(FormKit 实战)(HarmonyOS 7.x)
前端·算法·架构