您的位置:首页 > Web前端 > JavaScript

JavaScript中模拟实现类似于Java的super关键字调用父类中同名方法

2015-01-06 17:45 746 查看
在JavaScript中模拟实现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();
};
这种方式虽然可以实现,不过还有待验证!
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: