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字符串操作总结(必看篇)
Nov 22 Javascript
jQuery仿写百度百科的目录树
Jan 03 Javascript
JS验证字符串功能
Feb 22 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
Jun 11 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
Jul 26 Javascript
vue使用keep-alive保持滚动条位置的实现方法
Apr 09 Javascript
详解Vue demo实现商品列表的展示
May 07 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
vue 使用axios 数据请求第三方插件的使用教程详解
Jul 05 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
Jul 10 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
Apr 09 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
Apr 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 增加了对 .ZIP 文件的读取功能
2006/10/09 PHP
一个程序下载的管理程序(四)
2006/10/09 PHP
php错误提示failed to open stream: HTTP request failed!的完美解决方法
2011/06/06 PHP
php session_start()出错原因分析及解决方法
2013/10/28 PHP
利用谷歌 Translate API制作自己的翻译脚本
2014/06/04 PHP
使用GDB调试PHP代码,解决PHP代码死循环问题
2015/03/02 PHP
详解PHP+AJAX无刷新分页实现方法
2015/11/03 PHP
php微信公众平台交互与接口详解
2016/11/28 PHP
云网广告中的代码,提示出错,大家找找
2006/11/21 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
2013/04/17 Javascript
一个简单的瀑布流效果(主体形式自写)
2013/05/27 Javascript
jquery对元素拖动排序示例
2014/01/16 Javascript
Bootstrap模态框(modal)垂直居中的实例代码
2016/08/18 Javascript
jquery 动态增加删除行的简单实例(推荐)
2016/10/12 Javascript
nodejs+express实现文件上传下载管理网站
2017/03/15 NodeJs
Angular通过angular-cli来搭建web前端项目的方法
2017/07/27 Javascript
又拍云 Node.js 实现文件上传、删除功能
2018/10/28 Javascript
Electron中实现大文件上传和断点续传功能
2018/10/28 Javascript
Vue中this.$nextTick的作用及用法
2020/02/04 Javascript
vue组件传值的实现方式小结【三种方式】
2020/02/05 Javascript
vue 使用localstorage实现面包屑的操作
2020/11/16 Javascript
Python判断操作系统类型代码分享
2014/11/22 Python
python MySQLdb Windows下安装教程及问题解决方法
2015/05/09 Python
Python序列化基础知识(json/pickle)
2017/10/19 Python
python使用pyqt写带界面工具的示例代码
2017/10/23 Python
Python登录注册验证功能实现
2018/06/18 Python
python使用epoll实现服务端的方法
2018/10/16 Python
修改python plot折线图的坐标轴刻度方法
2018/12/13 Python
Pandas的read_csv函数参数分析详解
2019/07/02 Python
Python基于Opencv来快速实现人脸识别过程详解(完整版)
2019/07/11 Python
Python for循环搭配else常见问题解决
2020/02/11 Python
Java ExcutorService优雅关闭方式解析
2020/05/30 Python
2014年图书馆工作总结
2014/11/25 职场文书
成本会计岗位职责
2015/02/03 职场文书
食堂采购员岗位职责
2015/04/03 职场文书
给朋友的赠语
2015/06/23 职场文书