JS 手写 new 函数

工作中我们经常会用到 new 关键字,new 一个构造函数生成一个实例对象,那么new的过程中发生了什么呢,我们今天梳理下

  1. 创建一个对象
  2. 对象原型继承
  3. 绑定函数this
  4. 返回对象

先创建一个构造函数,原型上添加一个方法

javascript 复制代码
let Foo = function (name) {
  this.name = name
}

Foo.prototype.getName = function () {
  return this.name
}

然后,我们实现一个自定义new函数:

javascript 复制代码
function new_(fn, ...args) {
  let obj = {} // 创建一个对象
  obj.__proto__ = fn.prototype // 继承函数的原型
  fn.apply(obj, args) // 绑定this
  return Object.prototype.toString.call(obj) === '[object Object]' ? obj : {} // 返回对象,判断其有效性
}

使用,看下效果

javascript 复制代码
let foo = new_(foo, '张三')

console.log(foo)
console.log(foo.getName())

打印看下,看到完美输出

相关推荐
不会敲代码13 小时前
手写 Mini React:从 JSX 到虚拟 DOM 再到 render,搞懂 React 底层原理
前端·javascript·react.js
你不是我我4 小时前
【Java 开发日记】HTTP3 性能更好,为什么内网微服务依然多用 HTTP2?HTTP2 内网优势是什么?
java·开发语言·微服务
kyriewen4 小时前
你的代码仓库变成“毛线团”了?Monorepo 用 Turborepo 拆成“乐高积木”
前端·javascript·面试
tjl521314_214 小时前
04C++ 名称空间(Namespace)
开发语言·c++
赏金术士5 小时前
Kotlin 数据流与单双向绑定
android·开发语言·kotlin
逻辑驱动的ken5 小时前
Java高频面试场景题25
java·开发语言·深度学习·面试·职场和发展
openKaka_6 小时前
createRoot 到底创建了什么:FiberRootNode 和 HostRootFiber 的初始化过程
前端·javascript·react.js
AI人工智能+电脑小能手6 小时前
【大白话说Java面试题】【Java基础篇】第32题:Java的异常处理机制是什么
java·开发语言·后端·面试
阿豪只会阿巴7 小时前
【没事学点啥】TurboBlog轻量级个人博客项目——项目介绍
javascript·python·django·html
刀法如飞8 小时前
TypeScript 数组去重的 20 种实现方式,哪一种你还不知道?
前端·javascript·算法