JavaScript原型链深度解析：显式与隐式原型的区别及new机制

JavaScript原型链概述

本文通过具体实例解析JavaScript中的原型链概念，旨在为读者提供参考与学习思路。

以往许多开发者认为原型链晦涩难懂，难以透彻掌握。近期通过查阅相关资料并观察一张关键图示，发现该图对原型链的阐释极为清晰，没有任何其他语言能比此图更直观地表达这一概念。

研读该图示后，对JavaScript的理解实现了质的飞跃。

显式与隐式原型链的区别

JavaScript的原型链机制包含显式与隐式两种形式：

显式原型链指的是我们熟知的prototype属性；

隐式原型链在常规开发环境中不可见，但在Firefox浏览器中可通过__proto__属性进行访问。隐式原型链主要供JavaScript引擎内部用于原型链搜索，其设置依赖于显式原型链； 一、prototype和__proto__的概念

prototype与__proto__的概念辨析

prototype是函数拥有的一个属性（每个函数均具备此属性），它是一个指向对象的指针。该属性用于显式地修改对象的原型。

__proto__是对象内置的属性（需注意：prototype属于函数，而__proto__属于对象），它是JavaScript内部用于查找原型链的关键属性。

在Chrome和Firefox浏览器中均可访问对象的__proto__属性，但Internet Explorer（IE）不支持此访问方式。

new关键字的执行过程解析

二、new 的过程

var Person = function(){};
var p = new Person();

new关键字的执行过程可分解为以下三个步骤：

(1) var p={}; 即初始化一个空对象p (2) p.__proto__ = Person.prototype; (3) Person.call(p); 即对对象p进行构造，也可称为初始化p

核心关键在于第二步，下面通过代码进行验证：

var Person = function(){};
var p = new Person();
alert(p.__proto__ === Person.prototype);

该段代码执行后将返回true，证实了上述第二步的正确性。

原型链查找机制示例

三、示例

var Person = function(){};
Person.prototype.sayName = function() {
  alert("My Name is Jacky");
};
Person.prototype.age = 27;
var p = new Person();
p.sayName();

变量p是一个引用，指向Person构造函数创建的对象。我们在Person的原型上定义了sayName方法和age属性。当执行p.age时，引擎会先在this内部（即构造函数作用域内）进行查找；若未找到，则沿着原型链向上追溯。

这种向上追溯是如何实现的？关键在于利用__proto__属性链接到原型（即Person.prototype）进行查找。最终，引擎在原型上成功找到了age属性。

希望本文的阐述能对各位的JavaScript程序设计工作有所帮助。