JavaScript中new操作符的实现原理与手动模拟
本文深入解析JavaScript中new操作符的底层执行机制,涵盖执行上下文创建、this指向绑定及返回值处理逻辑。通过对比普通函数调用与new调用的差异,详细演示如何手动模拟内置new行为,重点解决原型方法继承问题,提供完整的_new函数实现代码。
new操作符的执行流程
在JavaScript中,提及new操作符时,通常会关联到类的创建与实例化过程。例如:
function Func() {
let x = 100;
this.num = x +
}
let f = new Func();
上述代码首先定义了一个函数。从面向对象的角度看,这相当于创建了一个Function类的实例。若直接调用该函数,它仅是一个普通函数;但若使用new关键字执行,则该函数被视为自定义类。
当以普通函数方式执行时,主要执行以下步骤:
首先,形成全新的执行上下文(EC, Execution Context),即执行环境。
其次,创建活动对象(AO, Activation Object)作为变量对象,初始化arguments参数并赋值给形参。
接着,初始化作用域链。
最后,执行函数体内的代码。
若使用new关键字执行函数,其行为既包含普通函数执行的部分,也具备独特机制:
默认创建一个新对象,该对象即为当前类的实例。
声明this的指向,使其指向这个新创建的实例对象。
无论函数内部是否显式编写return语句,默认都会返回新创建的实例。这里存在一个特殊情况:如果用户手动返回一个引用类型值(如对象或函数),则会覆盖默认返回的实例,此时返回值不再是类的实例。
console.log(f); //=>{num:200}
//f是Func这个类的实例
//相当于给创建的实例对象新增一个num的属性 obj.num=200 (因为具备普通函数执行的一面,所以只有this.xxx=xxx才和创建的实例有关系,此案例中的x只是AO中的私有变量)
console.log(f instanceof Func); //=>TRUE instanceof用来检测某一个实例是否属于这个类
每次使用new生成的都是全新的独立实例对象。
console.log(f === f2); //=>false
手动模拟new的实现
明确了new的具体行为后,我们可以尝试手动模拟实现new操作符:
/*
* 内置NEW的实现原理
* @params
* Func:操作的那个类
* ARGS:NEW类的时候传递的实参集合
* @return
* 实例或者自己返回的对象
*/
function _new(Func, ...args) {
//默认创建一个实例对象(而且是属于当前这个类的一个实例)
let obj = {};
//也会把类当做普通函数执行
//执行的时候要保证函数中的this指向创建的实例
let result = Func.call(obj, ...args);
//若客户自己返回引用值,则以自己返回的为主,否则返回创建的实例
if ((result !== null && typeof result === "object") || (typeof result === "function")) {
return result;
}
return obj;
}
进行初步测试:
let f3 = _new(Func);
console.log(f3); // =>{num: 200}
继续进一步测试:
Func.prototype.log = function () {
console.log('ok');
}
let f4 = _new(Func);
f4.log(); //=>Uncaught TypeError: f4.log is not a function
原型链问题的修正
由此可见,直接模拟的版本无法调用Func原型上的方法,因此需要修正实现:
/*
* 内置NEW的实现原理
* @params
* Func:操作的那个类
* ARGS:NEW类的时候传递的实参集合
* @return
* 实例或者自己返回的对象
*/
function _new(Func, ...args) {
//默认创建一个实例对象(而且是属于当前这个类的一个实例)
// let obj = {};
let obj = Object.create(Func.prototype);
//也会把类当做普通函数执行
//执行的时候要保证函数中的this指向创建的实例
let result = Func.call(obj, ...args);
//若客户自己返回引用值,则以自己返回的为主,否则返回创建的实例
if ((result !== null && typeof result === "object") || (typeof result === "function")) {
return result;
}
return obj;
}
经过上述修改,功能应已完善。
let f6 = _new(Func);
f6.log(); //=>ok
总结
以上介绍了JavaScript中new操作符的实现原理及手动模拟方法,希望内容对大家有所帮助,感谢支持。
JS处理含Emoji或中文的字符串转数组乱码问题
2026-11-05 16:12:28
JS怎么使用展开运算符合并对象
2026-11-05 14:42:18
ES6+环境下判断JS对象为空的简洁写法
2026-11-05 12:12:23
怎么通过replacer函数自定义JS中JSON的格式化输出
2026-11-05 11:19:44
JS正则表达式基础:字面量与RegExp构造函数的区别及常用元字符
2026-11-05 11:16:58
