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 相关文章推荐
location.search在客户端获取Url参数的方法
Jun 08 Javascript
jQuery EasyUI API 中文文档 - DataGrid数据表格
Nov 17 Javascript
鼠标焦点离开文本框时验证的js代码
Jul 19 Javascript
固定网页背景图同时保持图片比例的思路代码
Aug 15 Javascript
jQuery中prev()方法用法实例
Jan 08 Javascript
ES6记录异步函数的执行时间详解
Aug 31 Javascript
Vue.js基础学习之class与样式绑定
Mar 20 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
Mar 28 Javascript
微信小程序云开发之云函数详解
May 16 Javascript
通过js随机函数Math.random实现乱序
May 19 Javascript
Vue封装Axios请求和拦截器的步骤
Sep 16 Javascript
一文帮你理解PReact10.5.13源码
Apr 03 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
不支持fsockopen但支持culr环境下下ucenter与modoer通讯问题
2011/08/12 PHP
PHP网络操作函数汇总
2015/05/18 PHP
Laravel实现自定义错误输出内容的方法
2016/10/10 PHP
phpwind放自动注册方法
2006/12/02 Javascript
javascript或asp实现的判断身份证号码是否正确两种验证方法
2009/11/26 Javascript
js常用代码段整理
2011/11/30 Javascript
JavaScript控制Session操作方法
2013/01/17 Javascript
jQuery常用操作方法及常用函数总结
2014/06/19 Javascript
JavaScript获取网页表单提交方式的方法
2015/04/02 Javascript
JavaScript开发者必备的10个Sublime Text插件
2016/02/27 Javascript
基于javascript制作微信聊天面板
2020/08/09 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
2016/05/19 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
2016/09/04 Javascript
ES6新特性三: Generator(生成器)函数详解
2017/04/21 Javascript
小程序开发之模态框组件封装
2020/04/23 Javascript
使用JavaScript获取Django模板指定键值数据
2020/05/27 Javascript
基于ajax及jQuery实现局部刷新过程解析
2020/09/12 jQuery
[00:12]2018DOTA2亚洲邀请赛SOLO赛 MidOne是否中单第一人?
2018/04/05 DOTA
[38:39]完美世界DOTA2联赛循环赛 IO vs GXR BO2第二场 11.04
2020/11/05 DOTA
[01:25:38]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第一场 1月19日
2021/03/11 DOTA
跟老齐学Python之集合的关系
2014/09/24 Python
python实现简单socket程序在两台电脑之间传输消息的方法
2015/03/13 Python
python中常用的九种预处理方法分享
2016/09/11 Python
Python解析json之ValueError: Expecting property name enclosed in double quotes: line 1 column 2(char 1)
2017/07/06 Python
python3 打开外部程序及关闭的示例
2018/11/06 Python
css3 伪元素和伪类选择器详解
2014/09/04 HTML / CSS
CSS3按钮鼠标悬浮实现光圈效果源码
2016/09/11 HTML / CSS
Html5之svg可缩放矢量图形_动力节点Java学院整理
2017/07/17 HTML / CSS
Fossil德国官网:化石手表、手袋、珠宝及配件
2019/12/07 全球购物
法人授权委托书格式
2014/04/08 职场文书
高中学生自我评价范文
2014/09/23 职场文书
个人查摆剖析材料
2014/10/16 职场文书
个人年度总结报告
2015/03/09 职场文书
通知书大全
2015/04/27 职场文书
Java 获取Word中所有的插入和删除修订的方法
2022/04/06 Java/Android
vue项目配置sass及引入外部scss文件
2022/04/14 Vue.js