物件直接量內方法的寫法

隨著ES2015版本的釋出，很多新的語法結構被解鎖。

本文主要介紹一下物件直接量內新增的方法寫法。

首先看一段程式碼例項：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let antzone={
  webName:"螞蟻部落",
  show:function(){
    console.log(this.webName);
  }
}
antzone.show();

程式碼執行效果截圖如下：

上述程式碼是ES2015之前物件直接量內方法的書寫方法。

下面再來介紹一下ES2015新增的書寫方法。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let antzone={
  webName:"螞蟻部落",
  show(){
    console.log(this.webName);
  }
}
antzone.show();

程式碼執行效果截圖如下：

上面的程式碼就是ES2015新增的寫法，可以看到方法的定義進行了簡化。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
var webName="JavaScript教程"; 
let antzone={
  webName:"螞蟻部落",
  show:()=>{
    console.log(this.webName);
  }
}
antzone.show();

程式碼執行效果截圖如下：

ES2015新增箭頭函式，物件直接量內的方法採用箭頭函式方式。

需要特別注意的是，呼叫方法的列印結果是"JavaScript教程"，為什麼不是"螞蟻部落呢"。

下面簡略介紹一下this的指向問題。

一.普通函式情況：

有一條規則，函式中的this總是指向呼叫此函式的物件。

程式碼如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let obj={
  address:"青島市南區",
  func:function(){
    console.log(this.address)
  }
}
obj.func()

程式碼執行效果截圖如下：

obj物件呼叫func方法，列印結果是"青島市南區"。

很明顯，this指向obj物件，印證了this指向方法呼叫者這個結論。

如果方法沒有顯式物件呼叫，分兩種情況：

（1）.非嚴格模式下，函式中的this指向window物件。

（2）.嚴格模式下，函式中的this為undefined。

二.箭頭函式情況：

箭頭函式this與普通函式中的this相比有了巨大改變。

它自身並沒有this，但是可以捕獲它宣告時，所在作用域的this。

下面再來回顧一下前面的程式碼：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
var webName="JavaScript教程"; 
let antzone={
  webName:"螞蟻部落",
  show:()=>{
    console.log(this.webName);
  }
}
antzone.show();

大家知道上述程式碼的列印結果是"JavaScript教程"。

由於物件直接量這個大括號並不能生成一個作用域，所以箭頭函式中的this不是指向antzone。

於是上溯到全域性作用域，所以this指向window物件。

相關閱讀：

（1）.箭頭函式可以參閱JavaScript 箭頭函式一章節。

（2）.this可以參閱JavaScript this詳解一章節。