JavaScript继承示例-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_6988/article/details/82537353

代码演绎于：http://www.cnblogs.com/yjf512/archive/2011/06/03/2071914.html

<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">

function baseClass()
{   this.name="baseClass";
    this.showMsg = function()
    {
        alert("baseClass::showMsg this.name="+this.name);   
    }
   
    this.baseShowMsg = function()
    {
        alert("baseClass::baseShowMsg");
    }
}
baseClass.showMsg = function()
{
    alert("baseClass::showMsg static");
}

function extendClass()
{   this.name="extendClass";
    this.showMsg =function ()
    {
        alert("extendClass::showMsg this.name="+this.name);
    }
}
extendClass.showMsg = function()
{
    alert("extendClass::showMsg static")
}

extendClass.prototype = new baseClass();
var instance = new extendClass();

instance.showMsg(); //显示extendClass::showMsg
instance.baseShowMsg(); //显示baseClass::baseShowMsg
instance.showMsg(); //显示extendClass::showMsg

baseClass.showMsg.call(instance);//显示baseClass::showMsg static

var baseinstance = new baseClass();

alert("baseinstance.showMsg.call(instance)")
baseinstance.showMsg.call(instance);//显示baseClass::showMsg

alert("instance.showMsg.call(baseinstance);")
instance.showMsg.call(baseinstance);//显示extendClass::showMsg this.name=baseClass
instance.showMsg();

</script>

</body>
</html>

其中：

instance.showMsg.call(baseinstance);//显示extendClass::showMsg this.name=baseClass

通过call，extendClass的实例instance调用的showMsg方法使用的数据来自baseinstance

js的prototype