JavaScript_原型和继承(2017-03-15)

1 function A() { 
2       this.width = 10; 
3       this.data = [1,2,3]; 
4       this.key = "this is A"; 
5   } 
6   A._objectNum = 0;//定义A的属性 
7   A.prototype.say = function(){//给A的原型对象添加属性 
8       alert("hello world") 
9   }

  //我们想要获取a1.fGetName 
  alert(a1.fGetName);//输出undefined 
  //1、遍历a1对象本身 
  //结果a1对象本身没有fGetName属性 
  //2、找到a1的[[Prototype]]，也就是其对应的对象A.prototype，同时进行遍历 
  //结果A.prototype也没有这个属性 
  //3、找到A.prototype对象的[[Prototype]]，指向其对应的对象Object.prototype 
  //结果Object.prototype也没有fGetName 
  //4、试图寻找Object.prototype的[[Prototype]]属性，结果返回undefined，这就是a1.fGetName的值 

function B() {};

B.prototype = A.prototype;//相当于把B的prototype指向了A的prototype；这样只是继承了A的prototype方法，A中的自定义方法则不继承 
B.prototype.thisisb = "this is constructor B";//这样也会改变a的prototype 

B.prototype.__proto__ = A.prototype;

B.prototype = new A();

var b = new B; 
console.log(b.constructor);//output A 

B.prototype.constructor = B;  
  //现在B的原型就变成了{width :10 , data : [1,2,3] , key : "this is A" , [[Prototype]] : A.prototype , constructor : B}  
  console.log(b.constructor);//output B  
  //同时B直接通过原型继承了A的自定义属性width和name  
  console.log(b.data);//output [1,2,3]  

  //这样的坏处就是  
  b.data.push(4);//直接改变了prototype的data数组（引用）  
  var c = new B;  
  alert(c.data);//output [1,2,3,4]  

  //其实我们想要的只是原型链，A的自定义属性我们想在B中进行定义（而不是在prototype）  
  //该如何进行继承？  
  //既然我们不想要A中自定义的属性，那么可以想办法把其过滤掉  
  //可以新建一个空函数  
  function F(){}  
  //把空函数的原型指向构造函数A的原型  
  F.prototype = A.prototype;  
  //这个时候再通过new操作把B.prototype的原型链指向F的原型  
  B.prototype = new F;  
  //这个时候B的原型变成了{[[Prototype]] : F.prototype}  
  //这里F.prototype其实只是一个地址的引用  
  //但是由B创建的实例其constructor指向了A，所以这里要显示设置一下B.prototype的constructor属性  
  B.prototype.constructor = B;  
  //这个时候B的原型变成了{constructor : B , [[Prototype]] : F.prototype}  
  //这样就实现了B对A的原型继承 

    function A() { 
        this.width = 10; 
        this.data = [1,2,3]; 
        this.key = "this is A"; 
    } 
    A._objectNum = 0;//定义A的属性 
    A.prototype.say = function(){//给A的原型对象添加属性 
        console.log("hello world") 
    }

    var a1 = new A; 
    var a2 = new A; 
    
    //我们想要获取a1.fGetName 
    console.log("想要获取a1.fGetName " + a1.fGetName);//输出undefined  
    //1、遍历a1对象本身 
    //结果a1对象本身没有fGetName属性 
    //2、找到a1的[[Prototype]]，也就是其对应的对象A.prototype，同时进行遍历 
    //结果A.prototype也没有这个属性 
    //3、找到A.prototype对象的[[Prototype]]，指向其对应的对象Object.prototype 
    //结果Object.prototype也没有fGetName 
    //4、试图寻找Object.prototype的[[Prototype]]属性，结果返回undefined，这就是a1.fGetName的值 
    
    function B() {
    
    };
    
    B.prototype = A.prototype;//相当于把B的prototype指向了A的prototype；这样只是继承了A的prototype方法，A中的自定义方法则不继承 
    B.prototype.thisisb = "this is constructor B";//这样也会改变a的prototype 
    
    //B的原型链指向A
    
    //第一种
    //B.prototype.__proto__ = A.prototype;
    
    //第二种
    B.prototype = new A();
    
    var b = new B; 
    //B产生的对象的构造函数发生了改变，因为在B中没有constructor属性，只能从原型链找到A.prototype，读出constructor:A
    /*
    实例b的构造函数:function A() { 
        this.width = 10; 
        this.data = [1,2,3]; 
        this.key = "this is A"; 
    }
    */
    console.log("实例b的构造函数:" + b.constructor);//output A 
    
    //人为设回B本身
    B.prototype.constructor = B;  
    //现在B的原型就变成了{width :10 , data : [1,2,3] , key : "this is A" , [[Prototype]] : A.prototype , constructor : B}  
    /*
    实例b的构造函数2:function B() {
    
    }
    */
    console.log("实例b的构造函数2:" +b.constructor);//output B  
    //同时B直接通过原型继承了A的自定义属性width和name  
    /*
    实例b的data:1,2,3
    */
    console.log("实例b的data:" +b.data);//output [1,2,3]  
    //这样的坏处就是  
    b.data.push(4);//直接改变了prototype的data数组（引用）  
    
    var c = new B;  
    /*
    实例c的data:1,2,3,4
    */
    console.log("实例c的data:" +c.data);//output [1,2,3,4]  
    //其实我们想要的只是原型链，A的自定义属性我们想在B中进行定义（而不是在prototype）  
    //该如何进行继承？  
    //既然我们不想要A中自定义的属性，那么可以想办法把其过滤掉  
    //可以新建一个空函数  
    function F(){}  
    //把空函数的原型指向构造函数A的原型  
    F.prototype = A.prototype;  
    //这个时候再通过new操作把B.prototype的原型链指向F的原型  
    B.prototype = new F;  
    //这个时候B的原型变成了{[[Prototype]] : F.prototype}  
    //这里F.prototype其实只是一个地址的引用  
    //但是由B创建的实例其constructor指向了A，所以这里要显示设置一下B.prototype的constructor属性  
    B.prototype.constructor = B;  
    //这个时候B的原型变成了{constructor : B , [[Prototype]] : F.prototype}  
    //这样就实现了B对A的原型继承