JavaScript中模拟实现类似于Java的super关键字调用父类中同名方法
2015-01-06 17:45
746 查看
在JavaScript中模拟实现Java中的super关键字调用父类:
第一种方式(官方正统):
第二种方式(个人实验):在子类中出现和父类同名的方法时,如果我们想要重用父类同名方法中的逻辑,就将子类中的方法定义为实例方法,而不是在子类的prototype属性上添加该方法。这样在子类的同名实例方法中采用“子类名.prototype.父类同名方法名”可以模拟实现Java中的super()。
第一种方式(官方正统):
(function(){ <span style="white-space:pre"> </span> <span style="white-space:pre"> </span>function SuperClass(){ <span style="white-space:pre"> </span> <span style="white-space:pre"> </span>alert("SuperClass Constructor !"); <span style="white-space:pre"> </span> <span style="white-space:pre"> </span>/*this.add = function(){ <span style="white-space:pre"> </span>alert("this is SuperClass !"); <span style="white-space:pre"> </span>};*/ <span style="white-space:pre"> </span>}; <span style="white-space:pre"> </span> <span style="white-space:pre"> </span>SuperClass.prototype.add = function(){ <span style="white-space:pre"> </span>alert("this is SuperClass !"); <span style="white-space:pre"> </span>}; <span style="white-space:pre"> </span> <span style="white-space:pre"> </span>function SubClass(){ <span style="white-space:pre"> </span> <span style="white-space:pre"> </span>alert("SubClass Constructor !"); <span style="white-space:pre"> </span> <span style="white-space:pre"> </span>SuperClass.apply(this); // 调用父类的构造方法,默认自调用的 <span style="white-space:pre"> </span> <span style="white-space:pre"> </span>/* <span style="white-space:pre"> </span>this.add = function(){ <span style="white-space:pre"> </span>alert("this is SubClass !"); <span style="white-space:pre"> </span>return SuperClass.prototype.add.apply(this, arguements); // 调用父类中同名的add方法,失败 <span style="white-space:pre"> </span>}; <span style="white-space:pre"> </span>*/ <span style="white-space:pre"> </span>} <span style="white-space:pre"> </span> <span style="white-space:pre"> </span>SubClass.prototype = new SuperClass(); <span style="white-space:pre"> </span>SubClass.prototype.constructor = SubClass; <span style="white-space:pre"> </span> <span style="white-space:pre"> </span>SubClass.prototype.add = function(){ <span style="white-space:pre"> </span>alert("this is SubClass >> prefix !"); <span style="white-space:pre"> </span>SuperClass.prototype.add.apply(this); // 调用父类中同名的add方法,成功 <span style="white-space:pre"> </span>alert("this is SubClass >> suffix !"); <span style="white-space:pre"> </span>}; <span style="white-space:pre"> </span> <span style="white-space:pre"> </span>new SubClass().add(); }()); /* * 在SubClass和SuperClass中使用this关键字添加add方法输出结果为: * <span style="white-space:pre"> </span>》》 SuperClass Constructor ! * <span style="white-space:pre"> </span>》》 SubClass Constructor ! * <span style="white-space:pre"> </span>》》 SuperClass Constructor ! * <span style="white-space:pre"> </span>》》 this is SubClass ! * * * 在SubClass的原型上添加add方法,SuperClass中使用this关键字添加add方法输出结果为 * <span style="white-space:pre"> </span>》》 SuperClass Constructor ! * <span style="white-space:pre"> </span>》》 SubClass Constructor ! * <span style="white-space:pre"> </span>》》 SuperClass Constructor ! * <span style="white-space:pre"> </span>》》 this is SuperClass ! * * 来个都采用原型方式添加,输出结果为: * <span style="white-space:pre"> </span>》》 SuperClass Constructor ! * <span style="white-space:pre"> </span>》》 SubClass Constructor ! * <span style="white-space:pre"> </span>》》 SuperClass Constructor ! * <span style="white-space:pre"> </span>》》this is SubClass >> prefix ! * <span style="white-space:pre"> </span>》》 this is SuperClass ! * <span style="white-space:pre"> </span>》》this is SubClass >> suffix ! */
第二种方式(个人实验):在子类中出现和父类同名的方法时,如果我们想要重用父类同名方法中的逻辑,就将子类中的方法定义为实例方法,而不是在子类的prototype属性上添加该方法。这样在子类的同名实例方法中采用“子类名.prototype.父类同名方法名”可以模拟实现Java中的super()。
function SuperClass(){ <span style="white-space:pre"> </span> } SuperClass.prototype.func = function(){ <span style="white-space:pre"> </span>alert("SuperClass's func"); }; function SubClass(){ <span style="white-space:pre"> </span>this.func = function(){ // 实例方法 <span style="white-space:pre"> </span><strong>SubClass.prototype.func(); // 模拟了Java中的super关键字</strong> <span style="white-space:pre"> </span>alert("SubClass Instance Function ! "); <span style="white-space:pre"> </span>}; }; SubClass.prototype = new SuperClass(); SubClass.func = function(){ // 定义的一个类方法 <span style="white-space:pre"> </span>alert("SubClass's Function !"); }; window.onload = function(){ <span style="white-space:pre"> </span>new SuperClass().func(); <span style="white-space:pre"> </span>new SubClass().func(); <span style="white-space:pre"> </span>SubClass.func();<span style="white-space:pre"> </span>// 调用 SubClass的类方法 <span style="white-space:pre"> </span>SubClass.prototype.func(); // 调用SuperClass中的func() <span style="white-space:pre"> </span>new SuperClass().func(); };这种方式虽然可以实现,不过还有待验证!
相关文章推荐
- Java super关键字调用父类的方法疑惑
- js调用父类方法,模拟java中的super()
- 重写父类方法、super关键字、调用父类构造器——Java
- JAVA_继承演示03_ExtendsDeamo01.java super关键字 重写父类的方法,中,调用父类的方法
- JAVA中super()作用:调用父类构造方法和构造方法链
- Android中WebView实现Javascript调用Java类方法
- JAVA_继承演示03_ExtendsDeamo01.java super关键字 重写父类的方法,中,调用父类的方法
- java中子类继承父类和实现接口有同名方法怎么处理
- JAVAScript js 模拟JAVA map类 实现put get 等JAVA map类方法
- 子类调用父类方法(super关键字)
- Android中WebView实现Javascript调用Java类方法
- Android中在WebView里实现Javascript调用Java类的方法
- 怎么实现javascript中调用java类中的方法
- super关键字调用父类构造方法
- Java动态代理实现模拟RMI远程方法调用
- webView 实现 与 javascript调用java方法(也称js调用native 方法) helloworld
- 8.python之面相对象part.5(子类调用父类的方法,以及super关键字)
- Android中WebView实现Javascript调用Java类方法
- java解析javascript方法,scriptengine初体验,实现后台调用js方法验证。
- 2018/01/08JAVA 基础 / 接口与继承/Java关键词:变量引用 super 调用父类对象方法/构造方法【或者访问父类对象属性】的方式归纳