AdSense

網頁

2017/10/31

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語法


參考:

沒有留言:

AdSense