ECMAScript 之 Object Property 存取

栏目: JavaScript · 发布时间: 6年前

内容简介:與傳統 OOP 相比, ECMAScript 的 Object 有一個很特別的語言特性,就是 Property 可以透過 Array 與ECMAScript 5

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

Version

ECMAScript 5

Array 方式存取 Property

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 行

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

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

第 12 行

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

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

這樣有什麼用呢 ?

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

以 Variable 存取 Property

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。

ECMAScript 之 Object Property 存取

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

以 Variable 執行 Method

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。

ECMAScript 之 Object Property 存取

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

Conclusion

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

以上所述就是小编给大家介绍的《ECMAScript 之 Object Property 存取》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Growth Hack 這樣做

Growth Hack 這樣做

Xdite / PCuSER電腦人文化 / 2016-5-7 / 300.00台幣

◎具體教你在預算有限的情況之下,把成長做出來的可行與必要方法! ◎帶動台灣成長駭客話題的專業講師,親授讓產品突破80分的成長秘笈 @這本書要給誰看? 1. 創業者、個人品牌經營者,想要提高自己服務轉換率的人。 2. 空有產品,但是賣不出去,花了錢投廣告卻效果低落的人。 @這本書有什麼不一樣? 1.全球最重要的趨勢,台灣最知名的 Growth Hack 講師 Xd......一起来看看 《Growth Hack 這樣做》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

SHA 加密
SHA 加密

SHA 加密工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具