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())

打印看下,看到完美输出

相关推荐
小马哥编程9 分钟前
Function.prototype和Object.prototype 的区别
javascript
java1234_小锋18 分钟前
MyBatis如何处理延迟加载?
java·开发语言
王小王和他的小伙伴33 分钟前
解决 vue3 中 echarts图表在el-dialog中显示问题
javascript·vue.js·echarts
FeboReigns36 分钟前
C++简明教程(10)(初识类)
c语言·开发语言·c++
学前端的小朱37 分钟前
处理字体图标、js、html及其他资源
开发语言·javascript·webpack·html·打包工具
outstanding木槿42 分钟前
react+antd的Table组件编辑单元格
前端·javascript·react.js·前端框架
好名字08211 小时前
前端取Content-Disposition中的filename字段与解码(vue)
前端·javascript·vue.js·前端框架
摇光931 小时前
js高阶-async与事件循环
开发语言·javascript·事件循环·宏任务·微任务
沐泽Mu1 小时前
嵌入式学习-QT-Day09
开发语言·qt·学习
小猿_002 小时前
C语言实现顺序表详解
c语言·开发语言