深入理解js中的new关键字

在js中我们经常会使用到new关键字，那我们在使用new关键字的时候，new到底做了什么呢？今天我们就来深入探究一下

1.初步使用

我们先来使用一下，这是一个正常操作

    function Person() {
      this.name = "John";
    }
    let person = new Person();
    console.log(person.name); // John

new关键字主要做了这几件事情：

    1.创建一个新对象

    2.将构造函数的作用域赋值给新对象（this指向新对象）

    3.执行构造函数中的代码

    4.返回新对象

2.不使用new

那我们不使用new关键字，又会发生什么？

    function Person1() {
      this.name = "John1";
    }
    let p1 = Person1();
    console.log(p1); //undefined
    console.log(name); //name  this指向window，所以输出John1

 3.构造函数有return

    function Person2() {
      this.name = "mike";
      return { age: 18 };
    }
    let p2 = new Person2();
    console.log(p2); //{age: 18}
    console.log(p2.name); //undefined

如果构造函数返回一个对象,new命令会直接返回这个return的对象

如果return的不是一个对象，那还是回按照new的实现步骤，返回实例对象

 4.手动实现new关键字

    function _new(fn, ...args) {
      if (typeof fn !== "function") {
        throw "fn must be a function";
      }
      // 创建一个对象，其对象的原型，指向构造函数的原型对象
      let obj = Object.create(fn.prototype);

      let res = fn.apply(obj, ...args);

      return res instanceof Object ? res : obj

      // 构造函数本身如果返回的是对象的话，则 返回的就是此对象
      // 如果返回值不是对象的话，则 返回对应的obj
      return isObject || isFunction ? res : obj;
    }
    function Ele() {
        this.name = "Ele";
    }
    let e = _new(Ele)
    console.log(e.name); // Ele

如果你觉得本文对你有所帮助，欢迎评论，点赞与关注，一起卷~