JavaScript原型对象原理与继承应用详解

作者:拾光

时间:2026-10-22

浏览:347

本文深入解析JavaScript中对象的原型机制,阐述每个对象如何通过[[wp:a0]]属性引用原型对象。通过代码示例展示原型属性的动态分配、添加与删除,以及利用原型实现对象继承的具体方法,帮助开发者理解属性查找规则及原型链的工作流程。

文章目录

JavaScript原型对象原理与继承应用详解

本文通过具体实例解析JavaScript中原型对象的核心原理及其实际应用场景,旨在为读者提供清晰的技术参考。

原型对象的基本概念

关于原型对象的基本概念:

在JavaScript中,每个对象都关联着一个参考对象,即原型对象。该原型对象自身包含特定的属性和方法。若对象A被设定为对象B的原型,则B将自动拥有A定义的所有属性和方法。

原型对象的工作机制

原型对象的工作机制:

当基于原型对象创建新对象时,新对象在初始化阶段并不会立即复制原型中的属性和方法。只有当访问新对象内部不存在的属性或方法时,引擎才会动态地向原型对象发起调用请求,这种机制称为动态分配。

原型对象的引用方式

原型对象的引用方式:

在JavaScript语言规范中,每个函数都内置了一个prototype属性,该属性专门用于引用对应的原型对象。


function computer(){
   this.name="thinkPad 500";
   this.factory="联想";
   this.price=5000;
   this.size=17;
}
/*
*读取函数中的prototype,默认情况下为空
*/
for( pro in computer.prototype){
   document.write(computer.prototype,"<br>");
}
//没有继承原型对象中属性
var mycomputer=new computer();
for( pro in mycomputer){
   document.write(pro,":",mycomputer[pro],"<br>");
}
computer.prototype.interface="VAG";
//添加原型对象的属性
for( pro in computer.prototype){
   document.write(pro,":",computer.prototype[pro],"<br>");
}
//继承原型对象中属性
var mycomputer=new computer();
for( pro in mycomputer){
   document.write(pro,":",mycomputer[pro],"<br>");
}

可通过在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun对前述代码进行测试,运行结果如下所示:

JavaScript原型对象原理与继承应用详解

原型对象的继承机制

原型对象的继承机制:

JavaScript中的继承功能正是通过原型对象来实现的。


<script type="text/javascript">
//定义一个工人
function worker(){
    this.name="";
    this.address="";
}
//定义一个部门经理
function manager(_dept){
    this.dept=_dept;
}
//定义继承关系
manager.prototype=new worker();
//创建计划部门经理
var jh=new manager("计划");
for(pro in jh){
    document.write(pro,":",jh[pro],"<br>");
}
//当前jh有效没有改变原型对象中的值
jh.name="计划部门经理";
jh.address="计划部";
for(pro in jh){
    document.write(pro,":",jh[pro],"<br>");
}
//原型对象中的值没有被修改
var rs=new manager('人事');
for(pro in rs){
    document.write(pro,":",rs[pro],"<br>");
}
//修改原型对象中的值,将会在继承的对象中体现,如果继承类中没有覆盖
manager.prototype.address="成都市";
//覆盖后address的值还是原来的计划
for(pro in jh){
    document.write(pro,":",jh[pro],"<br>");
}
//没有覆盖address的值是成都市
for(pro in rs){
    document.write(pro,":",rs[pro],"<br>");
}
</script>

利用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun执行上述代码,可得到如下运行结果:

JavaScript原型对象原理与继承应用详解

利用原型对象,可以向所有继承该原型的对象统一添加或移除属性,确保所有继承对象在显示层面保持一致。

如需了解更多JavaScript相关知识,建议查阅本站系列教程:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》以及《JavaScript数学运算用法总结》。

期望本文的阐述能对各位在JavaScript程序设计领域的学习与应用有所助益。

实用工具推荐

电子包浆

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

使用 ›
图片压缩

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

使用 ›
相关文章