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

最新推荐文章于 2023-07-20 18:31:54 发布

SerenoShen

最新推荐文章于 2023-07-20 18:31:54 发布

阅读量1.1k

点赞数

分类专栏： JavaScript开发+学习记录文章标签： javascript 继承 JavaScript实现Java中sup javascript继承 JavaScript原型继承

本文链接：https://blog.csdn.net/shenlei19911210/article/details/42462391

版权

JavaScript开发+学习记录专栏收录该内容

68 篇文章 0 订阅

订阅专栏

在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();
};

这种方式虽然可以实现，不过还有待验证！