javascript中继续组合继承的问题


function SuperType(name) {
this.name = name;
this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function() {
alert(this.name);
};
function SubType(name, age) {
SuperType.call(this, name);
this.age = age;
}
SubType.prototype = new SuperType();
SubType.prototype.sayAge = function() {
alert(this.age);
};
var instance1 = new SubType("Nic", 28);
instance1.colors.push("black");
//instance1.colors = ["red", "blue", "green", "black"];
alert(instance1.colors);var instance2 = new SubType("Gre", 40);
alert(instance2.colors);
为什么上面这段代码运行显示两个colors不一样；但下面那段代码运行显示却一样？function SuperType() {
this.name = "Nic";
this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function() {
alert(this.name);
};
function SubType() {
//SuperType.call(this, name);
this.age = 25;
}
SubType.prototype = new SuperType();
SubType.prototype.sayAge = function() {
alert(this.age);
};
var instance1 = new SubType();
instance1.colors.push("black");
//instance1.colors = ["red", "blue", "green", "black"];
alert(instance1.colors);var instance2 = new SubType();
alert(instance2.colors);
是不是function SuperType(name)与function SubType(name, age)对于SubType.prototype = new SuperType();有影响呢？即是不是因为SuperType与SubType有参数导致colors不受原型的影响，而没有参数就受原型的影响致使colors变为原型中定义这样呢？而且只针对引用类型的变量？javascriptfunctioncolors

解决方案 »

  1.   

    很有趣的现象，按个人理解去掉SuperType，只关注SubType执行的情况改写成以下代码。function SubType() {
        this.name = "Nic";
    //注释下面对colors的初始化则两次弹出一样的数据
        this.colors = ["red", "blue", "green"];
        this.age = 25;

    }
    SubType.prototype.sayAge = function() {
    alert(this.age);
    }SubType.prototype.colors=["red", "blue", "green","yellow"]; 
    var instance1 = new SubType();
    instance1.colors.push("black");
    alert(instance1.colors);var instance2 = new SubType();
    alert(instance2.colors);
      

  2.   


    我的运行怎么与您的不同？我的firefox显示第一次有black，第二次没有black！怎么这么奇怪？
      

  3.   


    我的是firefox 12.0版本，html文件头部：
    <?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tranditional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tranditional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />但这些都应该没有影响吧？
      

  4.   


    说错了，应该是第一次“red,blue,green,black”，第二次“red,blue,green”
      

  5.   

    上面的代码执行结果
    第一次“red,blue,green,black”，第二次“red,blue,green” //注释下面对colors的初始化则两次弹出一样的数据
    //this.colors = ["red", "blue", "green"];
    则执行结果变成两次一样的"red,blue,green,yellow,black"
      

  6.   

    function SuperType(name) { 
        this.name = name; 
        this.colors = ["red", "blue", "green"]; 
    } 
    SuperType.prototype.sayName = function() { 
        alert(this.name); 
    }; 
      
      
    function SubType(name, age) { 
        //SuperType.call(this, name);     this.age = age; 
    } 
    SubType.prototype = new SuperType(); 
    SubType.prototype.sayAge = function() { 
        alert(this.age); 
    }; 
      
      
    var instance1 = new SubType("Nic", 28); 
    instance1.colors.push("black"); 
    //instance1.colors = ["red", "blue", "green", "black"]; 
    alert(instance1.colors); 
      
    var instance2 = new SubType("Gre", 40); 
    alert(instance2.colors);
    原因在SuperType.call(this, name); 
    相当于重新赋值了
      

  7.   


    重新赋值连colors都受影响？是不是因为colors也在SuperType(name)的作用域内所以也受影响？
      

  8.   

    SuperType.call(this, name); 
    等效于 this.colors = ["red", "blue", "green"];SubType.prototype = new SuperType(); 
    等效于 this.prototype.colors = ["red", "blue", "green"];所以没有执行SuperType.call(this, name); 则new 出来的对象没有colors 这个属性，但它向上找，在prototype找到了colors，而prototype是对象间共享的，所以instance1 修改了colors，instance2则共享了这个修改。
      

  9.   


    但instance1与instance2不都是直接指向prototype的吗？
      

  10.   


    应该一开始就检查prototype中是否有colors吧
      

  11.   


    哦。。我明白您是什么意思了，即没有call()则表示只用prototype的那个。有call()就表示在instance1和instance2分别“添加”了colors，而colors分别存于instance1和instance2中，而并非存于prototype中，是这个意思吧？好像《Javascript高级程序设计（第２版）》第１２２页图６－２所示