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 跨域访问解决方案
Feb 14 Javascript
jquery中获取元素的几种方式小结
Jul 05 Javascript
优化javascript的执行效率一些方法总结
Dec 25 Javascript
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
May 21 Javascript
jquery插件推荐浏览器嗅探userAgent
Nov 09 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
jQuery实现的背景动态变化导航菜单效果
Aug 24 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
Feb 02 Javascript
jQuery EasyUI中DataGird动态生成列的方法
Apr 05 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
js实现图片跟随鼠标移动效果
Oct 16 Javascript
js基于canvas实现时钟组件
Feb 07 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
解决控件遮挡问题:关于有窗口元素和无窗口元素
2007/01/28 PHP
PHP中使用sleep造成mysql读取失败的案例和解决方法
2014/08/21 PHP
浅谈使用PHP开发微信支付的流程
2015/10/04 PHP
php7 安装yar 生成docker镜像
2017/05/09 PHP
PHP实现 APP端微信支付功能
2018/06/22 PHP
让广告代码不再影响你的网页加载速度
2006/07/07 Javascript
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
2010/06/12 Javascript
第十篇BootStrap轮播插件使用详解
2016/06/21 Javascript
jQuery实现定位滚动条位置
2016/08/05 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
2016/12/08 Javascript
flag和jq on 的绑定多个对象和方法(必看)
2017/02/27 Javascript
详解Angular中的自定义服务Service、Provider以及Factory
2017/04/22 Javascript
jQuery扇形定时器插件pietimer使用方法详解
2017/07/18 jQuery
react 实现页面代码分割、按需加载的方法
2018/04/03 Javascript
小程序云开发教程如何使用云函数实现点赞功能
2019/05/18 Javascript
小试小程序云开发(小结)
2019/06/06 Javascript
layui实现数据表格table分页功能(ajax异步)
2019/07/27 Javascript
JavaScript 预解析的4种实现方法解析
2019/09/03 Javascript
[02:31]2014DOTA2国际邀请赛2009专访:干爹表现出乎意料 看好DK杀回决赛
2014/07/20 DOTA
[00:43]2016完美“圣”典风云人物:单车宣传片
2016/12/02 DOTA
Python函数返回值实例分析
2015/06/08 Python
Python 稀疏矩阵-sparse 存储和转换
2017/05/27 Python
flask框架路由常用定义方式总结
2019/07/23 Python
Python 单例设计模式用法实例分析
2019/09/23 Python
django实现后台显示媒体文件
2020/04/07 Python
如何使用python切换hosts文件
2020/04/29 Python
Python中logger日志模块详解
2020/08/04 Python
python unichr函数知识点总结
2020/12/16 Python
域名注册、建站工具、网页主机、SSL证书:Dynadot
2017/01/06 全球购物
Linden Leaves官网:新西兰纯净护肤品
2020/12/20 全球购物
东方通信股份有限公司VC面试题
2014/08/27 面试题
先进个人事迹材料
2014/01/25 职场文书
二人合伙经营协议书
2014/09/13 职场文书
村干部任职承诺书
2015/01/21 职场文书
迟到检讨书
2015/01/26 职场文书
音乐教师个人工作总结
2015/02/06 职场文书