當前位置：網站首頁>ES6箭頭函數的使用

ES6箭頭函數的使用

2022-07-23 22:31:15【InfoQ】

前言

箭頭函數是
ES6
當中對函數的一種全新的錶示方法，看起來也非常簡潔，我在之前也經常使用，但是沒有整體的學習，今天突發奇想，决定進一步的學習一下箭頭函數

起步

我們以前在寫函數的時候會這樣寫
function fun() {
   return 100;
}

console.log(fun());     //100
也會這樣寫
const fun = function() {
   return 100;
}

console.log(fun());     //100
在ES6中，我們將代碼簡化
const fun1 = () => {
   return 100;
}
console.log(fun1());     //100
再次簡化
const fun2 = x => x;
console.log(fun2(100));     //100
  • ()中定義參數，如果只有一個參數，()可以省略
  • {}中寫函數體，如果函數體中只有返回值，可以不寫return

箭頭函數與普通函數的區別

舉個例子

let obj = {
   name: '小明',
   age: 3,
   sayName() {
       setTimeout(function() {
           console.log("我是" + this.name);
       }, 500)
   }
}
obj.sayName();
這串代碼執行結束後，打印的是 
我是undefined
 ，那麼為什麼“小明”不能被打印出來呢？
let obj = {
   name: '小明',
   age: 3,
   sayName() {
       setTimeout(function() {
           console.log(this);
       }, 500)
   }
}
obj.sayName();
所以我們打印一下this，打印的結果是window對象，所以這個this指向的是window對象，也就是全局對象。因為這裏的代碼是sayName函數裏面套了一個函數，內函數裏面的this指向不到
小明
，但是sayName函數的this可以指到
小明
，解决的辦法就是在sayName函數裏定義一個變量，值為this，內函數再通過變量指向
小明
，代碼如下
let obj = {
   name: '小明',
   age: 3,
   sayName() {
       let self = this;
       setTimeout(function() {
           console.log("我是" + self.name);
       }, 500)
   }
}
obj.sayName();
這樣就能够打印出
我是小明
了

使用箭頭函數

看下面這串使用了箭頭函數的代碼
let obj = {
   name: '小明',
   age: 3,
   sayName() {
       setTimeout(() => {
           console.log("我是" + this.name);
       }, 500)
   }
}
obj.sayName();
打印的結果就是 
我是小明
我想你們和我都有同樣的一個疑惑：為什麼使用箭頭函數就可以實現了呢？

箭頭函數與普通函數的區別

  • this指向不同
  • 普通函數：誰調用這個函數，
    this
    指向誰
  • 箭頭函數：在哪裏定義函數，
    this
    指向誰

片尾

嘻嘻嘻，小白暫時用到的也就這麼多（其實我就是會這麼多），後續我會繼續更新這篇博客的

版權聲明
本文為[InfoQ]所創，轉載請帶上原文鏈接，感謝
https://cht.chowdera.com/2022/204/202207232229161245.html

邊欄推薦

猜你喜歡

隨機推薦