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导致网页中GIF动画停止的解决方法
Nov 02 Javascript
创建一个复制UBB软件信息的链接或按钮的js代码
Jan 06 Javascript
获取当前网页document.url location.href区别总结
May 10 Javascript
jquery.validate使用攻略 第三部
Jul 01 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
Dec 24 Javascript
Nginx 配置多站点vhost 的方法
Jan 07 Javascript
vue路由懒加载的实现方法
Mar 12 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
Aug 12 Javascript
JS/CSS实现字符串单词首字母大写功能
Sep 03 Javascript
swiper Scrollbar滚动条组件详解
Sep 08 Javascript
jQuery中event.target和this的区别详解
Aug 13 jQuery
vue项目中使用rem,在入口文件添加内容操作
Nov 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
索尼SONY SRF-S83/84电路分析和打磨
2021/03/02 无线电
MySQL相关说明
2007/01/15 PHP
PHP的SQL注入实现(测试代码安全不错)
2011/02/27 PHP
详解阿里云视频直播PHP-SDK接入教程
2020/07/09 PHP
ThinkPHP6.0如何利用自定义验证规则规范的实现登陆
2020/12/16 PHP
jQuery Validation插件remote验证方式的Bug解决
2010/07/01 Javascript
JQuery里选择超链接的实现代码
2011/05/22 Javascript
浅谈JavaScript字符集
2014/05/22 Javascript
avalon js实现仿微博拖动图片排序
2015/08/14 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
2016/08/01 Javascript
AngularJS基础 ng-include 指令示例讲解
2016/08/01 Javascript
JavaScript中子对象访问父对象的方式详解
2016/09/01 Javascript
解析微信JS-SDK配置授权,实现分享接口
2016/12/09 Javascript
vue.js学习之递归组件
2016/12/13 Javascript
Vue使用vue-cli创建项目
2017/09/01 Javascript
微信小程序云开发详细教程
2019/05/16 Javascript
解决一个微信号同时支持多个环境网页授权问题
2019/08/07 Javascript
从源码角度来回答keep-alive组件的缓存原理
2021/01/18 Javascript
[13:38]2015国际邀请赛中国战队出征仪式
2015/05/29 DOTA
Python的Django中将文件上传至七牛云存储的代码分享
2016/06/03 Python
Python的时间模块datetime详解
2017/04/17 Python
python扫描proxy并获取可用代理ip的实例
2017/08/07 Python
python opencv 图像边框(填充)添加及图像混合的实现方法(末尾实现类似幻灯片渐变的效果)
2020/03/09 Python
解决reload(sys)后print失效的问题
2020/04/25 Python
通俗易懂了解Python装饰器原理
2020/09/17 Python
打造经典复古风格的品牌:Alice + Olivia(爱丽丝+奥利维亚)
2016/09/07 全球购物
美国宠物用品网站:Value Pet Supplies
2018/03/17 全球购物
介绍一下.NET构架下remoting和webservice
2014/05/08 面试题
机械设计毕业生自荐信
2014/02/02 职场文书
事业单位考核材料
2014/05/21 职场文书
企业员工爱岗敬业演讲稿
2014/08/26 职场文书
防邪知识进家庭活动方案
2014/08/26 职场文书
招商引资工作汇报材料
2014/10/28 职场文书
2019年大学推荐信
2019/06/24 职场文书
Windows下redis下载、redis安装及使用教程
2021/06/02 Redis
通过shell脚本对mysql的增删改查及my.cnf的配置
2021/07/07 MySQL