首頁  >  文章  >  web前端  >  JavaScript的物件導向設計

JavaScript的物件導向設計

高洛峰
高洛峰原創
2016-11-26 11:29:491036瀏覽

依據W3C School的定義,Javascript是物件導向的語言, 雖然沒有類別(class),但到處是物件. 可以理解只有定義而沒有聲明, 直接用就行. 其中的每個物件都可以理解為一組Key -Value的組合.

附上W3C School的說明:
 物件導向語言的要求
  一種物件導向語言需要提供開發者四種基本能力:
封裝- 把相關的資訊(無論資料或方法)存儲在物件中的能力
聚集- 把一個物件儲存在另一個物件內的能力
繼承- 由另一個類別(或多個類別)得來類別的屬性和方法的能力
多態性- 編寫能以多種方法運行的函數或方法的能力
ECMAScript 支援這些要求,因此可被是看做物件導向的。


下面就是一比較規矩的物件定義(以下的例子參考了>):
 var person = new Object();
 person.name = "Horky";
person.age = 40;
 person.job = "Software Engineer";

 person.sayName = function(){
document.write(this.name);
}

調用方式:
person person.Name( write("

Age: ");  document.write(person.age);

 
  document.write("

Job: ");
  document.write(person["jorite") ;

嗯,是的,所有屬性都是public的,而且有兩種不同的屬性訪問方式. (關於訪問性的限定可以由屬性(property)的特性(attribute)來設定.)

再一種是比較隨意且切中Key-Value的定義方式, 但是舊版的瀏覽器可不見得支援:

var person = (

 name: "Horky",
 age: 40,
 job: "Software Engineer",

 sayName: function(){

document.write(this.name);

 }
};

因為Javascript的變數本質是鬆散類型,說白了就是無政府主義型. 所以並不需要一開始不給出完整定義,而是像下面這樣也是允許的(展示需要,絕不推薦):

   var person = new Object();


   person.name = "Horky";

   person.sayName = function()🎠 document.write(this.name);

    }

    person.sayName();
    person.age = 40;
   . ;

    person.job = "Software Engineer";

    document.write("

Job: ");
    document.write(person["job"]); 如果第一句
改為下面這樣可就不行了:
   var person;  或者var person = "Undefined";
原因還是在Javascript中基本資料類型和引用類型還是涾渭分明的.

回顧一下前面所講的JavaScript擁有面向對象的特性,前面兩點不用多說, 引用類型就比較明顯具備, 第三點稍後再說. 關於多態, 其實真有點牽強, 個人覺得更像是C/C++中的可變參數的函數. 因為這裡的多態針對函數而言. 也就是一個函數的參數可以很隨性, JavaScript也懶得限定,一切交給開發者吧.結果還整出一個多態來. 結合建構子舉個例子吧:function Person(name, age, job)

{
this.name = "Mr Nobody!";
this.age = 0;

this.job = "Hard to say!";


switch(arguments.length)
{
case 3:
this.job = job;
case 2:

this.age = age;

case 1:
this.name = name;
break;
}
this.introdroduce.name = name;
break;
}

document.write("

My name is: "+this.name);
 
document.write("

"+ this.age+" years old!"); 
document.write( "

And, my job is : "+this.job);
}
}

var horky = new Person("Horky",40,"Software Engineer");
var arthas = new Person(" Arthas",22);
var nobody = new Person();

這個函數Person()就是一個建構函數, 建立一個Person的物件並回傳. 依據傳入的不同參數執行不同的初始化,這也就是多態的一種體現了.
擴展一下,如果傳入的是對象,如何實現複製呢? 這就是原型式繼承的模式(參> 6.3.4).

增加一個全局函數:
function object(o)
{

  function F() {};

  F.prototype = o;

  return new F();

}

然後試試以下兩個新的物件:
var horky_alias = object(horky);
var arthas_alias = object(horky, {name:{value:"Arthas"}});
第二個物件在複製horky時,順便將其中的名字也給改了.

它可以工作的核心在F.prototype上. 因為這個特殊指針的存在,使得這一切成為可能.每個函數都有一個prototype,它是一個指向某個物件的指標, 而這個物件包含了所有實例可以共享的屬性和方法, 很像是享元的概念.


下面就說一下繼承. JavaScript中所講的繼承,說白了就是使子物件可以存取父物件. 所以有兩個重點: 子物件中需要有一個父物件的實例, 那就是prototype. 於是一個典型的子物件定義出來了:
function Boy(name, age, job)
{
this. sex = "Male";
this.prototype = new Person(name,age,job);
this.introduceSelf = function()
 
{
 
this.prototype.introduceSelf({
 
this.prototype.introduceSelf();; p /> I am BOY!");
}
}

var boy = new Boy("A",3);

如果覺得使用prototype太過於底層,也有幾分hack的味道,也可以使用"借用建構子"的方式來實現簡單一些繼承. 


陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn