JavaScript对象创建与原型链继承机制详解

作者:半夏

时间:2026-10-27

浏览:198

本文解析JavaScript中对象创建时Function构造器对prototype的处理机制,以及通过修改prototype影响constructor属性的示例。深入讲解基于原型链的继承原理,包括__proto__的自动连接、instanceof的查找逻辑,并提供完整的Myinstanceof实现代码与View/TreeView继承实例,阐明对象实例化过程中的属性关联与类型判断过程。

文章目录

对象创建与constructor属性机制

对象创建机制解析



在JavaScript中,当一个函数对象被创建时,Function构造器生成的函数对象会执行类似如下的内部逻辑:


代码如下:

 
this.prototype={constructor:this};

假设存在一个函数F


当使用new关键字通过函数F构造对象时,新对象的constructor属性会被自动设置为F.prototype.constructor。


如果在创建对象之前修改了函数的prototype属性,将会直接影响所创建对象的constructor属性值。



例如:


代码如下:

 
function F(){};
F.prototype={constructor:'1111'};
var o=new F();//o.constructor===‘1111' true

原型链继承原理与instanceof实现

继承原理概述



JavaScript中的继承依赖于原型链机制。每个函数实例都共享构造函数prototype属性中定义的数据。要实现一个类继承另一个类,需要将父函数的实例赋值给子函数的prototype属性。此外,在每次通过new创建实例对象时,对象的私有属性__proto__会自动连接到构造函数的prototype。



instanceof运算符正是通过查找实例对象的私有__proto__属性链,来确定该对象是否是指定构造函数的实例。



具体实现示例


代码如下:

 
//instanceof实现
function Myinstanceof(obj,type)
{ 
var proto=obj.__proto__;
while(proto)
{ 
if(proto ===type.prototype)break;
proto=proto.__proto__;
} 
return proto!=null;
} 
function View(){}
function TreeView(){}
TreeView.prototype=new View();//TreeView.prototype.__proto__=TreeView.prototype 自动完成
TreeView.prototype.constructor=TreeView;//修正constructor
var view=new TreeView();//view.__proto__=TreeView.prototype 自动完成
alert(view instanceof View); //true 查找到view.__proto__.__proto__时找到
alert(view instanceof TreeView); //true 查找到view.__proto__时找到
alert(Myinstanceof(view,View)); //true
alert(Myinstanceof(view,TreeView)); //true

实用工具推荐

电子包浆

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

使用 ›
图片压缩

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

使用 ›
相关文章