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获取图片大小的函数代码
Sep 20 Javascript
JavaScript实现网页上的浮动广告的简单方法
Jun 14 Javascript
Javascript中3种实现继承的方法和代码实例
Aug 12 Javascript
JQuery+CSS实现图片上放置按钮的方法
May 29 Javascript
浅谈JavaScript字符串拼接
Jun 25 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
Jan 08 Javascript
jQuery实现伪分页的方法分享
Feb 17 Javascript
Angular2实现组件交互的方法分析
Dec 19 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
Jul 13 Javascript
es6数组之扩展运算符操作实例分析
Apr 25 Javascript
js实现随机点名器精简版
Jun 29 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
Sep 11 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 巧用数组降低程序的时间复杂度
2010/01/01 PHP
php字符编码转换之gb2312转为utf8
2013/10/28 PHP
Yii学习总结之安装配置
2015/02/22 PHP
非常重要的php正则表达式详解
2016/01/04 PHP
php设计模式之委托模式
2016/02/13 PHP
jquery 1.4.2发布!主要是性能与API
2010/02/25 Javascript
Exjs 入门篇
2010/04/07 Javascript
来自qq的javascript面试题
2010/07/24 Javascript
用jquery修复在iframe下的页面锚点失效问题
2014/08/22 Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
2016/07/25 Javascript
整理关于Bootstrap过渡动画的慕课笔记
2017/03/29 Javascript
利用jQuery解析获取JSON数据
2017/04/08 jQuery
JS全角与半角转化实例(分享)
2017/07/04 Javascript
Angular.js中$resource高大上的数据交互详解
2017/07/30 Javascript
vue 中滚动条始终定位在底部的方法
2018/09/03 Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
2019/04/15 Javascript
基于JavaScript实现留言板功能
2020/03/16 Javascript
MySQL最常见的操作语句小结
2015/05/07 Python
Python中的错误和异常处理简单操作示例【try-except用法】
2017/07/25 Python
在CentOS6上安装Python2.7的解决方法
2018/01/09 Python
python ddt实现数据驱动
2018/03/14 Python
更换Django默认的模板引擎为jinja2的实现方法
2018/05/28 Python
一百多行python代码实现抢票助手
2018/09/25 Python
Tesserocr库的正确安装方式
2018/10/19 Python
Python爬虫实现获取动态gif格式搞笑图片的方法示例
2018/12/24 Python
详解Python用三种方式统计词频的方法
2019/07/29 Python
使用Tensorflow实现可视化中间层和卷积层
2020/01/24 Python
Python3打包exe代码2种方法实例解析
2020/02/17 Python
windows10 pycharm下安装pyltp库和加载模型实现语义角色标注的示例代码
2020/05/07 Python
Python小白学习爬虫常用请求报头
2020/06/03 Python
90后毕业生的求职信范文
2013/09/21 职场文书
安全生产管理合理化建议书
2014/03/12 职场文书
五水共治一句话承诺
2014/05/30 职场文书
法定授权委托证明书
2014/09/27 职场文书
创业计划书之外语培训班
2019/11/02 职场文书
nginx内存池源码解析
2021/11/20 Servers