js中关键字new的原理（含实现代码）

new的原理

在调用new的过程中都干了什么？

• 在内存中创建一个新对象
• 新对象内部的prototype特性被赋值为构造函数的prototype属性
• 构造函数内部的this被赋值为这个新对象（即this指向新对象）
• 执行构造函数内部的代码（即给新对象添加属性）
• 如果构造函数返回非空对象，则返回该对象；否则，返回刚创建的新对象

使用js原生代码实现new

function myNew () {
	//创建一个新对象
	var obj = new Object ();
	//取出参数中的第一个参数，获得构造函数
	var constructor = Array.prototype.shift.call(arguments);
	//连接原型，新对象可以访问原型中的属性
	obj._proto_ = constructor.prototype;
	// 执行构造函数，即绑定 this，并且为这个新对象添加属性
	var result = constructor.apply(obj,arguments);
	return typeof result === "object" ? result :obj ;
}

更简单的写法

function myNew(fn) {
	const obj = Object.create(fn.prototype);
	result = fn.apply(obj, [...arguments].slice(1));
	return typeof result === "object" ? result : obj;
}

var obj = Object.create(fn.prototype) 等价于：

 var obj = new Object ();

 obj._proto_ = constructor.prototype;

测试实例

先定义一个构造函数，再使用new关键字创建一个实例

function Person (name,age){
  this.name = name;
  this.age = age;
  this.say = function () {
      console.log("I am " + this.name)
  }
}

let person1 = new Person("Star",20);
console.log(person1.name);      
console.log(person1.age);       
person1.say();  

得到的结果是：

再使用js原生代码写的myNew函数创建实例。（需要把构造函数当做参数传递进去）

function Person (name,age){
  this.name = name;
  this.age = age;
  this.say = function () {
      console.log("I am " + this.name)
  }
}

let person1 = new Person("Star",20);
console.log(person1.name);      
console.log(person1.age);       
person1.say();  

let person2 = myNew (Person,"Star",20);
console.log(person2.name);      
console.log(person2.age);       
person2.say(); 

结果如下：