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 相关文章推荐
JavaScript 提升运行速度之循环篇 译文
Aug 15 Javascript
JavaScript 选中文字并响应获取的实现代码
Aug 28 Javascript
javascript代码编写需要注意的7个小细节小结
Sep 21 Javascript
js动态生成指定行数的表格
Jul 11 Javascript
jquery得到font-size属性值实现代码
Sep 30 Javascript
让复选框只能选择一项的方法
Oct 08 Javascript
谈谈AngularJs中的隐藏和显示
Dec 09 Javascript
JavaScript中的Object对象学习教程
May 20 Javascript
使用微信小程序开发前端【快速入门】
Dec 05 Javascript
微信小程序搭建自己的Https服务器
May 02 Javascript
用JS实现选项卡
Mar 23 Javascript
原生js+canvas实现验证码
Nov 29 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
使用php4加速网络传输
2006/10/09 PHP
php获取mysql数据库中的所有表名的代码
2011/04/23 PHP
基于php在各种web服务器的运行模式详解
2013/06/03 PHP
带密匙的php加密解密示例分享
2014/01/29 PHP
PHP输出缓存ob系列函数详解
2014/03/11 PHP
PHP学习笔记(一) 简单了解PHP
2014/08/04 PHP
Windows下的PHP安装pear教程
2014/10/24 PHP
javascript 学习笔记(一)DOM基本操作
2011/04/08 Javascript
基于jquery的滚动鼠标放大缩小图片效果
2011/10/27 Javascript
js导航菜单(自写)简单大方
2013/03/28 Javascript
使用Node.js配合Nginx实现高负载网络
2015/06/28 Javascript
JS实现获取剪贴板内容的方法
2016/06/21 Javascript
JQueryEasyUI之DataGrid数据显示
2016/11/23 Javascript
vue组件学习教程
2017/09/09 Javascript
vue项目中使用Svg的方法
2018/10/24 Javascript
vue实现压缩图片预览并上传功能(promise封装)
2019/01/10 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
2019/04/11 Javascript
一键搞定python连接mysql驱动有关问题(windows版本)
2016/04/23 Python
对pandas中to_dict的用法详解
2018/06/05 Python
解决python2 绘图title,xlabel,ylabel出现中文乱码的问题
2019/01/29 Python
Python 处理文件的几种方式
2019/08/23 Python
Django通用类视图实现忘记密码重置密码功能示例
2019/12/17 Python
Python爬取YY评级分数并保存数据实现过程解析
2020/06/01 Python
HTML5 canvas标签实现刮刮卡效果
2015/04/24 HTML / CSS
迪拜领先运动补剂零售品牌中文站:Sporter商城
2019/08/20 全球购物
马来西亚在线购物:POPLOOK.com
2019/12/09 全球购物
土木工程毕业生自荐信
2013/11/12 职场文书
导游实习生自荐书
2014/01/28 职场文书
幼儿园小班教学反思
2014/02/02 职场文书
《金钱的魔力》教学反思
2014/02/24 职场文书
《彭德怀和他的大黑骡子》教学反思
2014/04/12 职场文书
社区助残日活动总结
2014/08/29 职场文书
2014年采购部工作总结
2014/11/20 职场文书
2014年度思想工作总结
2014/11/27 职场文书
商铺租房协议书范本
2014/12/04 职场文书
Python中的嵌套循环详情
2022/03/23 Python