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常考语句107条收集
Mar 09 Javascript
JQuery Easyui Tree的oncheck事件实现代码
May 28 Javascript
防止按钮在短时间内被多次点击的方法
Mar 10 Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
Oct 29 Javascript
JS中的eval 为什么加括号
Apr 13 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
Jan 20 Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
Oct 15 Javascript
React Native日期时间选择组件的示例代码
Apr 27 Javascript
vue mounted 调用两次的完美解决办法
Oct 29 Javascript
React中this丢失的四种解决方法
Mar 12 Javascript
Js代码中的span拼接问题解决
Nov 22 Javascript
vue特效之翻牌动画
Apr 20 Vue.js
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函数篇之掌握ord()与chr()函数应用
2011/12/05 PHP
PHP资源管理框架Assetic简介
2014/06/12 PHP
分享PHP函数实现数字与文字分页代码
2015/07/28 PHP
PHP使用反射机制实现查找类和方法的所在位置
2016/04/22 PHP
PHP微信开发之查询城市天气
2016/06/23 PHP
深入剖析JavaScript中的枚举功能
2014/03/06 Javascript
js实现select跳转功能代码
2014/10/22 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
2016/04/26 Javascript
网页挂马方式整理及详细介绍
2016/11/03 Javascript
DropDownList实现可输入可选择(两种版本可选)
2016/12/07 Javascript
vue.js将unix时间戳转换为自定义时间格式
2017/01/03 Javascript
JavaScript中splice与slice的区别
2017/05/09 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
2017/10/17 Javascript
Vue组件之Tooltip的示例代码
2017/10/18 Javascript
原生JS实现Ajax跨域请求flask响应内容
2017/10/24 Javascript
基于js中style.width与offsetWidth的区别(详解)
2017/11/12 Javascript
Vuex实现计数器以及列表展示效果
2018/03/10 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
2018/05/03 Javascript
Layui Form 自定义验证的实例代码
2019/09/14 Javascript
layui输入框中只允许输入整数的实现方法
2019/09/18 Javascript
原生js实现随机点名
2020/07/05 Javascript
[51:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python内存管理分析
2015/04/08 Python
PyQt5创建一个新窗口的实例
2019/06/20 Python
Python Django Cookie 简单用法解析
2019/08/13 Python
python3中pip3安装出错,找不到SSL的解决方式
2019/12/12 Python
python数据库开发之MongoDB安装及Python3操作MongoDB数据库详细方法与实例
2020/03/18 Python
在python中使用nohup命令说明
2020/04/16 Python
Bluebella美国官网:英国性感内衣品牌
2018/10/04 全球购物
房地产销售大学生自我评价分享
2013/11/11 职场文书
生产车间班组长岗位职责
2014/01/06 职场文书
爱情保证书范文
2014/02/01 职场文书
中学生评语大全
2014/04/18 职场文书
《分一些蚊子进来》读后感3篇
2020/01/09 职场文书
python调试工具Birdseye的使用教程
2021/05/25 Python
Python OpenCV实现传统图片格式与base64转换
2021/06/13 Python