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 相关文章推荐
jquery简单体验
Jan 10 Javascript
javascript Base类 包含基本的方法
Jul 22 Javascript
jQuery中outerWidth()方法用法实例
Jan 19 Javascript
Javascript连接Access数据库完整实例
Aug 03 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
Oct 31 Javascript
jQuery Raty 一款不错的星级评分插件
Aug 24 Javascript
详解js几个绕不开的事件兼容写法
Aug 30 Javascript
angular6的table组件开发的实现示例
Dec 26 Javascript
JavaScript变速动画函数封装添加任意多个属性
Apr 03 Javascript
angularjs1.X 重构controller 的方法小结
Aug 15 Javascript
在layui框架中select下拉框监听更改事件的例子
Sep 20 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
Jan 14 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 SQL Injection with MySQL
2011/02/27 PHP
Parse正式发布开源PHP SDK
2014/08/11 PHP
PHP导出Excel实例讲解
2016/01/24 PHP
thinkphp中的多表关联查询的实例详解
2017/10/12 PHP
niceTitle 基于jquery的超链接提示插件
2010/05/31 Javascript
使用jquery动态加载javascript以减少服务器压力
2012/10/29 Javascript
jquery实现的图片点击滚动效果
2014/04/29 Javascript
js返回前一页刷新本页重载页面
2014/07/29 Javascript
js Calender控件使用详解
2015/01/05 Javascript
编写自己的jQuery提示框(Tip)插件
2015/02/05 Javascript
JavaScript变量类型以及变量作用域详解
2017/08/14 Javascript
JS模拟实现哈希表及应用详解
2018/05/04 Javascript
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
2018/08/19 Javascript
浅谈vue 单文件探索
2018/09/05 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
2019/05/15 Javascript
[06:25]DOTA2英雄梦之声_第17期_大地之灵
2014/06/20 DOTA
[01:09:16]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第一场 1月25日
2021/03/11 DOTA
Python利用pyHook实现监听用户鼠标与键盘事件
2014/08/21 Python
Python实现简单状态框架的方法
2015/03/19 Python
Python有序查找算法之二分法实例分析
2017/12/11 Python
彻底搞懂Python字符编码
2018/01/23 Python
flask中的wtforms使用方法
2018/07/21 Python
python实现在遍历列表时,直接对dict元素增加字段的方法
2019/01/15 Python
使用pyqt 实现重复打开多个相同界面
2019/12/13 Python
Python自动化测试基础必备知识点总结
2021/02/07 Python
htmlentities() 和 htmlspecialchars()有什么区别
2015/07/01 面试题
大学生毕业自我鉴定范文
2014/02/03 职场文书
竞选班长自荐书范文
2014/03/09 职场文书
潘婷洗发水广告词
2014/03/14 职场文书
小学英语课后反思
2014/04/26 职场文书
预备党员公开承诺书
2014/05/28 职场文书
广告艺术设计专业自荐书
2014/07/08 职场文书
幼儿园小班教育随笔
2015/08/14 职场文书
Python办公自动化PPT批量转换操作
2021/09/15 Python
浅谈 JavaScript 沙箱Sandbox
2021/11/02 Javascript
Python进程间的通信之语法学习
2022/04/11 Python