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 相关文章推荐
js验证表单第二部分
Nov 25 Javascript
JavaScript中的普通函数与构造函数比较
Apr 07 Javascript
JS获取鼠标坐标位置实例分析
Jan 20 Javascript
AngularJS 工作原理详解
Aug 18 Javascript
BootStrap Validator使用注意事项(必看篇)
Sep 28 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
Feb 15 Javascript
underscore之function_动力节点Java学院整理
Jul 11 Javascript
vue 不使用select实现下拉框功能(推荐)
May 17 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
May 02 Javascript
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
Aug 14 Javascript
vue 修改 data 数据问题并实时显示操作
Sep 07 Javascript
解决vue2中使用elementUi打包报错的问题
Sep 22 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下几个常用的去空、分组、调试数组函数
2009/02/22 PHP
PHP 页面跳转到另一个页面的多种方法方法总结
2009/07/07 PHP
php后台程序与Javascript的两种交互方式
2009/10/25 PHP
PHP的关于变量和日期处理的一些面试题目整理
2015/08/10 PHP
PHP中的静态变量及static静态变量使用详解
2015/11/05 PHP
php获取今日开始时间和结束时间的方法
2017/02/27 PHP
php判断目录存在的简单方法
2019/09/26 PHP
PHP7.0连接DB操作实例分析【基于mysqli】
2019/09/26 PHP
动态改变textbox的宽高的js
2006/10/26 Javascript
封装好的一个万能检测表单的方法
2015/01/21 Javascript
JavaScript中使用Math.floor()方法对数字取整
2015/06/15 Javascript
微信小程序使用第三方库Immutable.js实例详解
2016/09/27 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
2016/12/13 Javascript
完美解决input[type=number]无法显示非数字字符的问题
2017/02/28 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
2017/08/10 Javascript
详解http访问解析流程原理
2017/10/18 Javascript
vue.js数据绑定操作详解
2018/04/23 Javascript
vue脚手架搭建项目的兼容性配置详解
2018/07/17 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
2019/09/03 Javascript
pandas数值计算与排序方法
2018/04/12 Python
python学生信息管理系统(完整版)
2020/04/05 Python
对python3中, print横向输出的方法详解
2019/01/28 Python
对python For 循环的三种遍历方式解析
2019/02/01 Python
Python实现的远程文件自动打包并下载功能示例
2019/07/12 Python
Django中的session用法详解
2020/03/09 Python
探讨HTML5移动开发的几大特性(必看)
2015/12/30 HTML / CSS
意大利团购网站:Groupon意大利
2016/10/11 全球购物
澳大利亚礼品卡商店:Gift Card Store
2019/06/24 全球购物
英国领先的高级美容和在线皮肤诊所:Face the Future
2020/06/17 全球购物
linux比较文件内容的命令是什么
2013/03/04 面试题
上学迟到的检讨书
2014/01/11 职场文书
销售员个人求职的自我评价
2014/02/10 职场文书
核心价值观演讲稿
2014/05/13 职场文书
电影红河谷观后感
2015/06/11 职场文书
CSS布局之浮动(float)和定位(position)属性的区别
2021/09/25 HTML / CSS
Win11 25163.1010更新补丁KB5016904推送,测试服务验证管道(附更新修复汇总)
2022/07/23 数码科技