類變量/類方法/實例變量/實例方法 ?????? 在js中，所有的方法都有一個call方法和apply方法，這兩個方法可以模擬對象調(diào)用方法。它的第一個參數(shù)是對象，后面的參數(shù)表示對象調(diào)用這個方法時的參數(shù)。比如，我們定義了一個方法f(),然后調(diào)用下面的語句： ?????? f.call(0,1,2); ?????? 作用相當(dāng)于： ?????? o.m = f; ?????? o.m(1,2); ?????? delete o.m; ?????? 舉個例子： ?????? JS代碼：(見附件test1.html) ?????? //定義方法 ?????? function Person(name,age){ ????????????? this.name = name; ????????????? this.age = age; ?????? }

?

?????? //空對象 ?????? var o = new Object(); ?????? //undefined_undefined ?????? alert(o.name + "_" + o.age);

?

?????? //相當(dāng)于調(diào)用o.person("wangsy",31); ?????? Person.call(o,"wangsy",31); ?????? //wangsy_31 ?????? alert(o.name + "_" + o.age); ?????? //apply方法作用同call,不同之處在于傳遞參數(shù)的形式是用數(shù)組來傳遞 ?????? Person.apply(o,["wangsy",31]); ?????? //wangsy_31 ?????? alert(o.name + "_" + o.age);

?

?????? 實例變量和實例方法都是通過實例對象加”.”操作符然后跟上屬性名或方法來訪問的，但是我們也可以為類來設(shè)置方法或變量。這樣就可以直接用類名加”.”操作符然后跟上屬性名或方法來訪問。定義類屬性和類方法很簡單。 ?????? JS代碼：(見附件test2.html) ?????? //定義類變量，創(chuàng)建的Person實例的個數(shù) ?????? Person.counter = 0; ?????? //定義方法 ?????? function Person(name,age){ ????????????? this.name = name; ????????????? this.age = age; ????????????? //每創(chuàng)建一個實例，類變量加1 ????????????? Person.counter++; ?????? }

?

?????? //類方法，判斷誰的年齡較大 ?????? 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); ?????? //現(xiàn)在有2個人 ?????? alert("現(xiàn)在有" + Person.counter + "個人"); ?????? var p = Person.whoIsOlder(p1,p2); ?????? alert(p.name + "的年齡較大");

?

prototype屬性的應(yīng)用： ?????? 假設(shè)定義了一個Circle類，有一個radisu屬性和area方法，實現(xiàn)如下： ?????? JS代碼：(見附件test3.html) ?????? ?????? function Circle(radius){ ????????????? this.radius = radius; ????????????? this.area = function(){ ???????????????????? return 3.14 * this.radius * this.radius; ????????????? } ?????? }

?

?????? var c = new Circle(1); ?????? //3.14 ?????? alert(c.area());

?

?????? 假設(shè)我們定義了100個Circle類的實例對象，那么每個實例對象都有一個radius屬性和area方法，實際上除了radius屬性，每個Circle類的實例對象的area方法都是一樣的，可以把area方法抽出來定義在Circle類的prototype屬性中，這樣所有的實例對象就可以調(diào)用這個方法，從而節(jié)省空間。 ?????? JS代碼：(見附件test4.html) ?????? function Circle(radius){ ????????????? this.radius = radius; ?????? }

?

?????? Circle.prototype.area = function(){ ????????????? return 3.14 * this.radius * this.radius; ?????? }

?

?????? var c = new Circle(1); ?????? //3.14 ?????? alert(c.area());

?

?????? 現(xiàn)在，我們用prototype屬性來模擬一下類的繼承：首先定義一個Circle類作為父類，然后定義了子類PositionCircle： ?????? JS代碼：(見附件test5.html) ?????? //定義父類Circle ?????? function Circle(radius){ ????????????? this.radius = radius; ?????? }

?

?????? Circle.prototype.area = function(){ ????????????? //定義父類的方法area計算面積 ????????????? return 3.14 * this.radius * this.radius; ?????? }

?

?????? //定義PositionCircle類 ?????? function PositionCircle(x,y,radius){ ????????????? //屬性橫坐標(biāo) ????????????? this.x = x; ????????????? //屬性縱坐標(biāo) ????????????? this.y = y; ????????????? //調(diào)用父類的方法，相當(dāng)于調(diào)用this.Circle(radius) ????????????? //設(shè)置PositionCircle類的radius屬性 ????????????? Circle.call(this,radius); ?????? } ?????? //設(shè)置PositionCircle的父類為Circle類 ?????? PositionCircle.prototype = new Circle();

?

?????? var pc = new PositionCircle(1,2,1); ?????? //1 ?????? alert(pc.radius); ?????? //Circle ?????? alert(pc.constructor);

?

?????? PositionCircle.prototype.constructor = PositionCircle; ?????? //PositionCircle ?????? alert(pc.constructor);

轉(zhuǎn)載于:https://blog.51cto.com/jawsy/167226

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的javascript面向对象5的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。