new 构造函数原理

原创已于 2022-07-22 07:41:06 修改 · 508 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

于 2022-07-22 07:39:21 首次发布

javascript学习专栏收录该内容

2 篇文章

订阅专栏

本文深入解析JavaScript中的new构造函数执行逻辑，包括创建新对象、设置原型链、绑定上下文及返回结果的判断。通过手写new函数实现，展示了构造函数如何初始化新实例，并提供了Person构造函数及其实例的示例。

new 构造函数执行逻辑

在 new 构造函数的时候，会执行以下逻辑

创建一个空对象
将对象的的 proto 对象原型指向传递的构造函数的 prototype 原型对象
将传入的构造函数的 this 指向这个空对象
判断执行函数的结果是不是 null 或 Undefined，如果是则返回之前的新对象，如果不是则返回result

// 手写一个 new 函数 
/* 
    @params {fn-构造函数, ...args-参数}
    1. 创建一个空对象
    2. 将对象的的 __proto__ 对象原型 指向 传递的构造函数的 prototype 原型对象
    3. 将传入的构造函数的 this 指向这个空对象
    4. 判断执行函数的结果是不是null或Undefined，如果是则返回之前的新对象，如果不是则返回result
*/
function myNew(fn, ...args) {
    let obj = {}
    obj.__proto__ = fn.prototype;
    let result = fn.apply(obj, args)
    return result instanceof Object ? result : obj;
}

function Person(name, job) {
    this.name = name;
    this.job = job;
}

let jun = new Person('jun','前端工程师')
let san = new Person('san','语文老师')

console.log(jun,san)

// run code
// Person { name: 'jun', job: '前端工程师' }
// Person { name: 'san', job: '语文老师' }