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操作textarea 常用方法总结
Dec 03 Javascript
滚动图片效果 jquery实现回旋滚动效果
Jan 08 Javascript
js中把JSON字符串转换成JSON对象最好的方法
Mar 21 Javascript
Angularjs 基础入门
Dec 26 Javascript
JavaScript中的对象的extensible属性介绍
Dec 30 Javascript
jQuery基础知识点总结(必看)
May 31 Javascript
微信小程序 条件渲染详解
Oct 09 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
Nov 18 Javascript
jQuery实现字符串全部替换的方法
Dec 12 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
May 02 Javascript
网页中的图片查看器viewjs使用方法
Jul 11 Javascript
原生JavaScript实现拖动校验功能
Sep 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
sphinx增量索引的一个问题
2011/06/14 PHP
php cURL和Rolling cURL并发方式比较
2013/10/30 PHP
PHP中rename()函数的妙用讲解
2019/02/28 PHP
学习jquery之一
2007/04/27 Javascript
jquery 图片轮换效果
2010/07/29 Javascript
MooBox 基于Mootools的对话框插件
2012/01/20 Javascript
Egret引擎开发指南之编译项目
2014/09/03 Javascript
jQuery中index()的用法分析
2014/09/05 Javascript
JavaScript解析json格式数据简单示例
2014/12/09 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
使用mouse事件实现简单的鼠标经过特效
2015/01/30 Javascript
深入浅析react native es6语法
2015/12/09 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
2016/02/18 Javascript
JS封装的自动创建表格的实现代码
2016/06/15 Javascript
浅谈jquery页面初始化的4种方式
2016/11/27 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
2017/01/17 Javascript
jQuery序列化后的表单值转换成Json
2017/06/16 jQuery
JavaScript数组去重算法实例小结
2018/05/07 Javascript
微信小程序实现底部导航
2018/11/05 Javascript
JS防抖和节流实例解析
2019/09/24 Javascript
微信小程序 行的删除和增加操作实现详解
2019/09/29 Javascript
python实现代码行数统计示例分享
2014/02/10 Python
Python多进程通信Queue、Pipe、Value、Array实例
2014/11/21 Python
python实现ID3决策树算法
2018/08/29 Python
Python3 max()函数基础用法
2019/02/19 Python
Python调用钉钉自定义机器人的实现
2020/01/03 Python
python 自动识别并连接串口的实现
2021/01/19 Python
英国领先的电视购物零售商:Ideal World
2019/03/18 全球购物
美国领先的机场停车聚合商:Airport Parking Reservations
2020/02/28 全球购物
中专生职业生涯规划书范文
2013/12/29 职场文书
中学生检讨书1000字
2014/10/28 职场文书
标准离婚协议书范文下载
2014/11/30 职场文书
技术支持岗位职责
2015/02/13 职场文书
辞职信格式模板
2015/02/27 职场文书
在Windows下安装配置CPU版的PyTorch的方法
2021/04/02 Python
js中Map和Set的用法及区别实例详解
2022/02/15 Javascript