call 和apply 的一个记录

<!doctype html>
<html>
 <head>
  <title> call - apply for inherit </title>
 </head>

 <body>
  <script type="text/javascript">
   function baseA()  // base Class A
   {
    this.member = "baseA member";
    this.showSelfA = function()
    {
     window.alert(this.member);
    }
   }

   function baseB()  // base Class B
   {
    this.member = "baseB member";
    this.showSelfB = function()
    {
     window.alert(this.member);
    }
   }

   function extendAB()  // Inherit Class from A and B
   {
    baseA.call(this); // call for A
    baseB.call(this); // call for B
   }

   window.onload = function()
   {
    var extend = new extendAB(); 
    extend.showSelfA();  // show A
    extend.showSelfB();  // show B
   }
  </script>
 </body>
</html>

运行结果如下：

baseB member
baseB member

测试环境：Google Chrome

结果分析：

预期的结果，应该是输出 baseA member 和 baseB member，但实际输出却是 baseB member 和 baseB member

以这种方式去实现所谓的多继承，结果：相同的变量会被覆盖；

当然，我们也可以对上面baseA代码稍作修改，来验证我们调试分析的正确性：

function baseA()  // base Class A
{
 this.memberA = "baseA member";   // member改成memberA，以区分baseB中的member
 this.showSelfA = function()
 {
  window.alert(this.memberA);    // 显示memberA
 }
}

call 和apply 的一个记录

相关推荐