1. 程式人生 > 實用技巧 >【JavaScript】物件基礎

【JavaScript】物件基礎

以下內容為學習記錄,可以參考 MDN 原文。

環境

  • vscode 1.46
  • Microsoft Edge 83

概念

物件是一個包含相關資料和方法的集合(通常由一些變數和函式組成,我們稱之為物件裡面的屬性和方法)。

建立物件

var person = {};
var person = {
  name : ['Bob', 'Smith'],
  age : 32,
  gender : 'male',
  interests : ['music', 'skiing'],
  bio : function() {
    alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
  },
  greeting: function() {
    alert('Hi! I\'m ' + this.name[0] + '.');
  }
};

點表示法

可以使用點表示法獲取物件的屬性和方法。

person.age
person.interests[1]

子名稱空間

可以用一個物件來做另一個物件成員的值。

person.name =  {
  first : 'Bob',
  last : 'Smith'
}

括號表示法

另外一種訪問屬性的方式是使用括號表示法(bracket notation)。

person['age']
person['name']['first']

這看起來很像訪問一個數組的元素,從根本上來說是一回事兒,你使用了關聯了值的名字,而不是索引去選擇元素。
難怪物件有時被稱之為關聯陣列(associative array)了——物件做了字串到值的對映,而陣列做的是數字到值的對映。

設定物件成員

person.age = 45
person['name']['last'] = 'Cratchit'

設定成員並不意味著你只能更新已經存在的屬性的值,你完全可以建立新的成員:

person['eyes'] = 'hazel'
person.farewell = function() { alert("Bye everybody!") }

括號表示法一個有用的地方是它不僅可以動態的去設定物件成員的值,還可以動態的去設定成員的名字。

var myDataName = 'height'
var myDataValue = '1.75m'
person[myDataName] = myDataValue

"this"的含義

關鍵字"this"指向了當前程式碼執行時的物件。