深入理解JavaScript中new操作符的原理与手动实现

构造函数

在深入探讨new操作符之前，首先需要明确构造函数的概念。

从语法层面看，构造函数与普通函数并无二致。区别在于调用方式：当函数通过new关键字后跟函数名及参数进行调用时（如new Fun()），该函数即被视为构造函数。按照惯例，构造函数名称的首字母通常大写。

function User(name) {
    this.name = name;
}

let u = new User('leo');

例如，上述代码中的User即为构造函数。若直接调用User()而非使用new，则无法创建实例对象。在非严格模式下，此时函数内部对this的赋值操作会将属性挂载到全局window对象上。

new 操作符

接下来探讨new操作符的具体行为，它是如何生成实例对象的？

new运算符用于创建用户自定义对象类型的实例，或具有内置构造函数的对象的实例。执行new关键字时，主要执行以下四个步骤：

1. 创建一个空的简单JavaScript对象（即{}）；

2. 将该对象链接到另一个对象（即设置该对象的构造函数指向）；

3. 将步骤1中创建的新对象作为this的上下文环境；

4. 如果该函数没有显式返回对象，则默认返回this。

以上步骤引用自MDN文档中关于new操作符的描述。

对于第2步和第4步，部分读者可能理解不够直观，这里重新梳理这4个步骤的具体执行逻辑：

1. 创建一个空对象u = {}；

2. 绑定原型链，使u.__proto__指向User.prototype；

3. 调用User()函数，并将空对象u作为this参数传入，等效于User.call(u)；

4. 若User()函数执行完毕后return了一个object类型的值，则返回该返回值；否则返回this。需注意：若构造函数返回的是基本类型值，则忽略返回值，仍返回this。

自己实现一个 new

理解了new操作符的底层原理后，我们可以尝试手动实现一个名为FakeNew的函数。

function FakeNew() {
    let obj = {};
  
    // 将类数组 arguments 转为数组，同时将第一个参数也就是构造函数 shift 出来
    let constructor = [].shift.apply(arguments);  

    // 绑定原型
    obj.__proto__ = constructor.prototype;    
  
    // 调用构造函数，将 obj 当做 this 传入
    let res = Constructor.apply(obj, arguments);    

    // 返回
    return typeof res === 'object' ? res : obj;   
}

function User(name) {
    this.name = name;
}

User.prototype.getName = function() {
    return this.name;
}

let u = FakeNew(User, 'leo');
console.log(u);
console.log(u.getName());

代码中已包含关键步骤的详细注释，通过此实现，我们对new操作的理解将更加透彻。

以上就是如何自己实现JavaScript的new操作符的详细内容，更多关于JavaScript的new操作符的资料请关注本站其它相关文章！