原理:
構造函數使用this關鍵字給所有屬性和方法賦值.因為構造函數只是一個函數,所以可使ClassA的構造方法稱為ClassB的方法,然后調用它.
ClassB就會收到ClassA的構造方法中定義的屬性和方法.
例子:
function ClassA(name){ this.name=name; this.getName=function(){ return this.name; } } function ClassB(name,password){ this.ClassA=ClassA; this.ClassA(name); delete this.ClassA; this.password=password; this.getPassword=function(){ return this.password; } } var b =new ClassB('wwww','1123'); document.write(b.getName());經過調試,我們可以看到:
變量b中已經包含了ClassA中定義的方法.
代碼理解:
在ClassB中,this.ClassA(name)等價于以下代碼:
this.name=name;
this.getName=function(){
return this.name;
}
即:將ClassA函數中的代碼復制過來,即:ClassB中的代碼如下:
function ClassB(name,password){ this.ClassA=ClassA; this.name=name; this.getName=function(){ return this.name; } delete this.ClassA; this.password=password; this.getPassword=function(){ return this.password; } }然后通過delete this.ClassA之后,ClassB中的實際代碼如下:
function ClassB(name,password){ this.name=name; this.getName=function(){ return this.name; } this.password=password; this.getPassword=function(){ return this.password; } }從而實現了對象冒充.
注意:
對象冒充可以支持多重繼承,也就是說一個類可以繼承多個類.例子如下:
function ClassC(){ this.ClassX=ClassX; this.ClassX(); delete this.ClassX; this.ClassY=ClassY; this.ClassY(); delete this.ClassY; }這樣就ClassC就實現了繼承自ClassX,ClassY.但此處存在一個弊端:
若ClassX和ClassY中存在兩個同名的變量或方法,則ClassY會覆蓋ClassX中的變量或方法.
此外:
我們還可以通過call()和apply()方法實現對象冒充.
對于call方法:
它的第一個參數用做this的對象,其他參數都直接傳遞給函數自身.我們來看下面這個小例子:
function ShowColor(param1,param2){ this.getColor=function(){ document.write(this.color+"<br/>Two Params : "+param1+" ; "+param2); } } var obj = new Object; obj.color='Red'; ShowColor.call(obj,"pm1",'pm2'); obj.getColor();運行此段代碼后,我們發現頁面上顯示為:
解釋:
ShowColor方法是在對象外定義的,調用call時,它將第一個參數,也就是將ClassA的this指向了obj,將后面的參數"pm1"傳遞給了param1,'pm2'傳遞給了param2.
var obj = new Object; obj.color='Red'; ShowColor.call(obj,"pm1",'pm2');
也就實現了以下效果:
我們將上面代碼中的obj.color='Red'給注釋起來,再運行代碼,結果如下:
原因是obj并沒有color屬性,而obj.getColor()方法中需要this.color,即obj.color,所以會出現undefined的結果.
我們再來看如何利用call來實現對象冒充,繼續以剛才的ClassA,ClassB為例:
function ClassA(name){ this.name=name; this.getName=function(){ return this.name; } } function ClassB(name,password){ //this.ClassA=ClassA; //this.ClassA(name); //delete this.ClassA; ClassA.call(this,name); this.password=password; this.getPassword=function(){ return this.password; } } var b = new ClassB('www','111'); b.getPassword();調試效果:
解釋:
此處的ClassA.call(this,name); 即將ClassA的this指向了ClassB的this.從而實現了對象冒充.
現在,我們再來看apply方法.
apply方法有兩個參數,用作this的對象和要傳傳遞給函數的參數的數組.
例子:
function ShowColor(param1,param2){ this.getColor=function(){ document.write(this.color+"<br/>Two Params : "+param1+" ; "+param2); } } var obj = new Object; obj.color='Red'; ShowColor.apply(obj,new Array("pm1",'pm2')); obj.getColor();此方法可以被用于對象冒充:
function ClassA(name){ this.name=name; this.getName=function(){ return this.name; } } function ClassB(name,password){ //this.ClassA=ClassA; //this.ClassA(name); //delete this.ClassA; ClassA.apply(this,new Array(name)); this.password=password; this.getPassword=function(){ return this.password; } } var b = new ClassB('www','111'); b.getPassword();調試效果:
原型繼承
Javascript對象的創建和繼承使用了一套特別的模式,稱作原型式繼承.
原理是:對象的構造函數可以從其他對象中繼承方法,它創建出一個原型對象后,所有其他的新對象都可以基于這個原型對象來構建.
原型本身并不會從其他原型或者構造函數中繼承屬性,而屬性都是從實際對象那里繼承過來的.
例1:
function Person(name){ this.name=name; } Person.prototype.GetName=function(){ return this.name; } function User(name,password){ this.name = name; this.password = password; } User.prototype = new Person(); User.prototype.GetPassword=function(){ return this.password; }解釋:
User.prototype = new Person();這句話如何理解呢?User是對User對象構造函數的引用,new Person()使用person構造函數創建了一個Person對象,然后把Person對象的原型置為這個操作的結果.也就是說,當每次new User()時,得到的新User對象都會帶有Person對象的所有方法.