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文件 document.createElement
Oct 14 Javascript
Javascript中Eval函数的使用说明
Oct 11 Javascript
jQuery的写法不同导致的兼容性问题的解决方法
Jul 29 Javascript
一个网马的tips实现分析
Nov 28 Javascript
js中this的用法实例分析
Jan 10 Javascript
javascript作用域问题实例分析
Jul 13 Javascript
你不知道的高性能JAVASCRIPT
Jan 18 Javascript
Vue2路由动画效果的实现代码
Jul 10 Javascript
underscore之function_动力节点Java学院整理
Jul 11 Javascript
详解vue-router 初始化时做了什么
Jun 11 Javascript
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
微信小程序自定义支持图片的弹窗
Dec 21 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
Oracle 常见问题解答
2006/10/09 PHP
PHP实现在线阅读PDF文件的方法
2015/06/17 PHP
thinkPHP5.0框架开发规范简介
2017/03/25 PHP
ThinkPHP实现分页功能
2017/04/28 PHP
PHP实现基于3DES算法加密解密字符串示例
2018/08/24 PHP
PHP PDOStatement::fetch讲解
2019/01/31 PHP
不要小看注释掉的JS 引起的安全问题
2008/12/27 Javascript
js删除所有的cookie的代码
2010/11/25 Javascript
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
2014/05/08 Javascript
node.js中的http.response.removeHeader方法使用说明
2014/12/14 Javascript
原生Js实现简易烟花爆炸效果的方法
2015/03/20 Javascript
JQuery.validate在ie8下不支持的快速解决方法
2016/05/18 Javascript
AngularJS 如何在控制台进行错误调试
2016/06/07 Javascript
jQuery实现的自定义滚动条实例详解
2016/09/20 Javascript
js图片切换具体实现代码
2016/10/13 Javascript
JavaScript学习笔记--常用的互动方法
2016/12/07 Javascript
fullCalendar中文API官方文档
2017/02/07 Javascript
Vue2.0 UI框架ElementUI使用方法详解
2017/04/14 Javascript
jQuery实现列表的增加和删除功能
2018/06/14 jQuery
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
2019/11/24 Javascript
[49:35]LGD vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
[01:45]典藏宝瓶2+祈求者身心——这就是DOTA2TI9总奖金突破3000万美元的秘密
2019/07/21 DOTA
Python中最常用的操作列表的几种方法归纳
2015/04/24 Python
Mac 上切换Python多版本
2017/06/17 Python
Linux-ubuntu16.04 Python3.5配置OpenCV3.2的方法
2018/04/02 Python
Python创建一个空的dataframe,并循环赋值的方法
2018/11/08 Python
对python numpy.array插入一行或一列的方法详解
2019/01/29 Python
淘宝秒杀python脚本 扫码登录版
2019/09/19 Python
详解CSS3实现响应式手风琴效果
2020/06/10 HTML / CSS
HTML5网页音乐播放器的示例代码
2017/11/09 HTML / CSS
纯HTML5+CSS3制作生日蛋糕(代码易懂)
2016/11/16 HTML / CSS
什么是典型的软件三层结构?软件设计为什么要分层?软件分层有什么好处?
2012/03/14 面试题
学校感恩教育活动总结
2014/07/07 职场文书
农村老人去世追悼词
2015/06/23 职场文书
团队拓展训练心得体会
2016/01/12 职场文书
C#连接ORACLE出现乱码问题的解决方法
2021/10/05 Oracle