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脚本编程解决考试分数统计问题
Oct 18 Javascript
JsDom 编程小结
Aug 09 Javascript
我的Node.js学习之路(四)--单元测试
Jul 06 Javascript
JavaScript中获取高度和宽度函数总结
Oct 08 Javascript
简单实现异步编程promise模式
Jul 31 Javascript
深入分析Javascript事件代理
Jan 30 Javascript
20分钟轻松创建自己的Bootstrap站点
May 12 Javascript
为你的微信小程序体积瘦身详解
May 20 Javascript
详解Vue使用命令行搭建单页面应用
May 24 Javascript
实现div滚动条默认最底部以及默认最右边的示例代码
Nov 15 Javascript
解决layui中的form表单与button的点击事件冲突问题
Aug 15 Javascript
简单了解JavaScript arguement原理及作用
May 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
真正的ZIP文件操作类(php)
2007/07/21 PHP
php date与gmdate的获取日期的区别
2010/02/08 PHP
php网站来路获取代码(针对搜索引擎)
2010/06/08 PHP
php中如何防止表单的重复提交
2013/08/02 PHP
深入解析PHP的Laravel框架中的event事件操作
2016/03/21 PHP
PHP简单操作MongoDB的方法(安装及增删改查)
2016/05/26 PHP
用prototype实现的简单小巧的多级联动菜单
2007/03/24 Javascript
JavaScript的Cookies
2008/01/16 Javascript
jquery json 实例代码
2010/12/02 Javascript
JavaScript实现url地址自动检测并添加URL链接示例代码
2013/11/12 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
2013/11/27 Javascript
Jquery解析Json格式数据过程代码
2014/10/17 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
2015/01/23 Javascript
Redis基本知识、安装、部署、配置笔记
2015/03/05 Javascript
jQuery实现html元素拖拽
2015/07/21 Javascript
JS中如何实现复选框全选功能
2016/12/19 Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
2017/08/16 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
2020/06/17 Javascript
JS实现显示当前日期的实例代码
2018/07/03 Javascript
微信小程序实现手势滑动卡片效果
2019/08/26 Javascript
python实现汉诺塔算法
2021/03/01 Python
Django restframework 源码分析之认证详解
2019/02/22 Python
PyQt5 QTableView设置某一列不可编辑的方法
2019/06/25 Python
django admin后管定制-显示字段的实例
2020/03/11 Python
Python pip install之SSL异常处理操作
2020/09/03 Python
android面试问题与答案
2016/12/27 面试题
Oracle性能调优原则
2012/05/03 面试题
工程业务员工作职责
2013/12/07 职场文书
中专三年学习的个人自我评价
2013/12/12 职场文书
大学生最新职业生涯规划书范文
2014/01/12 职场文书
临床护士自荐信
2014/01/31 职场文书
教师专业自荐书范文
2014/02/10 职场文书
交通事故和解协议书
2015/01/27 职场文书
python本地文件服务器实例教程
2021/05/02 Python
Python基于百度API识别并提取图片中文字
2021/06/27 Python
企业开发CSS命名BEM代码规范实践
2022/02/12 HTML / CSS