JavaScript中new关键字的工作原理与原型链解析

作者:代码拾荒

时间:2026-10-24

浏览:384

本文解析JavaScript中new关键字的实际执行过程。不同于传统面向对象语言,JS通过new以构造函数为模板创建对象,复制成员变量并绑定原型。文章通过代码模拟展示了apply调用与__proto__属性在原型链查找中的核心作用,澄清了常见概念误区。

文章目录

JavaScript中new关键字的工作原理与原型链解析

首先需要明确,JavaScript语言本身并不具备传统意义上的“类”概念。这一基础认知至关重要,因为许多教程为了降低理解门槛,强行套用其他语言中常见的类模式概念,这反而容易引发读者的误解和混淆。


接下来通过一段示例代码进行说明。


具体代码如下所示:

 
function employee(){
this.name="";
this.dept="";
} 
employee.prototype={
say:'hello'
} 
var p = new employee();

在上述代码中,我们频繁使用相关语法,其中new关键字是最容易让人产生困惑的部分。需要注意的是,JavaScript中new的执行机制与.NET等语言中的实现并不相同。


我们可以将JavaScript中使用new操作符创建实例的过程理解为:new关键字以employee()函数作为模板,创建出一个全新的对象。它复制了employee构造函数内部的成员变量(也可以理解为将p对象作为参数传入构造函数,并应用函数中所有this指向的成员变量),同时继承了构造函数的原型对象。


为了更清晰地展示这一机制,我们使用代码来模拟new的内部执行过程。


模拟代码如下:

 
//var p = new Object() is also correct.
var p ={};
employee.apply(p);
p.__proto__ = employee.prototype;

__proto__是JavaScript对象实例的一个内部属性,它指向构造函数(即employee)的prototype属性。当对象查找某一成员变量时(例如访问p.say),引擎首先查找对象自身的成员属性;如果找到则直接返回值,如果未找到,则会通过__proto__属性沿着原型链向上查找。在当前的例子中,这意味着会在employee.prototype中寻找say成员。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章