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

绝地灬酷狼 2022-11-06 06:58 171阅读 0赞

# 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`关键字创建一个实例

得到的结果是：  
![在这里插入图片描述][20210308164227913.png]  
再使用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();

结果如下：  
![在这里插入图片描述][20210308164522402.png]

[20210308164227913.png]: /images/20221023/7ae46fe8928d479ca9ab3a51e60d321e.png
[20210308164522402.png]: /images/20221023/6001f9c3816e4fd89dd89425dbb86b69.png