JavaScript ES6 建立物件時定義方法的簡短語法

JavaScript ES6(ECMAScript 2015)使用object initializer notation建立物件時，定義方法時可簡寫如下。

新的語法省略了function關鍵字。

var user = {
  sayHi () {
    console.log('Hi');
  }
}

下面是使用function的語法。

var user = {
  sayHi: function () {
    console.log('Hi');
  }
}

而新舊語法中的this皆是指向呼叫函式的物件。

下面範例以object initializer notation的方式建立user物件時，使用三種方式來定義方法。

• 第一種(sayHi_1())為原本使用function定義的方式；
• 第二種(sayHi_2())為ES6省略function的簡寫方式；
• 第三種(sayHi_3())為ES6的arrow function。

在呼叫方法時，第一及第二種方式中的this指向呼叫函式的物件，也就是user；而第三種用arrow function定義的方法中this為空物件，因為arrow function並沒有自己的this。

var user = {
  name: 'matt',
  sayHi_1: function() {
    console.log(`Hi, I'm ${this.name}`); // ${this.name} 為ES6的template string語法
  },
  sayHi_2 () {
    console.log(`Hi, I'm ${this.name}`);
  },
  sayHi_3: () => {
    console.log(`Hi, I'm ${this.name}`);
  },
}

user.sayHi_1(); // => Hi, I'm matt
user.sayHi_2(); // => Hi, I'm matt
user.sayHi_3(); // => Hi, I'm undefined

上面的範例使用了JavaScript ES6的template string語法。

參考：

• MDN - Object initializer
• MDN - Arrow functions