簡(jiǎn)要認(rèn)識(shí)

箭頭函數(shù)是在ES6中添加的一種規(guī)范，簡(jiǎn)化了匿名函數(shù)定義的寫法。

基本格式

完整寫法

let fn = (x,y) => {return x + y; }//function()寫法 let fn = function(x,y) {return x + y; }

只有1個(gè)參數(shù)時(shí)，可以省略 ()

//只有1個(gè)參數(shù)時(shí)，可以省略 () let fn = x => {return x + x; }//function()寫法 let fn = function(x) {return x + x; }

沒(méi)有參數(shù)或有兩個(gè)以上參數(shù)時(shí)不能省略 ()?

let fn1 = () => {console.log("沒(méi)有參數(shù)，()不能省略"); }let fn2 = (x,y) => {console.log("兩個(gè)或以上參數(shù)，()不能省略");return x + y; }//function()寫法 let fn1 = function() {console.log("你瞧"); }let fn2 = function(x,y) {return x + y; }

只含一條語(yǔ)句，{ }?和 return 可以省略

//只含一條語(yǔ)句，{} 與 return 可以省略 let fn1 = x => x * x; let fn2 = (x,y) => x * y;//完整寫法 let fn1 = x => { return x * x; } let fn2 = (x,y) => { return x * y; }//function()寫法 let fn1 = function(x){return x * x; } let fn2 = function(x,y){return x * y; }

包含多條語(yǔ)句，{ } 和 return 不能省略

//包含多條語(yǔ)句，{} 與 return 不能省略 let fn = x => {console.log("x=",x);let y = x + x * x;return y; }//function()寫法 let fn = function(x){console.log("x=",x);let y = x + x * x;return y; }

返回對(duì)象字面量

省略寫法返回對(duì)象時(shí)注意需要使用 () 將對(duì)象包裹，否則瀏覽器會(huì)把對(duì)象的 {} 解析為箭頭函數(shù)的函數(shù)體開(kāi)始和結(jié)束標(biāo)記。

//需要使用()包裹對(duì)象 let obj = name => ({"name": name});//完整寫法 let obj = name => { return {"name": name}; }//function寫法 let obj = function(name) { return {"name": name}; }

this指向（重點(diǎn)！！！）

箭頭函數(shù)沒(méi)有自己的this，在箭頭函數(shù)的函數(shù)體中使用this時(shí)，會(huì)取得其上下文中的this。箭頭函數(shù)調(diào)用時(shí)并不會(huì)生成自身作用域下的this，它只會(huì)從自己的作用域鏈的上一層繼承this。由于箭頭函數(shù)沒(méi)有自己的this指針，使用apply、call、bind僅能傳遞參數(shù)而不能動(dòng)態(tài)改變箭頭函數(shù)的this指向。

（以下例子均在vue組件中的mounted()鉤子執(zhí)行）

不能作為構(gòu)造器

let fn = () => {}; new fn() // Uncaught TypeError: fn is not a constructor

不綁定arguments

let fn1 = (x, y) => {console.log(x, y);console.log("箭頭函數(shù)中的arguments：",arguments);};let fn2 = function (x, y) {console.log(x, y);console.log("匿名函數(shù)function()中的arguments：",arguments);};fn1(1, 2);fn2(1, 2);

如下所示，箭頭函數(shù)中的arguments長(zhǎng)度為0，即未綁定arguments對(duì)象

對(duì)象的方法使用箭頭函數(shù)

//對(duì)象方法中使用箭頭函數(shù)let obj1 = {name: "leo",showName: () => {console.log("this：", this);console.log("this.name：", this.name);},};//對(duì)象方法中使用匿名函數(shù)function()let obj2 = {name: "leo",showName: function () {console.log("this：", this);console.log("this.name：", this.name);},};obj1.showName();obj2.showName();

箭頭函數(shù)中的this是當(dāng)前組件實(shí)例（當(dāng)前上下文對(duì)象），不是obj1，由于組件實(shí)例name未定義，因此為undefined；而匿名函數(shù)function()中的this指向調(diào)用該方法的對(duì)象，即obj2，因此name為leo。

數(shù)組方法中使用箭頭函數(shù)

let arr = ["leo"]arr.forEach(()=>{console.log(this) //在vue中，則this表示當(dāng)前組件實(shí)例})

定時(shí)器中使用箭頭函數(shù)

setTimeout(()=>{console.log(this) //在vue中，則this為當(dāng)前組件實(shí)例},100)setTimeout(function(){console.log(this) //this為Window},100)

addEventListener使用箭頭函數(shù)

let el = document.getElementById("pId")el.addEventListener("click",() => {console.log(this) //在vue中，則this為當(dāng)前組件實(shí)例，而不是el元素}) let el = document.getElementById("pId");el.addEventListener("click", function () {console.log(this); //this為當(dāng)前el元素});

apply、call、bind中使用箭頭函數(shù)?

let obj1 = {name: "leo",showName: function () { //使用匿名函數(shù)function()，當(dāng)前this.name為"leo"console.log(this.name);},};let obj2 = {name: "lion",};obj1.showName.apply(obj2); //可以改變this指向，此時(shí)this.name為"lion"，call、bind同理 let obj1 = {name: "leo",showName: () => { //使用箭頭函數(shù)，當(dāng)前this.name為"undefined"console.log(this.name);},};let obj2 = {name: "lion",};obj1.showName.apply(obj2); //不能改變this指向，this.name仍為"undefined"，call、bind同理

注意：如果this依賴于當(dāng)前作用域，使用匿名函數(shù)function()形式；如果this取上下文對(duì)象（沒(méi)有自身作用域的this），則使用箭頭函數(shù)形式。

總結(jié)

以上是生活随笔為你收集整理的Js 箭头函数 详细介绍（多种使用场景差异，你学会了吗？）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。