當前位置:網站首頁>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

隨機推薦