JavaScript 原型覆盖与属性修改机制解析

作者:异步漫步

时间:2026-10-30

浏览:429

本文探讨JavaScript中覆盖原型对象及修改原型属性对实例的影响。通过Prisoner示例展示如何定义原型、关联构造函数及实例化对象。重点分析当原型属性值被修改时,通过实例访问该属性会触发原型链查找机制,从而返回最新值。文章结合终端输出验证了原型链查询行为,帮助开发者深入理解原型继承与属性查找的实际效果。

文章目录

JavaScript原型覆盖与属性修改机制解析

覆盖原型

原型对象定义与实例化流程


//囚犯示例 
//1.定义原型对象 
var proto = { 
 sentence : 4, //监禁年限 
 probation: 2 //缓刑年限 
}; 
//2.定义原型对象的构造函数 
var Prisoner = function(name, id) { 
 this.name = name; 
 this.id = id; 
}; 
//3.将构造函数关联到原型 
Prisoner.prototype = proto; 
//4.实例化对象——采用工厂函数实例化对象 
var makePrisoner = function(name, id) { 
 //采用工厂函数实力化对象prisoner 
 var prisoner = Object.create( proto ); 
 prisoner.name = name; 
 prisoner.id = id; 
 return prisoner; 
}; 
 
var firstPrisoner = makePrisoner( 'Joe', '12A' ); 
 
//firstPrisoner.sentence在firstPrisoner对象找不到sentence属性, 
//所以查找对象的原型并找到了Both of these output 4 
console.log( firstPrisoner.sentence ); 
console.log( firstPrisoner.__proto__.sentence ); 
//把对象的sentence属性设置为10 
firstPrisoner.sentence = 10; 
//outputs 10 
//确定对象上的属性值已设置为10 
console.log( firstPrisoner.sentence ); 
//但是对象的原型并没有变化,值仍然为4 
console.log( firstPrisoner.__proto__.sentence ); 
//为了使获取到的属性回到原型的值,将属性从对象上删除 
delete firstPrisoner.sentence; 
//接下来,JavaScript引擎在对象上不能再找到该属性, 
//必须回头去查找原型链,并在原型对象上找到该属性 
// Both of these output 4 
console.log( firstPrisoner.sentence ); 
console.log( firstPrisoner.__proto__.sentence );

在Ubuntu终端中使用Node.js运行脚本,观察输出结果。

终端输出验证与原型链查找机制


xxh@xxh-E440:~/workspace$ node t6 
4 
4 
10 
4 
4 
4 

接下来探讨一个关键问题:如果修改了原型对象的属性值,会对现有实例产生什么影响?这是理解原型机制的核心所在。

以上关于JavaScript覆盖原型及更改原型的探讨到此结束,希望这些内容能为您提供参考。

实用工具推荐

电子包浆

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

使用 ›
图片压缩

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

使用 ›
相关文章