Javascript继承机制详解


Posted in Javascript onMay 30, 2017

学完了Javascript类和对象的创建之后,现在总结一下Javascript继承机制的实现。Javascript并不像Java那样对继承机制有严格明确的定义,它的实现方式正如它的变量的使用方式那样也是十分宽松的,你可以设计自己的方法“模仿”继承机制的实现。有以下几种方法:

1、对象冒充

<script type="text/javascript">
   function classA(str){
     this.str=str;
     this.printstr=function(){
       document.write(this.str);
       document.write("<br>");
     }
     this.getstr=function(){
       return this.str;
     }    
   }
   function classB(name,str){
     //下面这两句代码相当于将classA代码体中的内容搬到这里
     this.newMethod1=classA;
     this.newMethod1(str);
     //注意,这里的写法
     delete this.newMethod1;
     //新的方法和属性的定义须在删除了newMethod之后定义,因为可能覆盖超类的属性和方法。
     this.name=name;
     this.sayName=function(){
       document.write(this.name);
       document.write("<br>");
     }
     
   }
   var a=new classB("Amy","helloworld");
   a.printstr();
   alert(a.getstr());
   a.sayName();
 </script>

function定义的代码块就相当于一个类,你可以用而且它有this关键字,你可以用this为它添加属性和方法,上述代码中有以下两句:

this.newMethod1=classA;
 this.newMethod1(str);

classB中定义了newMethod1变量,它是一个引用,指向了classA,并且还调用了classA,这两句代码的作用等同于直接将classA代码块中的内容直接复制到这里,这样创建的classB对像当然具有classA的属性和方法了。对象冒充还可以实现多继承,如下:

function ClassZ() {
 this.newMethod = ClassX;
 this.newMethod();
 delete this.newMethod;

this.newMethod = ClassY;
 this.newMethod();
 delete this.newMethod;
}

不过,classY会覆盖classX中同名的属性和方法,如果设计没问题的话,classz也不应该继承具有相同属性和方法的不同类。

2、利用call()方法

<script type="text/javascript">
   function classA(str){
     this.str=str;
     this.printstr=function(){
       document.write(this.str);
       document.write("<br>");
     }
     this.getstr=function(){
       return this.str;
     }    
   }
   function classB(name,str){
   //利用call方法实现继承
     classA.call(this,str);
     this.name=name;
     this.sayName=function(){
       document.write(this.name);
       document.write("<br>");
     }
     
   }
   var a=new classB("Amy","helloworld");
   a.printstr();
   alert(a.getstr());
   a.sayName();
 </script>

call()方法中第一个参数传递一个对象,这里的this指的是当前对象,后面的参数(可能有多个)是指传递给调用call()方法的类(函数)所需要的参数,classA.call()也是相当于直接将classA代码块中的内容直接复制到这里,classB的对象同样可以直接使用classB中的变量和方法。

3、原型链

<script type="text/javascript">
   function cA(){};
   cA.prototype.name="John";
   cA.prototype.sayName=function(){
     document.write(this.name);
     document.write("<br>");
   }
   function cB(){};
   cB.prototype=new cA();
   cB.prototype.age=23;
   cB.prototype.sayAge=function(){
     document.write(this.age);
     document.write("<br>");
   }
   var objB=new cB();
   objB.sayAge();
   objB.sayName();
   document.write("is objB the instance of cA "+(objB instanceof cA));
   document.write("<br>");
   document.write("is objB the instance of cB "+(objB instanceof cB));
   document.write("<br>");
 </script>

这里对类的定义要用prototype关键字,定义function时不带有参数,prototype后面的变量或方法相当于java中被static修饰后的属性和方法,是属于所有对象的,这里有个特殊之处:cB.prototype=new cA();该句话相当于将cA对象内容复制给cB,cB还可以追加自己的属性和方法。

4、混合方法

<script type="text/javascript">
   function cA(name){
     this.name=name;
   };
   cA.prototype.sayName=function(){
     document.write(this.name);
     document.write("<br>");
   }
   function cB(name,age){
     cA.call(this,name);
     this.age=age;
   };
   cB.prototype=new cA();
   cB.prototype.sayAge=function(){
     document.write(this.age);
     document.write("<br>");
   }
   var objB=new cB("Alan",27);
   objB.sayName();
   objB.sayAge();
   document.write("is objB the instance of cA "+(objB instanceof cA));
   document.write("<br>");
   document.write("is objB the instance of cB "+(objB instanceof cB));
   document.write("<br>");
 </script>

