JavaScript模拟实现new操作符原理详解

作者：纸飞机时间：2026-10-24 03:58:14浏览：310

本文深入解析JavaScript中new关键字的工作机制，并通过分步代码演示如何手动模拟实现该功能。内容涵盖创建空对象、链接原型链、绑定this上下文以及处理构造函数返回值等核心逻辑，最终提供基于Object.create的优化实现方案。

new操作符的基本特性分析

new是JavaScript语言中的一个关键字，主要用于作为运算符来实例化构造函数。示例如下：


function Animal(name) {
  this.name = name;
}
Animal.prototype.sayName = function() {
  console.log("I'm " + this.name);
}
var cat = new Animal('Tom');
console.log(cat.name); // Tom
console.log(cat.__proto__ === Animal.prototype); // true
cat.sayName(); // I'm Tom

通过上述示例，我们可以总结出以下两个关键结论：

new操作符成功实例化了一个对象；
该实例对象能够访问构造函数内部定义的属性；
该实例对象同样可以访问构造函数原型对象上的属性；
对象的__proto__属性指向了构造函数的prototype原型；

模拟实现第一版：基础功能

由于new是语言关键字，无法直接重写，因此我们需要声明一个函数来模拟实现new的功能。首先，我们实现上述提到的三个基本特性，第一版代码实现如下：

补充说明：如果对原型和原型链的概念尚不熟悉，建议先阅读关于理解Javascript的原型和原型链的相关文章。


// construct: 构造函数
function newFunction() {
 var res = {};
 // 排除第一个构造函数参数
 var construct = Array.prototype.shift.call(arguments);
 res.__proto__ = construct.prototype;
 // 使用apply执行构造函数，将构造函数的属性挂载在res上面
 construct.apply(res, arguments);
 return res;
}

我们对上述代码进行测试：


function newFunction() {
 var res = {};
 var construct = Array.prototype.shift.call(arguments);
 res.__proto__ = construct.prototype;
 construct.apply(res, arguments);
 return res;
}
function Animal(name) {
  this.name = name;
}
Animal.prototype.sayName = function() {
  console.log("I'm " + this.name);
}
var cat = newFunction(Animal, 'Tom');
console.log(cat.name); // Tom
console.log(cat.__proto__ === Animal.prototype); // true
cat.sayName(); // I'm Tom

模拟实现第二版：处理返回值

测试结果符合预期。此时new的特性实现程度已达80%，但new操作符还有一个重要特性：


function Animal(name) {
  this.name = name;
  return {
    prop: 'test'
  };
}
var cat = new Animal('Tom');
console.log(cat.prop); // test
console.log(cat.name); // undefined
console.log(cat.__proto__ === Object.prototype); // true
console.log(cat.__proto__ === Animal.prototype); // false

如前所述，如果构造函数内部显式return了一个对象，那么new操作后的返回值将是该return的对象，而非新创建的实例。让我们实现这一特性，最终版代码如下：


// construct: 构造函数
function newFunction() {
 var res = {};
 // 排除第一个构造函数参数
 var construct = Array.prototype.shift.call(arguments);
 res.__proto__ = construct.prototype;
 // 使用apply执行构造函数，将构造函数的属性挂载在res上面
 var conRes = construct.apply(res, arguments);
 // 判断返回类型
 return conRes instanceof Object ? conRes : res;
}

再次进行测试：


function Animal(name) {
  this.name = name;
 return {
  prop: 'test'
  };
}
var cat = newFunction(Animal, 'Tom');
console.log(cat.prop); // test
console.log(cat.name); // undefined
console.log(cat.__proto__ === Object.prototype); // true
console.log(cat.__proto__ === Animal.prototype); // false

官方定义与优化实现

以上代码即为我们对new操作符模拟实现的最终版本。接下来，我们参考官方文档对new的解释：

引用MDN（Mozilla Developer Network）对new运算符的定义：

new运算符用于创建用户定义的对象类型的实例，或具有构造函数的内置对象的实例。

new操作符主要执行以下四个步骤：

创建一个空的简单JavaScript对象（即{}）；
将该对象链接到另一个对象（即设置该对象的构造函数属性）；
将步骤1中创建的新对象作为this的上下文；
如果该函数没有返回对象，则返回this。

上述四条特性均已实现。此外，还有一种更优的实现方式，即通过Object.create方法来创建一个空对象：


// construct: 构造函数
function newFunction() {
 // 通过Object.create创建一个空对象；
 var res = Object.create(null);
 // 排除第一个构造函数参数
 var construct = Array.prototype.shift.call(arguments);
 res.__proto__ = construct.prototype;
 // 使用apply执行构造函数，将构造函数的属性挂载在res上面
 var conRes = construct.apply(res, arguments);
 // 判断返回类型
 return conRes instanceof Object ? conRes : res;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。

作者最新文章

JS动态构建复杂嵌套JSON对象的方法

2026-11-05 15:41:52

JS负数取余为什么是负数？详解余数与模运算区别

2026-11-05 13:34:41

JS 解压出现乱码或报错怎么解决？

2026-11-05 12:32:38

JS 中 startsWith、indexOf 与正则判断字符串前缀的对比

2026-11-04 22:19:43

JS解析Excel后怎么将数据转换为JSON格式

2026-11-04 20:58:28