JavaScript 函数继承实战:原型链与内存优化解析
本文通过具体代码实例深入解析JavaScript中的函数继承机制。重点探讨如何利用prototype属性实现方法共享以节省内存,并详细说明在多层包含关系下,子类与父类同名属性的调用优先级及访问方式,帮助开发者理解对象创建时的内存分配与代码冗余问题。
JavaScript函数继承实战解析
本文通过具体代码实例,深入解析JavaScript中函数继承的高级用法,供读者参考学习。
直接展示代码实现,不作过多文字解释:
<html>
<head>
<title>js函数继承进阶</title>
<meta charset="UTF-8"/>
<script type="text/javascript">
function person(name,age){ //对象的创建
this.name=name;
this.age=age;
// this.test=function(a){
// console.log("能运行吗");
// }
}
function book(name){
this.name="是我吗";
this.lookat=function(a){
console.log("看看能行吗");
}
}
function czxt(name){
this.name=name;
}
person.prototype.read=function(a){console.log("I can read");};
book.prototype.sign=function(a){console.log("I am book"); return new book()}; //视其为一个对象的一个属性进行”继承“
person.prototype.book=new book(); //直接进行“包含”
// person.prototype=new book();
czxt.prototype.appear=function(a){console.log("我是操作系统")};
book.prototype.subject=new czxt();
// book.prototype=new czxt();
var p1=new person("张三",37);
// p1.lookat(); //类内部的方法也可以调用
// console.log(p1.name); //包含类和父类都含有,是父类的name属性值。 "张三"
console.log(p1.book.name); //用属性进行调用的话,是包含类的name属性 ”是我吗“
// p1.sign(); //直接调用包含函数方法
// p1.book.sign(); //调用对象属性包含的方法
// p1.read(); //调用公共对象外函数
// p1.test(); //函数调用函数内部的函数(视函数为对象)
// p1.address="山东"; //每个特定对象主动添加对象属性
// console.log(p1.address);
var b1=new book();
// b1.appear(); //调用其继承体内的函数
// p1.appear(); //无法调用包含对象内的包含方法(无法直接调用孙子函数)
// p1.book.appear(); //用属性调用也不行啊,不是函数可还行
// p1.book.subject.appear(); //双重属性定义可以,牛逼了。
// p1.sign().appear(); //person非属性调用book,在book的sign方法中添加一个book类型的返回值以此来调用book包含的方法。
</script>
</head>
<body>
<h3>js函数继承进阶</h3>
</body>
</html>
运行结果如下:

原型链与内存优化机制
为了更深入地理解这一机制,我们需要引入prototype概念。一方面,将方法定义在原型上,使得同一类创建的不同对象可以共享这些功能相同的方法,从而避免每个对象在创建时都占用独立的内存空间来存储函数(注:若在类内部直接定义方法,构建两个对象时,其内部的函数实例是不同的,既不相等也不等同)。另一方面,这种做法有效降低了代码的冗余度。当你将一个类的prototype属性设置为另一个对象时,该对象内部的属性和方法便成为新对象的一部分。在包含关系建立后,可以直接通过实例调用这些属性或方法,其优势在于无需显式创建该包含对象即可直接调用其内部方法。然而,对于三层的嵌套包含关系,这种直接调用方式不再适用;若需访问深层属性,必须使用连续双重的属性访问方式。此外,当子类与父类存在同名属性时,直接调用会优先返回父类的属性值;若要调用子类的特定属性,则需通过属性访问包含类的方式来实现。
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容可查看本站专题:《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
JS动态构建复杂嵌套JSON对象的方法
2026-11-05 15:41:52
JS负数取余为什么是负数?详解余数与模运算区别
2026-11-05 13:34:41
JS 解压出现乱码或报错怎么解决?
2026-11-05 12:32:38
JS 中 startsWith、indexOf 与正则判断字符串前缀的对比
2026-11-04 22:19:43
JS解析Excel后怎么将数据转换为JSON格式
2026-11-04 20:58:28
