JavaScript:new的实现原理

1,788 阅读1分钟

JavaScript:new的实现原理

new运算符会创建一个用户自定义对象类型的实例(例如自定义函数、构造函数)或具有构造函数内置对象(例如:String,Object等原生对象)的实例

先看一段new方法使用情景

function Person(name) {
  this.name = name;
}
Person.prototype.getName = function() {
  console.log(this.name)
}
let person = new Person('luck');
person.getName();//luck

那么new工作的原理是什么呢。

通过以上代码可以看到,当new一个函数的时候,会创建一个新的实例,然后将得到原函数的原型。

步骤:

1.创建一个空对象,{}

2.将执行函数的[[原型]]连接到这个对象上去

3.拿到执行构造函数

4.执行构造函数,并通过apply()方法将构造函数和参数传递过去

5.返回对象实例,如果构造函数有返回对象,则返回构造函数,否则返回this(即创建的新对象)

function new1() {
  	// 获取构造函数和传递的参数
    let [fn, ...args] = [...arguments];
    // 通过Object.create()方法创建一个构造函数实例原型引用的一个对象
    let target = Object.create(fn.prototype);
  	// 执行构造函数
    let result = fn.apply(target, args);
  	// 执行的构造函数若为对象或者函数则返回执行的构造函数,否则返回this(新创建的对象)
    return typeof result === 'object' || typeof result === 'function' ?
      result : target;
  }
  
  function Person(name) {
    this.name = name;
  }
  Person.prototype.getName = function() {
    console.log(this.name)
  }
  let person = new1(Person, 'nick')
  person.getName(); //nick