JS函数进阶之继承用法实例分析


Posted in Javascript onJanuary 15, 2020

本文实例讲述了JS函数进阶之继承用法。分享给大家供大家参考,具体如下:

直接代码,不解释:

<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>

运行结果:

JS函数进阶之继承用法实例分析

进一步理解,引入prototype,一方面是实现了同一个类创建对象时创建实现相同功能的方法,这些方法在对象创建时同样会占用内存,所以我们把方法定义到外面变成公共的方法,节省了内存(注:如果是类内部的方法构建两个对象时其内部的函数时不同的,不相等且不等同)另一方面,降低了代码的冗余,其中当你把一个类的prototype值设置为一个对象,那么你就拥有了其内部的属性和方法,当进行包含后可以直接利用带属性调用或者直接调用,这样有一个好处是:我们没有必要创建这个对象就可以直接调用其内部的方法。但是对于三层的包含关系,我们不能使用,要想使用就只能用连续双重的属性调用。对于内部属性值如果子类和父类的属性名相同,那么直接调用就是父类的属性,利用属性调用包含类可以调用子类的属性。

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

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

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

Javascript 相关文章推荐
获取数组中最大最小值方法js代码(自写)
Aug 12 Javascript
js之onload事件的一点使用心得
Aug 14 Javascript
js截取字符串的两种方法及区别详解
Nov 05 Javascript
JavaScript小技巧整理篇(非常全)
Jan 26 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
Nov 24 Javascript
ie下js不执行的几种可能
Feb 28 Javascript
微信小程序录音与播放录音功能
Dec 25 Javascript
vue-infinite-loading2.0 中文文档详解
Apr 08 Javascript
在小程序/mpvue中使用flyio发起网络请求的方法
Sep 13 Javascript
微信小程序实现判断是分享到群还是个人功能示例
May 03 Javascript
JS Thunk 函数的含义和用法实例总结
Apr 08 Javascript
react如何快速设置文件路径别名
Apr 28 Javascript
JS函数进阶之prototy用法实例分析
Jan 15 #Javascript
JS函数基本定义与用法示例
Jan 15 #Javascript
JS几个常用的函数和对象定义与用法示例
Jan 15 #Javascript
JS自定义对象创建与简单使用方法示例
Jan 15 #Javascript
vue移动端使用canvas签名的实现
Jan 15 #Javascript
js实现鼠标拖拽div左右滑动
Jan 15 #Javascript
Vue数字输入框组件示例代码详解
Jan 15 #Javascript
You might like
我的论坛源代码(九)
2006/10/09 PHP
ThinkPHP分组下自定义标签库实例
2014/11/01 PHP
Yii入门教程之Yii安装及hello world
2014/11/25 PHP
PHP Trait代码复用类与多继承实现方法详解
2019/06/17 PHP
Javascript使用post方法提交数据实例
2015/08/03 Javascript
js获取当前时间(昨天、今天、明天)
2016/11/23 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
2016/12/12 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
2017/04/27 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
2017/06/17 Javascript
vue中v-model动态生成的实例详解
2017/10/27 Javascript
js实现通过开始结束控制的计时器
2019/02/25 Javascript
[01:00:35]2018DOTA2亚洲邀请赛3月30日B组 EffcetVSMineski
2018/03/31 DOTA
[44:22]完美世界DOTA2联赛循环赛 FTD vs PXG BO2第一场 11.01
2020/11/02 DOTA
初步介绍Python中的pydoc模块和distutils模块
2015/04/13 Python
python实现支持目录FTP上传下载文件的方法
2015/06/03 Python
python读写LMDB文件的方法
2018/07/02 Python
在python中实现将一张图片剪切成四份的方法
2018/12/05 Python
详解Python使用Plotly绘图工具,绘制甘特图
2019/04/02 Python
基于python操作ES实例详解
2019/11/16 Python
Python笔记之工厂模式
2019/11/20 Python
在Python3.74+PyCharm2020.1 x64中安装使用Kivy的详细教程
2020/08/07 Python
Pytest如何使用skip跳过执行测试
2020/08/13 Python
使用css3实现的windows8开机加载动画
2014/12/09 HTML / CSS
植村秀美国官网:Shu Uemura美国
2019/03/19 全球购物
工艺工程师工作职责
2013/11/23 职场文书
公务员培的训心得体会
2014/09/01 职场文书
2014年学习全国道德模范事迹思想汇报
2014/09/15 职场文书
2014年除四害工作总结
2014/12/06 职场文书
毕业生捐书活动倡议书
2015/04/27 职场文书
亮剑观后感600字
2015/06/05 职场文书
2015年中秋放假通知范文
2015/08/18 职场文书
创业计划书之淘宝网店
2019/10/08 职场文书
利用python做表格数据处理
2021/04/13 Python
python实战之一步一步教你绘制小猪佩奇
2021/04/22 Python
Python使用openpyxl批量处理数据
2021/06/23 Python
redis缓存存储Session原理机制
2021/11/20 Redis