本文详细解析 JavaScript 中的原型链机制,阐明 Function、Object 及实例对象之间的原型指向关系。通过代码示例展示如何构建原型链,并深入讲解属性与方法在原型链上的查找规则,帮助开发者理解对象继承与属性访问的内部原理。
Function 与 Object 的原型关系
Function 构造函数的内部原型([[Prototype]])指向其自身的原型对象,而 Function 的原型对象的内部原型则指向 Object 的原型对象。
Object 构造函数的内部原型同样指向 Function 的原型对象。
普通实例对象的内部原型默认指向其构造函数的显示原型(prototype)。
每个对象都拥有一个隐式属性(通常称为 __proto__ 或内部原型),用于指向其构造函数的原型对象。由于原型本身也是对象,因此它也有自己的内部原型。Object.prototype 是所有原型链的终点(根节点),由此形成了原型链结构。
对像属性访问原则
当访问对象的属性时,JavaScript 引擎首先在该对象自身的属性列表中查找。若未找到,则沿着原型链向上查找,即访问该对象内部原型(__proto__)指向的对象。如果仍未找到,则继续查找该原型的内部原型,直至找到属性或到达原型链顶端(Object.prototype)仍未找到为止。
调用对象方法时的搜索过程与访问属性完全一致,因为方法本质上也是存储在对象属性列表中的一个函数值。
原型链示例与属性查找机制
具体实现示例如下:
代码如下:
Object.prototype.m1 = function(){
alert("我是狮子");
}
function Class1(str){
this.p1 = str;
}
function Class2(){}
Class2.prototype.m1 = function(){
alert("你好");
}
var n1 = new Class1("毛狮子");
//@__proto__属性是对像父原型的引用
//@Object.prototype.__proto__=null
/*
n1的原型链
n1.__proto__=Class1.prototype
Class1.prototype.__proto__=Object.prototype
*/
var n2 = new Class2();
/*
n2的原型链
n2.__proto__=Class2.prototype
Class2.prototype.__proto__=Object.prototype
*/
n1.m1();//===Object.prototype.m1();
n2.m1();//===Class2.prototype.m1();
alert(n1.p1);//毛狮子
alert(n2.p1);//undefined