2018年6月23日 星期六

【JavaScript】ES6 arrow function箭頭函式、立即表達式、this是什麼



這一次學了好多我之前完全不懂的東西(爽)

箭頭函式

原本的寫法

function saysomthing(some){
 console.log(some)

}

saysomthing("你好") //輸出“你好”

箭頭寫法

var saysomthing = (a,b) => {    //外面的括號可以省略
     console.log(a,b)
}

saysomthing("你好,很好") //輸出“你好,很好”

立即表達式 (){}()

要多寫saysomthing(“你好”)太麻煩了,想要直接啟用函式
(function(){console.log(""你好)})()

this是什麼

var nissen = {
      name: "Nishan",
      age: 20,
      play: function () {
          console.log(this.age); //這邊的this等於nissen這個物件

      }
  nissen.play()  //輸出20

用arrow function解決this的奇怪問題

可是如果在play function裡面多放一個函式,this就會出現奇怪的問題
 var nissen = {
     name: "Nishan",
     age: 20,
     play: function () {
         console.log(this.age);
         (function () {
             console.log(this) //這邊的this會出現環境的window資訊
         })()  //使用立即表達式
     }

 }
因此arrow function,就可以解決這個問題
var nissen = {
     name: "Nishan",
     age: 20,
     play: function () {
         console.log(this.age);
         (() => {
             console.log(this); //這邊的this就變回nissen物件了
         })(); //用箭頭函式來寫
     }
 }

沒有留言:

張貼留言