以變數的方式純取 Property

與傳統 OOP 相比, ECMAScript 的 Object 有一個很特別的語言特性,就是 Property 可以透過 Array 與 變數 方式存取,這造成了使用 Object 有很大的靈活度。

Version


ECMAScript 5

Array 方式存取 Property


1
2
3
4
5
6
7
8
9
10
11
12
13
var person = {
firstName: 'Sam',
lastName: 'Xiao',
fullName: function() {
return this.firstName + ' ' + this.lastName;
}
};

console.log(person.firstName); // Sam
console.log(person.fullName()); // Sam Xiao

console.log(person['firstName']); // Sam
console.log(person['fullName']()); // Sam Xiao

person 為 object,有 property 也有 method。

第 9 行

1
2
console.log(person.firstName);
console.log(person.fullName());

為傳統 OOP 使用 . 方式純取 property 與 method。

第 12 行

1
2
console.log(person['firstName']); // Sam
console.log(person['fullName']()); // Sam Xiao

ECMAScript 允許我們以 array 方式存取 property 與執行 method,將 property 與 method 名稱以 string 傳入 [] 即可。

這樣有什麼用呢 ?

既然 [] 可為 string,就表示可以是 variable,這就開了一個很大的門。

以 Variable 存取 Property


1
2
3
4
5
6
7
8
9
10
11
12
13
var person = {
firstName: 'Sam',
lastName: 'Xiao',
fullName: function() {
return this.firstName + ' ' + this.lastName;
}
};

const getProperty = (object, propertyName) =>
object[propertyName];

console.log(getProperty(person, 'firstName')); // Sam
console.log(getProperty(person, 'lastName')); // Xiao

Property 名稱可改用 function 的 argument 傳入,如此就能以 variable 的方式存取 property。

property001

  1. object 與 property 名稱都以 argument 方式傳入

以 Variable 執行 Method


1
2
3
4
5
6
7
8
9
10
11
12
var person = {
firstName: 'Sam',
lastName: 'Xiao',
fullName: function() {
return this.firstName + ' ' + this.lastName;
}
};

const runMethod = (object, methodName) =>
object[methodName]();

console.log(runMethod(person, 'fullName')); // Sam Xiao

Method 名稱可改用 function 的 argument 傳入,如此就能以 variable 的方式執行 function。

property002

  1. object 與 method 名稱都以 argument 方式傳入

Conclusion


  • 當 property 與 method 名稱能使用變數後,就能以程式碼的方式做很多變化,動態的存取 property 與執行 method
2018-11-02