断舍离,永远去做你余生最重要的那件事

首页前端开发正文

JavaScript里的new操作符内部实现原理是什么

朱绪2021-01-22873JavaScript

跟Java、C++、go等一些高级语言一样,JavaScript也是有new操作符的。

高级语言

new的作用就是创建一个对象(也叫做类的实例化),从而在内存中分配一个实例对象。

new关键词会进行如下操作:

1、创建一个空的JavaScript对象(也就是{}

2、将函数的prototype赋值给对象的__proto__属性;

3、调用函数,并将步骤1新创建的对象作为函数的this上下文;

4、如果该函数没有返回值或者返回值不是对象,则返回创建的对象,如果返回值是对象,则直接返回该对象。

上个例子:

function Person(hobby) {
    this.hobby = hobby;
}
function Person2(hobby) {
    this.hobby = hobby;
    return this.hobby;
}
function Person3(hobby) {
    this.hobby = hobby;
    return new Array();
}
function Person4(hobby) {
    this.hobby = hobby;
    return new String(hobby);
}
function Person5(hobby) {
    this.hobby = hobby;
    return function() {};
}


var person = new Person('reading');    //{hobby: 'reading'}
var person2 = new Person2('reading');  //{hobby: 'reading'}
var person3 = new Person3('reading');  //[]
var person4 = new Person4('reading');  //'reading'
var person5 = new Person5('reading');  //function() {}

Person它本身是一个普通函数,当通过new来创建对象时,Person就是个构造函数了。

JS引擎执行这句代码时,在内部做了很多工作,用伪代码模拟其工作流程就是:

new Person("reading") = {
    var obj = {};
    obj.__proto__ = Person.prototype; //此时便建立了obj对象的原型链:obj->Person.prototype->Object.prototype->null
    var result = Person.call(obj,"reading");  //相当于obj.Person("John")
    return typeof result === 'object' ? result : obj;  //如果没有返回值或者返回一个非对象值,则将obj返回作为新对象
}