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 相关文章推荐
Prototype Date对象 学习
Jul 12 Javascript
Mootools 1.2教程(3) 数组使用简介
Sep 14 Javascript
Jquery实现页面加载时弹出对话框代码
Apr 19 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
Oct 24 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
Dec 01 Javascript
灵活使用数组制作图片切换js实现
Jul 28 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
Nov 03 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
Nov 15 Javascript
一百行JS代码实现一个校验工具
Apr 30 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
Aug 26 Javascript
js中比较两个对象是否相同的方法示例
Sep 02 Javascript
如何用JS模拟实现数组的map方法
Jul 30 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
Home Coffee Roasting
2021/03/03 咖啡文化
php将数据库中所有内容生成静态html文档的代码
2010/04/12 PHP
PHP中一些可以替代正则表达式函数的字符串操作函数
2014/11/17 PHP
PHP向socket服务器收发数据的方法
2015/01/24 PHP
php文件上传的两种实现方法
2016/04/04 PHP
PHP HTTP 认证实例详解
2016/11/03 PHP
jquery 插件开发方法小结
2009/10/23 Javascript
jquery 图片 上一张 下一张 链接效果(续篇)
2010/04/20 Javascript
JQuery 在线引用及测试引用是否成功
2014/06/24 Javascript
每天一篇javascript学习小结(面向对象编程)
2015/11/20 Javascript
JavaScript中的闭包
2016/02/24 Javascript
JavaScript学习笔记之数组的增、删、改、查
2016/03/23 Javascript
web 前端常用组件之Layer弹出层组件
2016/09/22 Javascript
node基于async/await对mysql进行封装
2019/06/20 Javascript
Vue Element UI + OSS实现上传文件功能
2019/07/31 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
2020/08/11 Javascript
通过C++学习Python
2015/01/20 Python
详解Python中dict与set的使用
2015/08/10 Python
python动态加载包的方法小结
2016/04/18 Python
Python读csv文件去掉一列后再写入新的文件实例
2017/12/28 Python
Python实现输出某区间范围内全部素数的方法
2018/05/02 Python
django框架F&amp;Q 聚合与分组操作示例
2019/12/12 Python
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
2014/05/07 HTML / CSS
自考生自我鉴定范文
2013/10/01 职场文书
药物学专业学生的自我评价
2013/10/27 职场文书
幼儿园实习自我鉴定
2013/12/15 职场文书
社区中秋节活动方案
2014/01/29 职场文书
服务员岗位责任制
2014/02/11 职场文书
社会公德演讲稿
2014/05/20 职场文书
2014镇副书记群众路线专题民主生活会思想汇报
2014/09/23 职场文书
公路局群众路线教育实践活动第一阶段工作汇报
2014/10/25 职场文书
2014年大学生村官工作总结
2014/11/19 职场文书
2016年社会主义核心价值观心得体会
2016/01/21 职场文书
课文《燕子》教学反思
2016/02/17 职场文书
2016简单的租房合同范本
2016/03/18 职场文书
pytorch finetuning 自己的图片进行训练操作
2021/06/05 Python