new一个函数发生了什么及手写实现

简介: new一个函数发生了什么及手写实现

new运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。


function Foo(name){
    this.name = name;
}
let foo = new Foo('小明');
复制代码


当代码执行new Foo时,会发生以下事情:


1. 一个继承自 Foo.prototype 的新对象被创建


2. 使用指定的参数调用构造函数 Foo,并将this绑定到新创建的对象


3. 由构造函数返回的对象就是new表达式的结果。如果构造函数没有显式返回一个对象,则使用步骤1创建的对象。(一般情况下,构造函数不返回值,但是用户可以选择主动返回对象,来覆盖正常的对象创建步骤)


了解了new的原理,我们来自己动手实现一个:


// 接收不定参,第一个参数是构造函数,后续参数被构造函数使用
function myNew(fn,...args){
  // 创建一个空对象
  const obj = {};
  // 将该对象的 __proto__ 属性链接到构造函数原型对象
  obj.__proto__ = fn.prototype;
  // 将该对象作为 this 上下文调用构造函数并接收返回值
  const res = fn.apply(obj,args);
  // 如果返回值存在并且是引用数据类型,返回构造函数返回值,否则返回创建的对象
  return typeof res === 'object'?res:obj
}
复制代码


如果有错误或者不严谨的地方,请给予指正,十分感谢!

相关文章
|
11月前
|
前端开发
手写基础 promise
手写基础 promise
60 0
|
12月前
|
前端开发
Promise的用法&原理&手写实现-2
Promise的用法&原理&手写实现-2
37 1
|
5月前
|
JavaScript 前端开发
不会还有人的批改网还是手写的把
不会还有人的批改网还是手写的把
|
12月前
01 # 手写 new 的原理
01 # 手写 new 的原理
40 0
|
5月前
|
索引
10 # 手写 every 方法
10 # 手写 every 方法
40 0
|
5月前
|
索引
09 # 手写 some 方法
09 # 手写 some 方法
38 0
|
12月前
|
前端开发 JavaScript API
Promise的用法&原理&手写实现-1
Promise的用法&原理&手写实现-1
45 0
手写函数柯里化原理
手写函数柯里化原理记录
55 1
|
缓存 前端开发 API
手写中实现并学习ahooks——useRequest
最近业务没有之前紧张了,也是消失了一段时间,也总结了一些之前业务上的问题。 和同事沟通也是发现普通的async + await + 封装api在复杂业务场景下针对于请求的业务逻辑比较多,也是推荐我去学习一波ahooks,由于问题起源于请求,因此作者也是直接从 useRequest 开始看起。
171 1
|
前端开发 vr&ar
自定义手写Promise
手写函数版和类版Promise
49 0