JavaScript 的继承机制----对象冒充

继承机制，说到继承，就要想到从基类开始，但是JavaScript中的类有两大类：一，内嵌的；二，用户自定义；一般前者不会被用来做基类，原因是为了保障js的安全。但是我们可以通过prototype来对基类进行扩充，增加我们想要的属性和方法。以下是自己对继承的几种方式的理解。

1>  对象冒充，是JavaScript 和 ECMAScript实现继承的方法，在学习对象冒充实现继承前我们的先了解关键字 this 的使用，例如：

          view plaincopy to clipboardprint?
function  classA(color){  
  this.color = color;  
  this.show = function(){alert(this.color);}  
}  
/* 
   Note: 
     1> this 代表的是classA函数所构建的对象，而非函数classA对象本身这样说主要是为了避免（function is object）的影响; 
     2> 在构建classA对象时，是通过this来初始化的属性和方法的，如果用classB的this去冒充classA的this，那么就实现了简单的继承了 
*/ 
function  classA(color){
  this.color = color;
  this.show = function(){alert(this.color);}
}
/*
   Note:
     1> this 代表的是classA函数所构建的对象，而非函数classA对象本身这样说主要是为了避免（function is object）的影响;
     2> 在构建classA对象时，是通过this来初始化的属性和方法的，如果用classB的this去冒充classA的this，那么就实现了简单的继承了
*/

2>继承机制的实现方式：

    NO1：对象冒充

         对象冒充的原理：函数classA通过this来初始化属性和方法，如果用函数classB的this冒充classA的this去执行，则就会使classB具有classA的属性和方法。例如

         view plaincopy to clipboardprint?
function classA(sColor){  
   this.sColor = sColor;  
   this.show = function(){alert(this.sColor);}  
}  
 
function classB(sColor,sName){  
  this.new = classA;  
  this.new(sColor);  
  delete this.new;  
  /* 
    Note 
      必须释放classA的引用，那样对于classA是安全的。可是再执行一段以上代码，实现多重继承。 
     this.new = classC; 
    this.new(arguments); 
    delete this.new; 
  */ 
  this.sName = sName;   
  this.say = function(){alert(this.sName);}  
}  
 
var a = new classA("blue");  
var b = new classB("red","BMW");  
a.show(); // blue  
b.say(); //BMW  
b.show(); // red 
function classA(sColor){
   this.sColor = sColor;
   this.show = function(){alert(this.sColor);}
}

function classB(sColor,sName){
  this.new = classA;
  this.new(sColor);
  delete this.new;
  /*
    Note
      必须释放classA的引用，那样对于classA是安全的。可是再执行一段以上代码，实现多重继承。
     this.new = classC;
    this.new(arguments);
    delete this.new;
  */
  this.sName = sName;
  this.say = function(){alert(this.sName);}
}

var a = new classA("blue");
var b = new classB("red","BMW");
a.show(); // blue
b.say(); //BMW
b.show(); // red

        注意：对象冒充是所有继承的前提，冒充只能使子类继承基类中的属性和方法，对基类prototype中的属性和方法是不可见的。也可以实现多重继承。

    NO2：原型链

         原型链，是继承的另一种方式，它不是通过对象冒充来实现的，而是改变prototype指针的指向来实现的。不过在运行时也参杂着对象冒充，例如：

         view plaincopy to clipboardprint?
function classA(){}  
classA.prototype.sColor = "red";  
classA.prototype.show = function(){  
   alert(this.sColor);  
}  
 
function classB(){}  
classB.prototype = new classA(); //no arguments  
/* 
  Note: 
      classB.prototype 开始指向一块命名空间，执行上行语句后，classB.prototype的命名空间则是classA的以一个对象，所有在执行此方法前不可以向classB增加属性和方法，不然会发生覆盖。 
*/ 
classB.prototype.name = "BMW"；  
classB.prototype.say = function(){  
 alert(this.name);  
}  
 
var a = new classA();  
a.show(); // red  
var b = new classB();  
b.show(); // red  
b.say(); //BMW 
function classA(){}
classA.prototype.sColor = "red";
classA.prototype.show = function(){
   alert(this.sColor);
}

function classB(){}
classB.prototype = new classA(); //no arguments
/*
  Note:
      classB.prototype 开始指向一块命名空间，执行上行语句后，classB.prototype的命名空间则是classA的以一个对象，所有在执行此方法前不可以向classB增加属性和方法，不然会发生覆盖。
*/
classB.prototype.name = "BMW"；
classB.prototype.say = function(){
 alert(this.name);
}

