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 相关文章推荐
IE与Firefox在JavaScript上的7个不同写法小结
Sep 14 Javascript
javascript 动态调整图片尺寸实现代码
Dec 28 Javascript
正则表达式优化JSON字符串的技巧
Dec 24 Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
Dec 26 Javascript
javascript执行环境及作用域详解
May 05 Javascript
利用原生JS自动生成文章标题树的实例
Aug 22 Javascript
JavaScript设计模式之单体模式全面解析
Sep 09 Javascript
使用node.js中的Buffer类处理二进制数据的方法
Nov 26 Javascript
浅谈js函数三种定义方式 &amp; 四种调用方式 &amp; 调用顺序
Feb 19 Javascript
AngularJS实现的JSONP跨域访问数据传输功能详解
Jul 20 Javascript
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
May 26 Javascript
json前后端数据交互相关代码
Sep 19 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实现的任意进制互转类分享
2015/07/07 PHP
Thinkphp微信公众号支付接口
2016/08/04 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
2010/05/21 Javascript
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
2013/02/26 Javascript
JQuery切换显示的效果实例代码
2013/02/27 Javascript
js实时获取系统当前时间实例代码
2013/06/28 Javascript
setInterval()和setTimeout()的用法和区别示例介绍
2013/11/17 Javascript
Javascript中For In语句用法实例
2015/05/14 Javascript
关于AngularJs数据的本地存储详解
2017/01/20 Javascript
Async Validator 异步验证使用说明
2017/07/03 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
2017/10/11 Javascript
教你用Cordova打包Vue项目的方法
2017/10/17 Javascript
详解vue-admin和后端(flask)分离结合的例子
2018/02/12 Javascript
浅谈Redux中间件的实践
2018/07/27 Javascript
JS实现的视频弹幕效果示例
2018/08/17 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
2018/09/29 Javascript
vue+element+Java实现批量删除功能
2019/04/08 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
2019/08/26 Javascript
layui 表格操作列按钮动态显示的实现方法
2019/09/06 Javascript
vue源码中的检测方法的实现
2019/09/26 Javascript
layui table 列宽百分比显示的实现方法
2019/09/28 Javascript
[38:23]完美世界DOTA2联赛循环赛 FTD vs PXG BO2第二场 11.01
2020/11/02 DOTA
Django框架中处理URLconf中特定的URL的方法
2015/07/20 Python
python如何为被装饰的函数保留元数据
2018/03/21 Python
Python将json文件写入ES数据库的方法
2019/04/10 Python
python实现控制COM口的示例
2019/07/03 Python
浅谈Python程序的错误:变量未定义
2020/06/02 Python
Python利用pip安装tar.gz格式的离线资源包
2020/09/14 Python
Pycharm编辑器功能之代码折叠效果的实现代码
2020/10/15 Python
美国棒球装备和用品商店:Baseball Savings
2018/06/09 全球购物
什么是数据抽象
2016/11/26 面试题
党员群众路线自我剖析材料
2014/10/06 职场文书
大学军训决心书
2015/02/05 职场文书
python unittest单元测试的步骤分析
2021/08/02 Python
Win11如何启用启动修复 ? Win11执行启动修复的三种方法
2022/04/08 数码科技