JS中new的原理

面向对象

在了解new的原理之前，先简单地了解一下构造函数和对象。

js可以通过构造函数创建对象：

function Test() {

}

var t = new Test();

构造函数的首字母大写，以和普通函数区分开。

上述代码中，Test被称为“构造函数” 或者 “类”，Test是t的构造函数，t是Test的实例对象。

const a = {};

// 等价于
const a = new Object();

a的构造函数是Object()，这是js内置函数。

因此可以看出，所有的对象都是Object构造函数的实例。

那么，在使用new关键字创建出一个实例对象的过程中，发生了什么？

new的原理

在使用new关键字调用构造函数的时候，做了以下工作：

• 1、创建了一个空的js对象
• 2、将空对象的__proto__指向构造函数的prototype
• 3、将this指向这个空的对象
• 4、执行构造函数中的代码，为空对象添加属性和方法
• 5、返回新的对象

function myNew(Class, ...args) {
    // 1.创建一个空对象
    let obj = {};

    // 2.将空对象的__proto__指向构造函数的prototype
    obj.__proto__ = Class.prototype;

    // 3.将this指向空对象
    // 4.执行构造函数中的代码，为空对象添加属性和方法（call方法会改变this的指向，并且自动执行）
    Class.call(obj, ...args);

    // 5.返回新的对象
    return obj;
}

function Test(name, age) {
    this.name = name;
    this.age = age;
}

var t = new Test('cxk', 22);
var tt = myNew(Test, 'cxk', 22);

console.log(t); // Test {name: 'cxk', age: 22}
console.log(tt); // Test {name: 'cxk', age: 22}

// 所有的对象都是Object构造函数的实例
console.log(t instanceof Object); // true
console.log(tt instanceof Object); // true

JS