js 关于new操作符具体的作用

new操作符主要的4个作用

1.创建一个空对象

// 当我们使用new操作符去new一个函数的时候，控制台会打印出一个空的对象
function Fun() {}
console.log(new Fun());   //Fun {}

2.将空对象的原型，指向于构造函数的原型

// 我们使用new出来的对象的原型跟我们构造函数的原型是相同的
function Fun() {}
console.log(new Fun().__proto__ === Fun.prototype);    //true

3.将空对象作为构造函数的上下文(改变this指向)

// 我们在全局作用域下定义一个普通的函数，这个this的指向是指向是window对象
function Fun() {
    console(this);         //window对象
    this.name = "张三";    //window没有定义name属性即为undefined
}
console.log(Fun());

//当我们使用new操作符去new这个函数的时候，此时this的指向就会指向这个对象
function Fun() {
    console(this);         //Fun{}
    this.name = "张三";    //Fun对象中是有name属性,此时控制台就会打印出Fun{name:'张三'}
}
console.log(new Fun());

4.对构造函数有返回值的判断处理

//当返回值为基础数据类型时，则忽略返回值
function Fun() {
    this.name = "张三";
    return 1;                    
}
console.log(new Fun());        //Fun {name: '张三'}

//当返回值为引用数据类型时，则使用retuen返回的值，new就失效了
function Fun() {
    this.name = "张三";
    return {a:1};                    
}
console.log(new Fun());        //{a: 1}

我们可以根据以上四点的定义，自定义一个函数来实现new操作符的作用

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

      function create(fn, ...arr) {
        //1.创建一个空对象
        let obj = {};
        //2.将空对象的原型，指向于构造函数的原型
        Object.setPrototypeOf(obj, fn.prototype);
        //3.将空对象作为构造函数的上下文(改变this指向)
        let result = fn.apply(obj, arr);
        //4.对构造函数有返回值的判断处理
        return result instanceof Object ? result : obj;
      }

    //此时这个Fun跟使用new操作符new出来的函数作用是一样的
      console.log(create(Fun, "张三", 18));