JavaScript new一个对象的详细过程

JavaScript new一个对象的详细过程 new实现过程 new实现原理 new手写实现

实现过程/原理

1. 开辟一块内存，创建一个空对象
2. 执行构造函数对这个空对象进行构造
3. 给空对象添加__proto__属性
4. 调用函数改变this指向
5. 最后返回this指向的新对象（如果是引用类型则返回引用类型，否则返回Objective）

手写

/**
 * 模拟 new
 * @param {function} constructor
 * @param  {...any} args
 * @returns {object}
 */
function __new(constructor, ...args) {
    if (typeof constructor !== 'function') throw new TypeError('Error')

    // 创建一个空对象，指定原型为constructor.prototype
    const obj = Object.create(constructor.prototype)

    // 执行构造函数，绑定this
    const result = constructor.apply(obj, args)

    // 如果构造函数返回值是一个对象，那么返回该对象， 如果没有就返回 obj
    return result && result instanceof Object ? result : obj
}

// ------------------------------ 测试 ------------------------------

function Person(name, age) {
    this.name = name
    this.age = age
}

// __new
console.log('__new')
const __mxin = __new(Person, '__mxin', 18)
console.log(__mxin)
// Person {name: "__mxin", age: "18"}
//     age: "18"
//     name: "__mxin"
//     __proto__:
//         constructor: ƒ Person(name, age)
//         __proto__: Object

// new
console.log('new')
const mxin = new Person('mxin', 18)
console.log(mxin)
// Person {name: "mxin", age: "18"}
//     age: "18"
//     name: "mxin"
//     __proto__:
//         constructor: ƒ Person(name, age)
//         __proto__: Object

100+小程序源码关注公众号回复 5 获取（不想看激励视频的可私信）

本文由mdnice多平台发布