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中new的原理

面向对象

new的原理

最新文章

热门文章