JS中new关键字的实现

js中的new关键字主要用在以构造函数的方式创建对象时，像这样：

 function Foo(name, age, sex) {
     this.name = name
     this.age = age
     this.sex = sex
     // return 1  //如果返回了一个基本数据类型数据，下方的person会生成一个对象
     // return {a:1} //如果返回了一个非基本数据类型数据，下方的person为{a:1}
 }
 var person = new Foo('小明', '18', '男')
 consloe.log(person)
 console.log(person.name)  //小明

我们发现这个构造函数没有显示返回任何值，如果有返回值会怎样呢？

 function Foo(name, age, sex) {
     this.name = name
     this.age = age
     this.sex = sex
     return 1  
 }
 var person = new Foo('小明', '18', '男')
 consloe.log(person)
 console.log(person.name)  //小明

返回了一个1，但是没有任何影响，结果没有变化
由此得出一个结论：构造函数如果返回了一个原始值类型，实际上会生成一个空对象，没有任何意义

如果返回对象会怎么样呢？

 function Foo(name, age, sex) {
     this.name = name
     this.age = age
     this.sex = sex
     return {a:1} //如果返回了一个非基本数据类型数据，下方的person为{a:1}
 }
 var person = new Foo('小明', '18', '男')
 consloe.log(person)  //{a:1}
 console.log(person.name)  //undefined

返回了一个对象，这个对象的值就会被正常返回

返回结果注意：

通过这种方式获取对象时，最终不一定返回的是对象，要看构造函数的返回值是什么，如果构造函数返回的是原始值类型，实际会生成一个对象，如果构造函数返回的是引用值类型，则实际返回的是该引用值类型。

上一段代码很容易让人认为 Foo 是一个构造函数，因为我们使用 new 来调用它并且看到它“构造”了一个对象。实际上， Foo 和你程序中的其他函数没有任何区别。函数本身并不是构造函数，然而，当你在普通的函数调用前面加上 new 关键字之后，就会把这个函数调用变成一个“构造函数调用”。实际上， new 会劫持所有普通函数并用构造对象的形式来调用它。 换句话说，在 JavaScript 中对于“构造函数”最准确的解释是，所有带 new 的函数调用。 函数不是构造函数，但是当且仅当使用 new 时，函数调用会变成“构造函数调用”。 那么new关键字究竟是如何构造一个对象，使其拥有“构造函数”的属性和方法的呢？它的内部是如何实现的呢？

new关键字创建实例对象的步骤：

• 1.创建一个新的对象，如：var person={}，因为new关键字返回的是一个对象
• 2.新对象的__proto__属性指向构造函数的原型对象
• 3.将构造函数的作用域赋值给新对象（也就是this对象指向新对象）
• 4.返回新对象person

我们就可以手动封装一个new关键字了

// fn是构造函数
function myNew(fn, ...args) {
    const obj = {};
    obj.__proto__ = fn.prototype;
    // 改变this指向
    let result = fn.apply(obj, args)
    // return result
    // 确保new出来的是一个对象
    return typeof result === "object" ? result : obj
}

来测试一下

 function Student(name, age, sex) {
    this.name = name;
    this.age = age;
    this.sex = sex;
    this.play=function(){
        console.log('hhhhhhh')
    }
}
var student1 = myNew(Student, '小明', 18, '男')
console.log(student1) //{name: "小明", age: 18, sex: "男", play: ƒ}

参考：《你不知道的JavaScript（上卷）》