JavaScript 函数继承实战:原型链与内存优化解析

作者:纸飞机时间:2026-10-23 14:29:12浏览:397

本文通过具体代码实例深入解析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>

运行结果如下:

JavaScript函数继承实战解析

原型链与内存优化机制

为了更深入地理解这一机制,我们需要引入prototype概念。一方面,将方法定义在原型上,使得同一类创建的不同对象可以共享这些功能相同的方法,从而避免每个对象在创建时都占用独立的内存空间来存储函数(注:若在类内部直接定义方法,构建两个对象时,其内部的函数实例是不同的,既不相等也不等同)。另一方面,这种做法有效降低了代码的冗余度。当你将一个类的prototype属性设置为另一个对象时,该对象内部的属性和方法便成为新对象的一部分。在包含关系建立后,可以直接通过实例调用这些属性或方法,其优势在于无需显式创建该包含对象即可直接调用其内部方法。然而,对于三层的嵌套包含关系,这种直接调用方式不再适用;若需访问深层属性,必须使用连续双重的属性访问方式。此外,当子类与父类存在同名属性时,直接调用会优先返回父类的属性值;若要调用子类的特定属性,则需通过属性访问包含类的方式来实现。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

作者最新文章