JavaScript中new操作符的原理与实现详解

// 1、创建一个构造函数
function Vehicle(name, price) {
    this.name = name
    this.price = price
}
​
// 2、new一个实例对象
let truck = new Vehicle()
console.log(truck); //Vehicle { name: undefined, price: undefined }
console.log(Object.prototype.toString.call(truck)); //[object Object]
​
// 传入参数
let car = new Vehicle('car', '￥9999999')
console.log(car);
//Vehicle { name: 'car', price: '￥9999999' }

console.log(typeof Vehicle); //function

​
    // 第一件：在构造函数内部，创建一个this对象
    let this = {
        name = name,
        price = price
    }
​
    // 第二件：返回this对象
    return this;
​
    // 第三件：给this对象的属性赋值
    this.name = name
    this.price = price

function Person(name, gender) {
    console.log('赋值前的this=', this); //赋值前的this= Person {}
    this.name = name
    this.gender = gender
    console.log('赋值后的this=', this); //赋值后的this= Person { name: '小灰灰', gender: 'boy' }
}
​
let child = new Person('小灰灰', 'boy')//Person { name: '小灰灰', gender: 'boy' }
console.log(child);

function Student(id, name) {
    this.id = id
    this.name = name
​
    // 返回基本类型的值时：返回的结果依然是对象Student {name:xxx,age:xxx}
    // return null   //Student { id: '1001', name: 'cat' }
    // return undefined //Student { id: '1001', name: 'cat' }
    // return 123        //Student { id: '1001', name: 'cat' }
    // return 'hello world'   //Student { id: '1001', name: 'cat' }
    // return true  //Student { id: '1001', name: 'cat' }
    // return false  //Student { id: '1001', name: 'cat' }
    //return Symbol('abc')  //Student { id: '1001', name: 'cat' }
​
    // 返回引用类型时：
    //返回空对象时：返回的结果是空对象
    // return {}  //{}
    //返回函数时，返回的结果是函数
    return function() {} //[Function (anonymous)]
    // return [] //[]
    // return new Date() //2022-10-24T04:44:18.581Z
    // return new Error() //Error...
}
​
let student = new Student('1001', 'cat')
console.log(student); //构造函数内部返回不同类型的值时，这里的打印结果是一样的吗？

// new的实现原理
function newPerson() {
    // 先return一个对象
    var obj = {};
    
    var constructor = Array.prototype.shift.call(arguments); //把数组的shift方法借给constructor使用
    
    // 实例对象的隐式原型===构造函数的显示原型
    obj._proto_ = constructor.prototype;
    var result = constructor.apply(obj, arguments);
    return typeof result === 'object' && result != 'null' ? result : obj;
}
​
let p = newPerson(Person, 'hunny')
console.log(p); //{ _proto_: {}, name: 'hunny', age: undefined }