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 时间函数getYear()的使用问题探讨
Apr 01 Javascript
JS 作用域与作用域链详解
Apr 07 Javascript
浅谈关于JavaScript API设计的一些建议和准则
Jun 24 Javascript
javascript实现方法调用与方法触发小结
Mar 26 Javascript
js中遍历对象的属性和值的方法
Jul 27 Javascript
AngularJS使用ng-repeat指令实现下拉框
Aug 23 Javascript
jquery实现左右轮播切换效果
Jan 01 jQuery
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
Aug 30 Javascript
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
Sep 15 Javascript
JS数组实现分类统计实例代码
Sep 30 Javascript
微信小程序发送短信验证码完整实例
Jan 07 Javascript
JavaScript实现音乐播放器
Aug 14 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
php与python实现的线程池多线程爬虫功能示例
2016/10/12 PHP
PHP 配置后台登录以及模板引入
2017/01/24 PHP
PHP实现登录注册之BootStrap表单功能
2017/09/03 PHP
js中的值类型和引用类型小结 文字说明与实例
2010/12/12 Javascript
ajax更新数据后,jquery、jq失效问题
2011/03/16 Javascript
JS实现5秒钟自动封锁div层的方法
2015/02/20 Javascript
jQuery实现表格颜色交替显示的方法
2015/03/09 Javascript
Vue.JS入门教程之自定义指令
2016/12/08 Javascript
jQuery如何跳转到另一个网页 就这么简单
2016/12/28 Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
2017/12/06 Javascript
nodejs读取本地中文json文件出现乱码解决方法
2018/10/10 NodeJs
JavaScript中.min.js和.js文件的区别讲解
2019/02/13 Javascript
linux服务器快速卸载安装node环境(简单上手)
2021/02/22 Javascript
python实现用于测试网站访问速率的方法
2015/05/26 Python
Python之日期与时间处理模块(date和datetime)
2017/02/16 Python
Python中int()函数的用法浅析
2017/10/17 Python
python+pygame简单画板实现代码实例
2017/12/13 Python
Django学习之文件上传与下载
2019/10/06 Python
Python生成个性签名图片获取GUI过程解析
2019/12/16 Python
python定义类self用法实例解析
2020/01/22 Python
Python基础之字典常见操作经典实例详解
2020/02/26 Python
python Django 反向访问器的外键冲突解决
2020/05/20 Python
Python Scrapy图片爬取原理及代码实例
2020/06/12 Python
基于Python的一个自动录入表格的小程序
2020/08/05 Python
Python爬虫入门教程01之爬取豆瓣Top电影
2021/01/24 Python
HTML5所有标签汇总及标签意义解释
2015/03/12 HTML / CSS
高中毕业生自我鉴定
2013/11/03 职场文书
九年级历史教学反思
2014/01/27 职场文书
《数星星的孩子》教学反思
2014/04/11 职场文书
2014年合同管理工作总结
2014/12/02 职场文书
2014年小学体育工作总结
2014/12/11 职场文书
大学生违纪检讨书范文
2015/05/07 职场文书
上甘岭观后感
2015/06/10 职场文书
导游词之南京中山陵
2019/11/27 职场文书
Pytorch中的学习率衰减及其用法详解
2021/06/05 Python
vue elementUI批量上传文件
2022/04/26 Vue.js