當前位置:網站首頁>ES6---箭頭函數
ES6---箭頭函數
2022-01-27 23:47:58 【南初️】
一、基本用法
- 特點:保證上下文this指針一致
- ES6 允許使用“箭頭”(=>)定義函數。
- 如果箭頭函數不需要參數或需要多個參數,就使用一個圓括號代錶參數部分。
var f=()=>5; console.log(f());//5 //等同於 var f=function(){ return 5;} console.log(f());//5 var sum=(num1,num2)=>num1+num2; console.log(sum(1, 2));//3 //等同於 var sum=function(num1,num2){ return num1+num2; } console.log(sum(1, 2));//3
- 如果箭頭函數的代碼塊部分多於一條語句,就要使用大括號將它們括起來,並且使用return語句返回。
- 由於大括號被解釋為代碼塊,所以如果箭頭函數直接返回一個對象,必須在對象外面加上括號,否則會報錯。
let obj=()=>({ a:1,b:2}); console.log(obj());//{a: 1, b: 2} let obj=()=>{ a:1,b:2}; console.log(obj());//報錯SyntaxError: Unexpected token :
二、箭頭函數的寫法
- 箭頭函數可以分為有返回值和無返回值
1. 沒有返回值
(1)不帶參數
//不帶參 let data = () => { }
(2)帶參數
//1個參 //es5寫法 let data1 = function(a){ } //es6寫法 let data2 = a => { } //2個參 //es5寫法 let data3 = function(a,b){ } //es6寫法 let data2 = (a,b) => { }
2. 有返回值
let d1 = () => { return 123; } let d2 = () => 123;
- 返回對象
let d3 = () => ({ a:1,b:2}); console.log(d3()); //但是不能像下面這樣寫,會報錯 let d3 = () => { a:1,b:2}; console.log(d3());//報錯
3. 對象上的函數es6縮寫
let stus = { eat(){ } }
三、箭頭函數可以與變量解構結合使用
const obj={ first:1,last:2}; const full=({ first,last})=>first+' '+last; console.log(full(obj));//1 2 //等同於 function full(person){ return person.first+' '+person.last; } console.log(full(obj));//1 2
四、箭頭函數簡化回調函數
//普通函數 [1,2,3].map(function(x){ return x*x; }); //箭頭函數 [1,2,3].map(x=>x*x);
五、rest 參數與箭頭函數
const numbers= (...nums)=>nums; console.log(numbers(1, 2, 3, 4, 5));//[1, 2, 3, 4, 5] const a=(head,...tail)=>[head,tail]; console.log(a(1, 2, 3, 4, 5));//[1,[2,3,4,5]]
六、計時器裏面的箭頭函數的使用
let obj = { sleep:function(){ console.log(this);//sleep setTimeout(function(){ console.log(this);//window },1000); } }; obj.sleep();
- 計時器裏面的this指針指的是window,那麼怎樣讓this指針指向當前對象呢?
let obj = { sleep:function(){ console.log(this);//sleep setTimeout(()=>{ console.log(this);//sleep },1000); } }; obj.sleep();
- 可以使用箭頭函數來實現,因為箭頭函數可以保證上下文this指針一致。
七、箭頭函數使用注意點
- (1)箭頭函數沒有自己的this對象。
- (2)不可以當作構造函數,也就是說,不可以對箭頭函數使用new命令,否則會拋出一個錯誤。
- (3)不可以使用arguments對象,該對象在函數體內不存在。如果要用,可以用 rest 參數代替。
- (4)不可以使用yield命令,因此箭頭函數不能用作 Generator 函數。
對於普通函數來說,內部的this指向函數運行時所在的對象,但是這一點對箭頭函數不成立。它沒有自己的this對象,內部的this就是定義時上層作用域中的this。也就是說,箭頭函數內部的this指向是固定的,相比之下,普通函數的this指向是可變的。
八、箭頭函數不適用場景
- (1)第一個場合是定義對象的方法,且該方法內部包括this。
let stu = { sleep:() => { console.log(this);//window } } stu.sleep(); }
- (2)第二個場合是需要動態this的時候,也不應使用箭頭函數。
var button = document.getElementById('press'); button.addEventListener('click', () => { this.classList.toggle('on'); });
- 上面代碼運行時,點擊按鈕會報錯,因為button的監聽函數是一個箭頭函數,導致裏面的this就是全局對象。如果改成普通函數,this就會動態指向被點擊的按鈕對象。
九、箭頭函數嵌套問題
- 嵌套之後,找最外層的this
let fun={ sleep(){ console.log(this);//sleep return ()=>{ console.log(this);//sleep } } } fun.sleep()();
版權聲明
本文為[南初️]所創,轉載請帶上原文鏈接,感謝
https://cht.chowdera.com/2022/01/202201272347574683.html
邊欄推薦
猜你喜歡
隨機推薦
- 【正點原子FPGA連載】 第三十五章 基於OV7725的PL以太網視頻傳輸實驗-摘自【正點原子】領航者ZYNQ之FPGA開發指南_V2.0
- Openstackan實驗之glance組件安裝與配置
- 達人評測 realme Book 增强版 Air 怎麼樣
- 運動規劃和SLAM什麼關系?
- 有效的括號
- MySQL-5.7.36安裝遇到坑之後的整理,刻入骨髓的1045
- UiPath的許可查詢、激活、遷移和導出
- 遞歸以及for循環裏async 和 await 的用法
- 大人重疾險想保終身重疾,買哪個產品最合適啊?
- 再探 redis 分布式鎖
- php使用openssl_encrypt和openssl_decrypt進行AES加密解密
- 【2021最後一波官方福利】七天玩轉Redis | 打卡還能領周邊活動開始啦
- CV in Transformer學習筆記(持續更新)
- flask入門教程(7) - 會話
- 【電子技術】什麼是循環冗餘碼CRC
- HLS編程入門
- Anconda 學習
- 多線程的實現方式
- Shell編寫格式和執行方式
- 基於kubernetes的Prometheus監控mysql
- 什麼是光纖隔離器?
- @Inherit注解與注解的繼承
- 五、OpenGL ES 三維圖形的初探
- jupyter notebook代碼提示設置
- 【BUG記錄】com.alibaba.nacos.api.exception.NacosException: Request nacos server failed
- 如果對象的引用被置為null,;垃圾回收器是否會立即釋放對象占用的內存?
- 使用Redis搭建電商秒殺系統
- 兩種方法,word文件轉換成PDF文件
- 有符號數(signed) 和 無符號數(unsigned)
- 道與術
- 少兒消費型重疾目前那個比較好一點?有沒有推薦的產品
- 猪器官又立功了!移植轉基因猪腎給腦死亡病人,23分鐘後成功產生尿液
- [機器學習算法面試題] 一.准確率Accuracy的局限性
- Flink(50):Flink之綜合練習(二)
- String類常用方法示例
- 邏輯樹分析方法:如何將複雜問題變簡單?
- 數組和鏈錶插入效率比較
- 2021年P氣瓶充裝考試及P氣瓶充裝試題及解析
- jangow靶機滲透
- Vision Transformer(Pytorch版)代碼閱讀注釋