深入理解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); //undefinedconsole.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// 构造函数本身如果返回的是对象的话，则 返回的就是此对象// 如果返回值不是对象的话，则 返回对应的objreturn isObject || isFunction ? res : obj;}function Ele() {this.name = "Ele";}let e = _new(Ele)console.log(e.name); // Ele

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