JavaScript原型修改与重写(覆盖)的区别及推荐实践

作者:纸飞机

时间:2026-10-30

浏览:119

本文深入解析JavaScript中修改原型对象与重写原型对象的本质区别。通过对比在现有原型上添加属性与直接替换原型对象两种方式,阐明后者会导致已实例化的对象无法访问新原型。文章指出,若需保持已创建对象的兼容性,应优先采用方式1进行属性或方法的增量修改。

文章目录

JavaScript原型基础

在JavaScript中,每个函数都拥有一个名为prototype的属性(普通对象则没有此属性),该属性引用着一个特定的对象,即原型对象。JavaScript语言机制允许开发者对这个原型对象进行修改操作。

两种修改方式对比

针对原型对象的修改,主要存在两种不同的实现路径:

第一种方式是在现有的原型对象基础上,直接增加新的属性或定义新的方法。


function Person()
{
}

Person.prototype.add = function(){
	alert(this.name);
};

Person.prototype.name = "aty";

var p1 = new Person();
p1.add();//aty

第二种方式则是完全重写(覆盖)整个原型对象,用一个新的对象字面量或构造函数替换原有的原型引用。


function Person()
{
}

Person.prototype = {
	add : function(){
		alert(this.name);
	},
	name : "aty"
}



var p2 = new Person();
p2.add();//aty

尽管上述两种手段均能实现对原型的修改,但它们在行为表现上存在显著差异。究竟哪种方式更符合最佳实践?这取决于具体的使用场景。


function Person()
{
}

function Animal()
{

}

var person = new Person();
var animal = new Animal();

// 修改原型
Person.prototype.say = function(){
	alert("person");
}

// 修改原型
Animal.prototype = {
	say : function(){
		alert("person");
	}
}

person.say();//person
animal.say();//Uncaught TypeError: undefined is not a function

已创建对象的兼容性差异

关键在于对象创建的时间点。如果先实例化对象,随后再修改原型:采用方式1时,已存在的实例能够正确访问到新添加的原型属性或方法;而采用方式2时,已存在的实例由于原型引用未变,无法访问到新重写原型中的内容。基于此,方式1在保持已创建对象兼容性方面更具优势。其背后的原理如下文所述。

 


function Person()
{
}

function Animal()
{

}

var person = new Person();
var animal = new Animal();
alert(person.__proto__ === Person.prototype);//true
alert(animal.__proto__ === Animal.prototype);//true

// 修改原型
Person.prototype.say = function(){
	alert("person");
}

// 修改原型
Animal.prototype = {
	say : function(){
		alert("person");
	}
}

alert(person.__proto__ === Person.prototype);//true
alert(animal.__proto__ === Animal.prototype);//false

原理分析与结论

这一机制与Java中“修改引用指向的对象内容”和“修改引用指向另一个对象”的概念相似,其最终效果也是一致的。

以上关于JavaScript原型修改与重写(覆盖)差异的解析旨在提供清晰的参考,帮助开发者做出更合理的技术选型。

实用工具推荐

电子包浆

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

使用 ›
图片压缩

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

使用 ›
相关文章