JS中new做了什么？手写一个new

前言

new关键字在工作中确实用的不多（大佬除外），这也导致了咱们对new这个关键字理解的不深刻。

本文记录一下自己重新学习

new关键字到底做了什么

手写一个new

参考文章：

一起搞清楚JS中的new到底做了什么，并模拟实现一个new

手写new关键字

JS中new做了什么？

先来看js红宝书（js高级程序设计第三版）给出的答案：

1.创建一个空对象。
2.空对象继承构造函数的prototype属性，构造函数中的this指向这个空对象。
3.开始执行内部的代码。
4.如果该函数没有返回对象，则返回this。

说的云里雾里的，还是举几个代码例子，方便理解吧。

//没有new 没有return
function Obj1(name) {
  this.name = name;
}
var a = Obj1("name1");
console.log(a); // undefined "没有new 没有return"

//没有new 有return基本数据类型
function Obj2(name) {
  this.name = name;
  return "name";
}
var b = Obj2("name2");
console.log(b); // name

//没有new 有return复杂数据类型
function Obj3(name) {
  this.name = name;
  return { a: 1 };
}
var c = Obj3("name3");
console.log(c); //{a: 1}

//有new 没有return
function Obj4(name) {
  this.name = name;
}
var d = new Obj4("name3");
console.log(d); //Obj4 {name: "name4"}

//有new   有return基本数据类型
function Obj5(name) {
  this.name = name;
  return "123";
}
var e = new Obj5("name5");
console.log(e); //Obj5 {name: "name5"}

//有new   有return复杂数据类型
function Obj6(name) {
  this.name = name;
  return { a: 1 };
}
var f = new Obj6("name6");
console.log(f); //{a: 1}

为了巩固大家的理解 F12 在控制台复制以下代码看看打印的是什么

function obj(name) {
  if (this == window) {
    return { name: name };
  }
}

obj.prototype.name = "name2";
var a = new obj("name1");

console.log(a.name);

如果无法理解，可以重新去读最开始红宝书给出的答案。

手写一个new

理解了new做了什么，我们可以尝试做自己手写一个myNew函数来加深自己的理解，达成一样的效果即可。

创建一个空对象

function myNew(Constructor) {
  let obj = {};
}

空对象继承构造函数的prototype

obj = Object.create(Constructor.prototype)

改变this的指向

[].shift.call(arguments)
let result = Constructor.apply(obj,arguments)

返回值

return typeof result === 'object' || result instanceof Function ? result : obj;

完整代码

function myNew(Constructor) {
  let obj = Object.create(Constructor.prototype);
  Array.prototype.shift.call(arguments);
  let result = Constructor.apply(obj, arguments);
  return typeof result === "object" || result instanceof Function
    ? result
    : obj;
}