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 验证密码强弱的小例子
Mar 21 Javascript
jQuery中closest和parents的区别分析
May 07 Javascript
javascript求日期差的方法
Mar 02 Javascript
JavaScript数组实现数据结构中的队列与堆栈
May 26 Javascript
关于原生js中bind函数的简单实现
Aug 10 Javascript
js实现音频控制进度条功能
Apr 01 Javascript
VUE实现一个分页组件的示例
Sep 13 Javascript
基于Vue实现拖拽效果
Apr 27 Javascript
js实现图片局部放大效果详解
Mar 18 Javascript
layui prompt 设置允许空白提交的方法
Sep 24 Javascript
vue 使用lodash实现对象数组深拷贝操作
Sep 10 Javascript
小程序实现列表倒计时功能
Jan 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
DC这些乐高系列动画电影你看过几部?
2020/04/09 欧美动漫
PHP中mb_convert_encoding与iconv函数的深入解析
2013/06/21 PHP
PHP的cURL库简介及使用示例
2015/02/06 PHP
PHP使用正则表达式获取微博中的话题和对象名
2015/07/18 PHP
php 魔术常量详解及实例代码
2016/12/04 PHP
ThinkPHP 模板substr的截取字符串函数详解
2017/01/09 PHP
利用phpexcel对数据库数据的导入excel(excel筛选)、导出excel
2017/04/27 PHP
PHP实现将优酷土豆腾讯视频html地址转换成flash swf地址的方法
2017/08/04 PHP
才发现的超链接js导致网页中GIF动画停止的解决方法
2007/11/02 Javascript
Javascript 遍历对象中的子对象
2009/07/03 Javascript
Array.prototype.slice 使用扩展
2010/06/09 Javascript
在Javascript里访问SharePoint列表数据的实现方法
2011/05/22 Javascript
基于jquery的手风琴图片展示效果实现方法
2014/12/16 Javascript
JavaScript实现列表分页功能特效
2015/05/15 Javascript
js实现简单锁屏功能实例
2015/05/27 Javascript
node.js中格式化数字增加千位符的几种方法
2015/07/03 Javascript
JavaScript截屏功能的实现代码
2017/07/28 Javascript
Three.js实现浏览器变动时进行自适应的方法
2017/09/26 Javascript
vue.js实现三级菜单效果
2019/10/19 Javascript
jquery实现点击弹出对话框
2020/02/08 jQuery
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
2020/08/14 Javascript
零基础写python爬虫之urllib2使用指南
2014/11/05 Python
python图像处理之镜像实现方法
2015/05/30 Python
Python实现对象转换为xml的方法示例
2017/06/08 Python
python使用adbapi实现MySQL数据库的异步存储
2019/03/19 Python
Python3 使用selenium插件爬取苏宁商家联系电话
2019/12/23 Python
python3用urllib抓取贴吧邮箱和QQ实例
2020/03/10 Python
python批量提取图片信息并保存的实现
2021/02/05 Python
css3闪亮进度条效果实现思路及代码
2013/04/17 HTML / CSS
h5网页水印SDK的实现代码示例
2019/02/19 HTML / CSS
英国和国际包裹递送:ParcelCompare
2019/08/26 全球购物
什么是封装
2013/03/26 面试题
服装设计专业毕业生推荐信
2013/11/09 职场文书
销售简历自我评价
2014/01/24 职场文书
2014年五四青年节活动方案
2014/03/29 职场文书
css如何把元素固定在容器底部的四种方式
2022/06/16 HTML / CSS