JavaScript 中 new 操作符执行时走了哪些步骤

一、场景
我们在使用JavaScript是,会经常碰上new这个操作符来进行实例化,我们来看一下new 这个操作符执行时走了哪些步骤

二、实例


function A(name){
    this.name = name ;
};
var zhangsan = new Person('张三');
var zhangsans = new Person('张三');
console.log(zhangsan);//{name:张三};
console.log(zhangsan);//{name:张三};
console.log(zhangsan == zhangsans);//false;
console.log(zhangsan.__proto__ == zhangsans.__proto__);//true;

经过实例可以发现一个问题,zhangsan和zhangsans在方法与传参上都是一样的,最后比较方法是为false ,比较方法的原型时却是相等的,这就说明通过new实例化出来的方法是不相同的,原型比较为true,证明参数源是一样的

接下来看一下new的过程,一两个方法来展示


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

function NewFun(fun,...param){
    //1.首先创建一个空对象
    var obj = {};
    //2.设置原型链
    obj.__proto__=fun.prototype;
    //2.将空对象作为 this,调用构造函数并传入参数
    var result=fun.call(obj,...param);
    //4.如果构造函数返回值为对象或者函数,则返回该对象或者函数,否则返回创建的新对象obj
    return  typeOf result === "object" || typeOf result === "function"?result:obj
}

    NewFun(A,'张三')

默认情况下函数返回值为undefined,即没有显示定义返回值的话,但构造函数例外,new构造函数在没有return的情况下默认返回新创建的对象。

但是,在有显示返回值的情况下,如果返回值为基本数据类型{string,number,null,undefined,Boolean},返回值仍然是新创建的对象。

只有在显示返回一个非基本数据类型时,函数的返回值才为指定对象。在这种情况下,this所引用的值就会被丢弃了

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章