當前位置:網站首頁>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
邊欄推薦
猜你喜歡
隨機推薦
- 快速解决:Xshell拖不進去文件夾或者軟件包的問題
- RHCSA--文件內容瀏覽、cut、uniq、sort、.tr命令使用
- 信號完整性(SI)電源完整性(PI)學習筆記(三十二)電源分配網路(四)
- EasyGBS平臺出現錄像無法播放並存在RTMP重複推流現象,是什麼原因?
- 第七天筆記
- 【可視化調度軟件】上海道寧為SMB組織帶來NETRONIC下載、試用、教程
- 概率沉思錄:2.The quantitative rules
- 常用的鼠標事件和鍵盤事件
- C#:in、out、ref關鍵字
- GRE,MGRE的詳細了解;OSPF基礎配置知識
- Creo 9.0 如何快速修改CAD坐標系?
- 第五天筆記
- 强化學習——策略梯度理解點
- shell跑的時候需要的需要了解命令
- OKRK3399開發板預留I2C4掛載EEPROM
- 優化華為雲服務器采用Key登陸
- 第2章 基礎查詢與排序
- 【C語言】猜數字小遊戲+關機小程序
- 什麼是Per-Title編碼?
- @FeignClient使用詳細教程(圖解)
- Kettle實現共享數據庫連接及插入更新組件實例
- 基於matlab的CBOC信號調制解調仿真,輸出其相關性,功率譜以及頻偏跟踪
- VSCode 更新後與tab相關快捷鍵無法使用
- 後綴錶達式(暑假每日一題 4)
- 關於初始化page入參的設計思路
- Bean Validation核心組件篇----04
- 動態規劃背包問題之完全背包詳解
- 死磕遞歸1:遞推公式
- SQL報錯盲注詳解
- 工業物聯網中的時序數據
- 配置Gom引擎登錄器出現錯誤提示:沒有發現必備補丁文件!
- 【215】gin框架連接mysql數據庫
- go中的協程原理詳解
- 【JZOF】13機器人的運動範圍
- PCL:多直線擬合(RANSAC)
- 1259. 不相交的握手 動態規劃
- 基於FPGA的UART接口設計
- elk筆記25--快速體驗APM
- 能量原理與變分法筆記19:最小餘能原理+可能功原理
- 梅科爾工作室-小熊派開發筆記2