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 相关文章推荐
event对象获取方法总结在google浏览器下测试
Nov 03 Javascript
Jquery操作Ajax方法小结
Nov 29 Javascript
再谈JavaScript异步编程
Jan 27 Javascript
js仿淘宝和百度文库的评分功能
May 15 Javascript
关于function类中定义变量this的简单说明
May 28 Javascript
javascript简单实现等比例缩小图片的方法
Jul 27 Javascript
jQuery监听浏览器窗口大小的变化实例
Feb 07 Javascript
Bootstrap模态框插入视频的实现代码
Jun 25 Javascript
vue如何安装使用Quill富文本编辑器
Sep 21 Javascript
JS求1到任意数之间的所有质数的方法详解
May 20 Javascript
p5.js实现动态图形临摹
Oct 23 Javascript
vue引入静态js文件的方法
Jun 20 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中文本数据翻页(留言本翻页)
2006/10/09 PHP
判“新”函数:得到今天与明天的秒数
2006/10/09 PHP
php 攻击方法之谈php+mysql注射语句构造
2009/10/30 PHP
PHP数组交集的优化代码分析
2011/03/06 PHP
Symfony数据校验方法实例分析
2015/01/26 PHP
PHP使用gmdate实现将一个UNIX 时间格式化成GMT文本的方法
2015/03/19 PHP
Ubuntu server 11.04安装memcache及php使用memcache来存储session的方法
2016/05/31 PHP
Zend Framework过滤器Zend_Filter用法详解
2016/12/09 PHP
php实现的简单中文验证码功能示例
2017/01/03 PHP
jquery1.5.1中根据元素ID获取元素对象的代码
2011/04/02 Javascript
js静态方法与实例方法分析
2011/07/04 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
2015/02/28 Javascript
Winform客户端向web地址传参接收参数的方法
2016/05/17 Javascript
jquery遍历json对象集合详解
2016/05/18 Javascript
Bootstrap Validator 表单验证
2016/07/25 Javascript
Javascript动画效果(1)
2016/10/11 Javascript
vue2.0构建单页应用最佳实战
2017/04/01 Javascript
详解webpack编译多页面vue项目的配置问题
2017/12/11 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
2018/01/25 Javascript
在vue中实现点击选择框阻止弹出层消失的方法
2018/09/15 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
2018/11/29 Javascript
原生javascript制作贪吃蛇小游戏的方法分析
2020/02/26 Javascript
Vue路由 重定向和别名的区别说明
2020/09/09 Javascript
Python只用40行代码编写的计算器实例
2017/05/10 Python
python搭建服务器实现两个Android客户端间收发消息
2018/04/12 Python
np.newaxis 实现为 numpy.ndarray(多维数组)增加一个轴
2019/11/30 Python
Python+OpenCV 实现图片无损旋转90°且无黑边
2019/12/12 Python
python列表推导和生成器表达式知识点总结
2020/01/10 Python
python连接mongodb集群方法详解
2020/02/13 Python
Django调用支付宝接口代码实例详解
2020/04/04 Python
如何利用python正则表达式匹配版本信息
2020/12/09 Python
客户服务经理岗位职责
2014/01/29 职场文书
2014年青年教师工作总结
2014/12/17 职场文书
如何使用分区处理MySQL的亿级数据优化
2021/06/18 MySQL
解决SpringCloud Feign传对象参数调用失败的问题
2021/06/23 Java/Android
详细聊聊vue中组件的props属性
2021/11/02 Vue.js