Javascript Object and Class

written | in javascript | comments

js也是個物件導向(object-oriented)的語言,但與我們傳統認知的C++、Java的物件導向有所差異,但至少理念上還是一樣。物件會有所謂的成員也有人稱作屬性(property或attribute),指的是屬於該物件的某種數值或字串又或是其他的物件(ex: argument.length, event.data)。另外,物件也有方法(method,就是我們認知的function,ex: location.href(somefile.url) ),名稱上或許容易令人混淆,但大致來說一般的物件導向都是這麼稱呼與認知的。


簡介


     js如我們所知是萬物皆物件的語言,但更進一步得講,其實並非所有萬物皆為物件,像是”foo”, 5, false等就不是物件,而是原始值,但我們依然可以對它們操作”foo”.length,難道它不是個物件嗎?其實這是js在我們使用原始值時會先幫我們把它進一步包裝成複合物件,等我們使用完後又會再釋放,當然我們在使用它的時候是感覺不到的,所以更正確的說法是,js裡所有的東西使用起來皆像物件!


     一般來說我們如果是 var myArray = []; 來宣告一個陣列物件,其實就隱含了我們做了var myArray = new Array();的用法而已,同理 var myObject = {} 也隱含了 var myObject = new Object();而剛剛我們提到字串、數字、布林值不是物件而是原始值,但如果我們是用 var myString = new String(“Godzilla”)來產生字串的話,此時的myString就是物件了而非原始值了!!我們可以利用typeof 來判斷是否為物件,但function物件顯示的結果會是function而非object,但他依然是個物件唷!!如果想知道一物件是由誰所建構的則可以利用 constructor:

範例一
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var myString = 'godzilla'
typeof myString; // string
myString.constructor; // String
var myStringObject = new String('godzilla');
typeof myStringObject; // object  此時是物件而非原始值
myStringObject.constructor); // String
var myArray = [1,2]
typeof myArray // object
myArray.constructor // Array
var myArrayObject = new Array(1,2);
typeof myArrayObject // object
myArrayObject.constructor // Array
var myFunction = function(){ alert('haha') }
tpyeof myFunction // function 注意
myFunction.constructor // Function
var myFunctionObject = new Function('name','return name;');
typeof myFunctionObject // function 注意
myFunction.constructor  // Function

以上,大概是對js的物件基本介紹,這些有什麼用呢?其實個實際上並不能帶給你什麼酷炫的方式,但是對於觀念的釐清是很重要的!


自定類別


     js並無class,所以js的物件定義方使是靠關鍵字function來實現,跟我們一般直接定義一個function很類似:

範例二
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
function godzilla(a,b){ // godzilla只是個單純的function
console.log(a);
var mySon = new Son(b); // 利用function Son建立物件
console.log('I am ' + mySon.name);
mySon.changeName('zilla');
console.log('Here comes my new name: ' + mySon.name);
}

//利用function來制定我們想要的物件
function Son(name){
  this.name = name;
  this.changeName = function(newName){
  this.name = newName;
  }
}
godzilla('I am in a function rather than a object!', 'Noel');
//輸出
//I am in a function rather than a object! 
//Noel
//zilla 
  利用Object建構函式來產生物件



  var eva = new Object();
  eva.pilot = 'true four';
  eva.color = 'purple';
  eva.changePilot = function(person){
    this.pilot = person;
    }
  eva.pilot // true four
  eva.color // purple
  eva.changePilot('zero');
  eva.pilot // zero 

Comments

blog comments powered by Disqus