var a = new classA();
a.show(); // red
var b = new classB();
b.show(); // red
b.say(); //BMW
   

        注意：原型链不可以实现多重继承，且在实例化新的命名空间的时候不可以带参数。

    NO3：call方法

        call(this,argument)，此方法是函数对象的方法（classA.call），且两个参数：参数一，this代表的是当前对象；参数二，是实例化的参数，只能是单个的。

        view plaincopy to clipboardprint?
function classA(sColor){  
  this.sColor = sColor;  
  this.show = function(){alert(this.sColor);}  
}  
 
classA.prototype.say = function(){  
  alert("hello");  
}  
 
function classB(sColor,sName){  
  classA.call(this,sColor);  
  this.sName = sName;  
  this.showName = function(){  
    alert(this.sName);  
  }  
}  
 
var a = new classA("blue");  
a.show();//blue  
a.say();//hello  
var b = new classB("red","BMW");  
b.show();//red  
b.say();//error : no this function  
b.showName();// BMW 
function classA(sColor){
  this.sColor = sColor;
  this.show = function(){alert(this.sColor);}
}

classA.prototype.say = function(){
  alert("hello");
}

function classB(sColor,sName){
  classA.call(this,sColor);
  this.sName = sName;
  this.showName = function(){
    alert(this.sName);
  }
}

var a = new classA("blue");
a.show();//blue
a.say();//hello
var b = new classB("red","BMW");
b.show();//red
b.say();//error : no this function
b.showName();// BMW

       注意：之所以会报错主要以因为prototype中的属性和方法通过call方法是继承不下来的，apply方法也一样，唯一的区别就是参数二的类型不同

    NO4：apply方法

        与call方法类似，具体如：

        view plaincopy to clipboardprint?
function classA(sColor){  
  this.sColor = sColor;  
  this.show = function(){alert(this.sColor);}  
}  
classA.prototype.say = function(){  
  alert("hello..");  
}  
 
function classB(sColor,sName){  
  classA.apply(this,new Array(sColor));  
 
  this.sName = sName;  
  this.showName = function(){  
    alert(this.sName);  
  }  
}  
 
var a = new classA("blue");  
a.show();// output: blue  
a.say();// output: hello..  
var b = new classB("red","BMW");  
b.show(); //output red  
b.say();// error,no this function  
b.showName();//output BMW 
function classA(sColor){
  this.sColor = sColor;
  this.show = function(){alert(this.sColor);}
}
classA.prototype.say = function(){
  alert("hello..");
}

function classB(sColor,sName){
  classA.apply(this,new Array(sColor));

  this.sName = sName;
  this.showName = function(){
    alert(this.sName);
  }
}

var a = new classA("blue");
a.show();// output: blue
a.say();// output: hello..
var b = new classB("red","BMW");
b.show(); //output red
b.say();// error,no this function
b.showName();//output BMW

 NO5：原型链 && 对象冒充

      这种模式是原型链和对象冒充的结合，同构对象冒充来继承函数对象中的属性和方法，函数原型中的属性和方法则用原型链来实现。看起来非常清楚，但是值得注意的是，原型链在构建对象时是不带参数的，具体如：

      view plaincopy to clipboardprint?
function classA(sColor){  
  this.sColor = sColor;  
  this.show = function(){alert(this.sColor);}  
}  
 
classA.prototype.say = function(){  
  alert("hello ..");  
}  
 
function classB(sColor,sName){  
  classA.call(this,sColor);  
  this.sName = sName;  
}  
 
classB.prototype = new classA();  
//note: no arguments and classB is a classA  
//只有此行后才可以给classB增加自己的属性和方法，否则会发生覆盖  
classB.prototype.showName = function(){  
  alert(this.sName);  
}  
var a = new classA("blue");  
a.show();//output blue  
a.say(); // output hello..  
var b = new classB("red","BMW");  
b.show(); // output red  
b.say(); //output hello..  
b.showName();//output BMW 
function classA(sColor){
  this.sColor = sColor;
  this.show = function(){alert(this.sColor);}
}

classA.prototype.say = function(){
  alert("hello ..");
}

function classB(sColor,sName){
  classA.call(this,sColor);
  this.sName = sName;
}

classB.prototype = new classA();
//note: no arguments and classB is a classA
//只有此行后才可以给classB增加自己的属性和方法，否则会发生覆盖
classB.prototype.showName = function(){
  alert(this.sName);
}
var a = new classA("blue");
a.show();//output blue
a.say(); // output hello..
var b = new classB("red","BMW");
b.show(); // output red
b.say(); //output hello..
b.showName();//output BMW

总结：通过以上几种方式多可以实现在Javascript中的继承，只有原型链这种方式不然实现多继承，但其优点在于classB的任何对象多属于classA,classB这两个类。

     

 

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/gaozliang2009/archive/2009/09/23/4583405.aspx