1. 程式人生 > 其它 >js箭頭函式

js箭頭函式

箭頭函式

箭頭函式表示式的語法比函式表示式更簡潔,並且沒有自己的this、arguments、super。箭頭函式更適用於那些本身不需要匿名函式的地方,而且它不能作為建構函式。

一、語法:

基本語法:

let fun = ()=>console.log('fun()');

需要注意的是:

1、形參的位置:

  ·沒有形參的情況下,()不能省略;

  ·當只有一個形參的情況下,()可以省略;

  ·當有多個形參的情況下,()不可省略;

2、箭頭的右邊 --->函式體

  ·當函式體只有一條語句或者表示式的時候,{}可以省略,如果省略{}會自動返回當前語句或者表示式的結果;

  ·當函式體有多條語句或者表示式的時候,{}可以省略,如果省略{}會自動返回當前的語句或者表示式的結果;

二、沒有單獨的this

在箭頭函數出現之前,每一個新函式根據它是如何被呼叫的this值:

  ·如果該函式是一個建構函式,this指標指向一個新的物件;

  ·在嚴格模式下的函式呼叫下,this指向undefined;

  ·如果該函式是一個物件的方法,則它的this指標指向這個物件;

例如:

      function Person() {
            // Person()建構函式定義‘this’作為它自己的例項
            this.age=0;
            setInterval(function growUp() {
                // 在非嚴格模式,growUp()函式定義‘this’作為全域性物件,
                // 與在Person()建構函式中定義的‘this’並不相同
                this.age++;
                // console.log(this.age);//空
            },1000);
            this.age++;
            console.log(this.age);//1
       }

通過將this值分配給封閉給封閉的變數,可以解決this的問題:

 function Person() {
        var that = this;
        that.age = 0;

        setInterval(function growUp() {
            // 回撥引用的是`that`變數, 其值是預期的物件.
            that.age++;
            // console.log(that.age);
        }, 1000);
    }

而對於箭頭函式:

    function Person() {
        this.age = 0;

        setInterval(() => {
            this.age++; // |this| 正確地指向 p 例項
            // console.log(this.age);
        }, 1000);
    }

    var p = new Person();

三、與嚴格模式的關係

在嚴格模式下,嚴格模式中與this相關的規則都將被忽略,其他規則不變

 var f = () => {
        'use strict';
        return this;
    };
    // console.log(f() === window) // 或者 global,返回true

嚴格模式的其他規則依然不變。