類變量/類方法/實例變量/實例方法
先補充一下以前寫過的方法:
在javascript中,所有的方法都有一個call方法和apply方法.這兩個方法可以模擬對象調用方法.它的第一個參數是對象,後面的參數表示對象調用這個方法時的參數(ECMAScript specifies two methods that are defined for all functions, call() and apply(). These methods allow you to invoke a function as if it were a method of some other object. The first argument to both call() and apply() is the object on which the function is to be invoked; this argument becomesthe value of the this keyword within the body of the function. Any remaining arguments to call() are the values that are passed to the function that is invoked).比如我們定義了一個方法f(),然後調用下面的語句:
f.call(o, 1, 2);
作用就相當於
o.m = f;
o.m(1,2);
delete o.m;
舉個例子:
function Person(name,age) { //定義方法
this.name = name;
this.age = age;
}
var o = new Object(); //空對象
alert(o.name + "_" + o.age); //undefined_undefined
Person.call(o,"sdcyst",18); //相當於調用:o.Person("sdcyst",18)
alert(o.name + "_" + o.age); //sdcyst_18
Person.apply(o,["name",89]);//apply方法作用同call,不同之處在於傳遞參數的形式是用數組來傳遞
alert(o.name + "_" + o.age); //name_89
實例變量和實例方法都是通過實例對象加"."操作符然後跟上屬性名或方法名來訪問的,但是我們也可以爲類來設置方法或變量,這樣就可以直接用類名加"."操作符然後跟上屬性名或方法名來訪問.定義類屬性和類方法很簡單:
Person.counter = 0; //定義類變量,創建的Person實例的個數
function Person(name,age) {
this.name = name;
this.age = age;
Person.counter++; //沒創建一個實例,類變量counter加1
};
Person.whoIsOlder = function(p1,p2) { //類方法,判斷誰的年齡較大
if(p1.age > p2.age) {
return p1;
} else {
return p2;
}
}
var p1 = new Person("p1",18);
var p2 = new Person("p2",22);
alert("現在有 " + Person.counter + "個人"); //現在有2個人
var p = Person.whoIsOlder(p1,p2);
alert(p.name + "的年齡較大"); //p2的年齡較大
prototype屬性的應用:
下面這個例子是根據原書改過來的.假設我們定義了一個Circle類,有一個radius屬性和area方法,實現如下:
function Circle(radius) {
this.radius = radius;
this.area = function() {
return 3.14 * this.radius * this.radius;
}
}
var c = new Circle(1);
alert(c.area()); //3.14
假設我們定義了100個Circle類的實例對象,那麼每個實例對象都有一個radius屬性和area方法,實際上,除了radius屬性,每個Circle類的實例對象的area方法都是一樣,這樣的話,我們就可以把area方法抽出來定義在Circle類的prototype屬性中,這樣所有的實例對象就可以調用這個方法,從而節省空間.
function Circle(radius) {
this.radius = radius;
}
Circle.prototype.area = function() {
return 3.14 * this.radius * this.radius;
}
var c = new Circle(1);
alert(c.area()); //3.14
現在,讓我們用prototype屬性來模擬一下類的繼承:首先定義一個Circle類作爲父類,然後定義子類PositionCircle.
function Circle(radius) { //定義父類Circle
this.radius = radius;
}
Circle.prototype.area = function() { //定義父類的方法area計算面積
returnthis.radius * this.radius * 3.14;
}
function PositionCircle(x,y,radius) { //定義類PositionCircle
this.x = x; //屬性橫座標
this.y = y; //屬性縱座標
Circle.call(this,radius); //調用父類的方法,相當於調用this.Circle(radius),設置PositionCircle類的
//radius屬性
}
PositionCircle.prototype = new Circle(); //設置PositionCircle的父類爲Circle類
var pc = new PositionCircle(1,2,1);
alert(pc.area()); //3.14
//PositionCircle類的area方法繼承自Circle類,而Circle類的
//area方法又繼承自它的prototype屬性對應的prototype對象
alert(pc.radius); //1 PositionCircle類的radius屬性繼承自Circle類
/*
注意:在前面我們設置PositionCircle類的prototype屬性指向了一個Circle對象,
因此pc的prototype屬性繼承了Circle對象的prototype屬性,而Circle對象的constructor屬
性(即Circle對象對應的prototype對象的constructor屬性)是指向Circle的,所以此處彈出
的是Circ.
*/
alert(pc.constructor); //Circle
/*爲此,我們在設計好了類的繼承關係後,還要設置子類的constructor屬性,否則它會指向父類
的constructor屬性
*/
PositionCircle.prototype.constructor = PositionCircle
alert(pc.constructor); //PositionCircle