怎樣理解javascript面向?qū)ο蠹夹g(shù)基礎(chǔ)

怎樣理解javascript面向?qū)ο蠹夹g(shù)基礎(chǔ)，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

類變量/類方法/實例變量/實例方法

先補(bǔ)充一下以前寫過的方法:

在javascript中,所有的方法都有一個call方法和apply方法.這兩個方法可以模擬對象調(diào)用方法.它的***個參數(shù)是對象,后面的
參數(shù)表示對象調(diào)用這個方法時的參數(shù).比如我們定義了一個方法f(),然后調(diào)用下面的語句:

f.call(o, 1, 2);

作用就相當(dāng)于

o.m = f;  o.m(1,2);  delete o.m;

舉個例子:

Js代碼：

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); //相當(dāng)于調(diào)用:o.Person("sdcyst",18)  alert(o.name + "_" + o.age); //sdcyst_18  Person.apply(o,["name",89]);//apply方法作用同call,不同之處在于傳遞參數(shù)的形式是用數(shù)組來傳遞  alert(o.name + "_" + o.age); //name_89

實例變量和實例方法都是通過實例對象加"."操作符然后跟上屬性名或方法名來訪問的,但是我們也可以為類來設(shè)置方法或變量,
這樣就可以直接用類名加"."操作符然后跟上屬性名或方法名來訪問.定義類屬性和類方法很簡單:

Js代碼

Person.counter = 0; //定義類變量,創(chuàng)建的Person實例的個數(shù)  function Person(name,age) {  this.name = name;  this.age = age;  Person.counter++; //沒創(chuàng)建一個實例,類變量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("現(xiàn)在有 " + Person.counter + "個人"); //現(xiàn)在有2個人  var p = Person.whoIsOlder(p1,p2);  alert(p.name + "的年齡較大"); //p2的年齡較大

prototype屬性的應(yīng)用:

下面這個例子是根據(jù)原書改過來的.假設(shè)我們定義了一個Circle類,有一個radius屬性和area方法,實現(xiàn)如下:

Js代碼：

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

假設(shè)我們定義了100個Circle類的實例對象,那么每個實例對象都有一個radius屬性和area方法,實際上,除了radius屬性,每個Circle類的實例對象的area方法都是一樣,這樣的話,我們就可以把a(bǔ)rea方法抽出來定義在Circle類的prototype屬性中,這樣所有的實例對象就可以調(diào)用這個方法,從而節(jié)省空間.

Js代碼

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

現(xiàn)在,讓我們用prototype屬性來模擬一下類的繼承:首先定義一個Circle類作為父類,然后定義子類PositionCircle.

Js代碼

function Circle(radius) { //定義父類Circle   this.radius = radius;   }   Circle.prototype.area = function() { //定義父類的方法area計算面積   return this.radius * this.radius * 3.14;   }    function PositionCircle(x,y,radius) { //定義類PositionCircle   this.x = x; //屬性橫坐標(biāo)   this.y = y; //屬性縱坐標(biāo)   Circle.call(this,radius); //調(diào)用父類的方法,相當(dāng)于調(diào)用this.Circle(radius),設(shè)置PositionCircle類的   //radius屬性   }   PositionCircle.prototype = new Circle(); //設(shè)置PositionCircle的父類為Circle類   var pc = new PositionCircle(1,2,1);   alert(pc.area()); //3.14   //PositionCircle類的area方法繼承自Circle類,而Circle類的   //area方法又繼承自它的prototype屬性對應(yīng)的prototype對象   alert(pc.radius); //1 PositionCircle類的radius屬性繼承自Circle類   /* 注意:在前面我們設(shè)置PositionCircle類的prototype屬性指向了一個Circle對象,因此pc的prototype屬性繼承了Circle對象的prototype屬性,而Circle對象的constructor屬性(即Circle對象對應(yīng)的prototype對象的constructor屬性)是指向Circle的,所以此處彈出   的是Circ.   */   alert(pc.constructor); //Circle   /*為此,我們在設(shè)計好了類的繼承關(guān)系后,還要設(shè)置子類的constructor屬性,否則它會指向父類   的constructor屬性   */   PositionCircle.prototype.constructor = PositionCircle   alert(pc.constructor); //PositionCircle

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進(jìn)一步的了解或閱讀更多相關(guān)文章，請關(guān)注億速云行業(yè)資訊頻道，感謝您對億速云的支持。