js箭頭函式
阿新 • • 發佈:2021-07-21
箭頭函式
箭頭函式表示式的語法比函式表示式更簡潔,並且沒有自己的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
嚴格模式的其他規則依然不變。