JavaScript中new关键字做了什么?

1,259 阅读1分钟

在实例化一个构造函数的时候,我们通常会用 new 关键字,这个 new 关键字是如何做到让实例可以调用到构造函数上的方法和属性的呢? new关键字主要做了:

1.先创建一个空的对象{}

2.将{}.__proto__指向构造函数.prototype

3.将构造函数中的this指向这个创建的对象
4.如果构造函数没有返回值或返回值是基本数据类型,则将这个新创建的对象返回;如果构造函数的返回值是引用数据类型,则直接返回这个结果。

function Person(name, age){
  this.name = name;
  this.age = age;
}
//另外定义一个createNew()用来模拟new关键字的执行过程
function createNew(fn, ...args) {
  let obj = {}; // 1. 创建一个空对象
  obj.__proto__ = fn.prototype; // 2. 将obj的__proto__属性指向构造函数的prototype
  let result = fn.apply(obj, args); // 3.将fn的执行上下文创建的this绑定到obj上,并执行
    //fn.apply()的返回值就是fn的返回值,由于例子中Person()没有返回值,所以此处返回值是undefined
    //console.log(result) //undefined
  return result instanceof Object ? result : obj; //4. 如果构造函数返回的是引用数据类型,则直接返回这个结果。否则,返回新创建的对象
}
//执行createNew()看一下它的返回结果
let createNew1 = createNew(Person,'yy',18)
console.log(createNew1 )//Person {name: "yy", age: 18}
//使用new直接操作Person()看一下它的结果
let person = new Person('yy',18)
console.log(person )//Person {name: "yy", age: 18}

//可以看到createNew()的结果与使用new得到的结果一致,说明createNew()代表的就是new内部的原理。