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 相关文章推荐
什么是JavaScript
Aug 13 Javascript
网站404页面3秒后跳到首页的实例代码
Aug 16 Javascript
jQuery判断一个元素是否可见的方法
Jun 05 Javascript
jQuery实现自动调整字体大小的方法
Jun 15 Javascript
javascript数组克隆简单实现方法
Dec 16 Javascript
jQuery简单操作cookie的插件实例
Jan 13 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
Sep 17 Javascript
基于axios封装fetch方法及调用实例
Feb 05 Javascript
chosen实现省市区三级联动
Aug 16 Javascript
利用React Router4实现的服务端直出渲染(SSR)
Jan 07 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
Jan 21 Javascript
使用p5.js实现动态GIF图片临摹重现
Oct 23 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
全国FM电台频率大全 - 6 辽宁省
2020/03/11 无线电
yii,CI,yaf框架+smarty模板使用方法
2015/12/29 PHP
PHP 获取 ping 时间的实现方法
2017/09/29 PHP
PHP实现QQ登录的开原理和实现过程
2018/02/04 PHP
PHP与Web页面的交互示例详解一
2020/08/04 PHP
PHP并发场景的三种解决方案代码实例
2021/02/27 PHP
比较搞笑的js陷阱题
2010/02/07 Javascript
关于COOKIE个数与大小的问题
2011/01/17 Javascript
jQuery学习笔记 操作jQuery对象 文档处理
2012/09/19 Javascript
js+数组实现网页上显示时间/星期几的实用方法
2013/01/18 Javascript
Jquery中&quot;$(document).ready(function(){ })&quot;函数的使用详解
2013/12/30 Javascript
9款2014最热门jQuery实用特效推荐
2014/12/07 Javascript
nodejs批量修改文件编码格式
2015/01/22 NodeJs
JS实现的在线调色板实例(附demo源码下载)
2016/03/01 Javascript
浅谈JavaScript的内置对象和浏览器对象
2016/06/03 Javascript
微信小程序进行微信支付的步骤昂述
2016/12/01 Javascript
巧用Javascript的逻辑运算符
2016/12/02 Javascript
快速实现jQuery多级菜单效果
2017/02/01 Javascript
Bootstrap笔记之缩略图、警告框实例详解
2017/03/09 Javascript
Javascript中的getter和setter初识
2017/08/17 Javascript
Three.js利用性能插件stats实现性能监听的方法
2017/09/25 Javascript
微信小程序之事件交互操作实例分析
2018/12/03 Javascript
vue+elementUI实现表格关键字筛选高亮
2020/10/26 Javascript
微信小程序如何加载数据库真实数据的实现
2020/03/04 Javascript
react 不用插件实现数字滚动的效果示例
2020/04/14 Javascript
探寻python多线程ctrl+c退出问题解决方案
2014/10/23 Python
怎么使用pipenv管理你的python项目
2018/03/12 Python
十分钟搞定pandas(入门教程)
2019/06/21 Python
css3 transform及原生js实现鼠标拖动3D立方体旋转
2016/06/20 HTML / CSS
SIXPAD智能健身仪英国官网:革命性的训练装备品牌
2018/09/27 全球购物
Otticanet意大利:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
销售顾问的岗位职责
2013/11/13 职场文书
标准化管理实施方案
2014/02/25 职场文书
2014年教师党员公开承诺书
2014/05/28 职场文书
销售员工作检讨书(推荐篇)
2014/10/18 职场文书
专家推荐信怎么写
2015/03/25 职场文书