这里可以将属性封装在类体内,而方法利用原型方式定义,个人感觉,这是一个很好的设计方法,利用prototype定义的函数可以为多个对象重用,这里需要注意两点:cB类体内有cA.call(this,name);同时还要将cB原型赋为cB对象,即:cB.prototype=new cA();cA.call(this,name)同样相当于将cA类块内的代码复制于此,后面一句话又将cA的方法添加给cB,同时cB还可以追加自己的属性和方法。

以上是本次对Javascript继承机制的总结,不足之处望各位指正批评。

Javascript 相关文章推荐
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
Apr 21 Javascript
单击按钮显示隐藏子菜单经典案例
Jan 04 Javascript
js二维数组定义和初始化的三种方法总结
Mar 03 Javascript
创建你的第一个AngularJS应用的方法
Jun 16 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
Aug 11 Javascript
JavaScript实现非常简单实用的下拉菜单效果
Aug 27 Javascript
微信企业号开发之微信考勤百度地图定位
Sep 11 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
Sep 12 Javascript
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
javascript帧动画(实例讲解)
Sep 02 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
Oct 11 Javascript
Postman如何实现参数化执行及断言处理
Jul 28 Javascript
Vue2.x中的Render函数详解
May 30 #Javascript
jQuery实现动态删除LI的方法
May 30 #jQuery
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
May 30 #Javascript
JS给按钮添加跳转功能类似a标签
May 30 #Javascript
jQuery异步提交表单实例
May 30 #jQuery
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
May 30 #Javascript
Angularjs中使用轮播图指令swiper
May 30 #Javascript
You might like
php cookis创建实现代码
2009/03/16 PHP
PHP发明人谈MVC和网站设计架构 貌似他不支持php用mvc
2011/06/04 PHP
大家都应该掌握的PHP关联数组使用技巧
2015/12/25 PHP
JQuery的html(data)方法与&amp;lt;script&amp;gt;脚本块的解决方法
2010/03/09 Javascript
基于Jquery的标签智能验证实现代码
2010/12/27 Javascript
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
2013/04/15 Javascript
解析window.open的使用方法总结
2013/06/19 Javascript
Egret引擎开发指南之视觉编程
2014/09/03 Javascript
javascript中传统事件与现代事件
2015/06/23 Javascript
JS+CSS实现六级网站导航主菜单效果
2015/09/28 Javascript
js文本框输入内容智能提示效果
2015/12/02 Javascript
JavaScript进阶练习及简单实例分析
2016/06/03 Javascript
JavaScript中获取HTML元素值的三种方法
2016/06/20 Javascript
laydate时间日历插件使用方法详解
2018/11/14 Javascript
Vue.js 中的实用工具方法【推荐】
2019/07/04 Javascript
使用typescript构建Vue应用的实现
2019/08/26 Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
2019/08/28 Javascript
es6 super关键字的理解与应用实例分析
2020/02/15 Javascript
vue项目中播放rtmp视频文件流的方法
2020/09/17 Javascript
[34:44]Liquid vs TNC Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
[59:15]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.20
2020/11/20 DOTA
python获取从命令行输入数字的方法
2015/04/29 Python
用python记录运行pid,并在需要时kill掉它们的实例
2017/01/16 Python
python使用pil库实现图片合成实例代码
2018/01/20 Python
python通过配置文件共享全局变量的实例
2019/01/11 Python
谷歌浏览器小字体处理方案即12px以下字体
2013/12/17 HTML / CSS
HTML5拖拽API经典实例详解
2018/04/20 HTML / CSS
艺术设计专业个人求职信
2013/09/21 职场文书
暖通工程师岗位职责
2014/06/12 职场文书
知识就是力量演讲稿
2014/09/13 职场文书
超市开业庆典活动策划方案
2014/09/15 职场文书
项目技术负责人岗位职责
2015/04/13 职场文书
宣传部部长竞选稿
2015/11/21 职场文书
《好妈妈胜过好老师》:每个孩子的优秀都是有源头的
2020/01/03 职场文书
2021年国产动漫公司排行前十名,玄机科技上榜,第二推出过铠甲勇士
2022/03/18 杂记
Python+Pillow+Pytesseract实现验证码识别
2022/05/11 Python