箭頭函數(shù)你想知道的都在這里

xiaoqibTn 發(fā)布于2019-08-23 16:44 / 1141人閱讀

摘要：沒有箭頭函數(shù)沒有自己的對象，這不一定是件壞事，因為箭頭函數(shù)可以訪問外圍函數(shù)的對象那如果我們就是要訪問箭頭函數(shù)的參數(shù)呢你可以通過命名參數(shù)或者參數(shù)的形式訪問參數(shù)不能通過關(guān)鍵字調(diào)用函數(shù)有兩個內(nèi)部方法和。

1、基本語法回顧

我們先來回顧下箭頭函數(shù)的基本語法。
ES6 增加了箭頭函數(shù)：

var f = v => v;

// 等同于
var f = function (v) {
  return v;
};

如果箭頭函數(shù)不需要參數(shù)或需要多個參數(shù)，就使用一個圓括號代表參數(shù)部分。

var f = () => 5;
// 等同于
var f = function () { return 5 };

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};

由于大括號被解釋為代碼塊，所以如果箭頭函數(shù)直接返回一個對象，必須在對象外面加上括號，否則會報錯。

// 報錯
let getTempItem = id => { id: id, name: "Temp" };

// 不報錯
let getTempItem = id => ({ id: id, name: "Temp" });

下面是一種特殊情況，雖然可以運行，但會得到錯誤的結(jié)果。

let foo = () => { a: 1 };
foo() // undefined

上面代碼中，原始意圖是返回一個對象{ a: 1 }，但是由于引擎認(rèn)為大括號是代碼塊，所以執(zhí)行了一行語句a: 1。這時，a可以被解釋為語句的標(biāo)簽，因此實際執(zhí)行的語句是1;，然后函數(shù)就結(jié)束了，沒有返回值。

關(guān)于作用域

箭頭函數(shù)內(nèi)定義的變量及其作用域

// 常規(guī)寫法
var greeting = () => {let now = new Date(); return ("Good" + ((now.getHours() > 17) ? " evening." : " day."));}
greeting();          //"Good day."
console.log(now);    // ReferenceError: now is not defined 標(biāo)準(zhǔn)的let作用域

// 參數(shù)括號內(nèi)定義的變量是局部變量（默認(rèn)參數(shù)）
var greeting = (now=new Date()) => "Good" + (now.getHours() > 17 ? " evening." : " day.");
greeting();          //"Good day."
console.log(now);    // ReferenceError: now is not defined

// 對比：函數(shù)體內(nèi){}不使用var定義的變量是全局變量
var greeting = () => {now = new Date(); return ("Good" + ((now.getHours() > 17) ? " evening." : " day."));}
greeting();           //"Good day."
console.log(now);     // Fri Dec 22 2017 10:01:00 GMT+0800 (中國標(biāo)準(zhǔn)時間)

// 對比：函數(shù)體內(nèi){} 用var定義的變量是局部變量
var greeting = () => {var now = new Date(); return ("Good" + ((now.getHours() > 17) ? " evening." : " day."));}
greeting(); //"Good day."
console.log(now);    // ReferenceError: now is not defined

2、關(guān)于this 2.1、默認(rèn)綁定外層this

箭頭函數(shù)沒有 this，所以需要通過查找作用域鏈來確定 this 的值。
這就意味著如果箭頭函數(shù)被非箭頭函數(shù)包含，this 綁定的就是最近一層非箭頭函數(shù)的 this。

function foo() {
  setTimeout(() => {
    console.log("id:", this.id);
  }, 100);
}

var id = 21;

foo.call({ id: 42 });
// id: 42

上面代碼中，setTimeout的參數(shù)是一個箭頭函數(shù)，這個箭頭函數(shù)的定義生效是在foo函數(shù)生成時，而它的真正執(zhí)行要等到 100 毫秒后。如果是普通函數(shù)，執(zhí)行時this應(yīng)該指向全局對象window，這時應(yīng)該輸出21。但是，箭頭函數(shù)導(dǎo)致this總是指向函數(shù)定義生效時所在的對象（本例是{id: 42}），所以輸出的是42。
箭頭函數(shù)可以讓setTimeout里面的this，綁定定義時所在的作用域，而不是指向運行時所在的作用域。

所以，箭頭函數(shù)轉(zhuǎn)成 ES5 的代碼如下。

// ES6
function foo() {
  setTimeout(() => {
    console.log("id:", this.id);
  }, 100);
}

// ES5
function foo() {
  var _this = this;

  setTimeout(function () {
    console.log("id:", _this.id);
  }, 100);
}

2.2、不能用call()、apply()、bind()方法修改里面的this

(function() {
  return [
    (() => this.x).bind({ x: "inner" })() // 無效的bind,最終this還是指向外層
  ];
}).call({ x: "outer" });
// ["outer"]

上面代碼中，箭頭函數(shù)沒有自己的this，所以bind方法無效，內(nèi)部的this指向外部的this。

3、沒有 arguments

箭頭函數(shù)沒有自己的 arguments 對象，這不一定是件壞事，因為箭頭函數(shù)可以訪問外圍函數(shù)的 arguments 對象：

function constant() {
    return () => arguments[0]
}

var result = constant(1);
console.log(result()); // 1

那如果我們就是要訪問箭頭函數(shù)的參數(shù)呢？

你可以通過命名參數(shù)或者 rest 參數(shù)的形式訪問參數(shù):

let nums = (...nums) => nums;

4、不能通過 new 關(guān)鍵字調(diào)用

JavaScript 函數(shù)有兩個內(nèi)部方法：[[Call]] 和 [[Construct]]。

當(dāng)通過new調(diào)用函數(shù)時，執(zhí)行[Construct]]方法，創(chuàng)建一個實例對象，然后再執(zhí)行函數(shù)體，將 this 綁定到實例上。

當(dāng)直接調(diào)用的時候，執(zhí)行[[Call]]方法，直接執(zhí)行函數(shù)體。

箭頭函數(shù)并沒有[[Construct]]方法，不能被用作構(gòu)造函數(shù)，如果通過 new 的方式調(diào)用，會報錯。

var Foo = () => {};
var foo = new Foo(); // TypeError: Foo is not a constructor

5、沒有原型

由于不能使用new調(diào)用箭頭函數(shù)，所以也沒有構(gòu)建原型的需求，于是箭頭函數(shù)也不存在prototype這個屬性。

var Foo = () => {};
console.log(Foo.prototype); // undefined

5、不適用場合

第一個場合是定義函數(shù)的方法，且該方法內(nèi)部包括this。

const cat = {
  lives: 9,
  jumps: () => {
    this.lives--;
  }
}

上面代碼中，cat.jumps()方法是一個箭頭函數(shù)，這是錯誤的。調(diào)用cat.jumps()時，如果是普通函數(shù)，該方法內(nèi)部的this指向cat；如果寫成上面那樣的箭頭函數(shù)，使得this指向全局對象，因此不會得到預(yù)期結(jié)果。
第二個場合是需要動態(tài)this的時候，也不應(yīng)使用箭頭函數(shù)。

var button = document.getElementById("press");
button.addEventListener("click", () => {
  this.classList.toggle("on");
});

上面代碼運行時，點擊按鈕會報錯，因為button的監(jiān)聽函數(shù)是一個箭頭函數(shù)，導(dǎo)致里面的this就是全局對象。如果改成普通函數(shù)，this就會動態(tài)指向被點擊的按鈕對象。

6、使用場景

下面這個是我們開發(fā)經(jīng)常遇到的。我們一般會通過this賦值給一個變量，然后再通過變量訪問。

class Test {
    constructor() {
        this.birth = 10;  
    }
    submit(){
        let self = this;
        $.ajax({          
            type: "POST",
            dataType: "json",
            url: "xxxxx" ,//url
            data: "xxxxx",
            success: function (result) {
                console.log(self.birth);//10
            },
            error : function() {}                   
        });
    }
}
let test = new Test();
test.submit();//undefined

這里我們就可以通過箭頭函數(shù)來解決

...
success: (result)=> {
    console.log(this.birth);//10
},
...

箭頭函數(shù)在react中的運用場景

class Foo extends Component {
  constructor(props) {
    super(props);
  }
  handleClick() {
    console.log("Click happened", this);
    this.setState({a: 1});
  }
  render() {
    return ;
  }
}

在react中我們這樣直接調(diào)用方法是有問題的，在handleClick函數(shù)中的this是有問題，我們平時需要這么做

class Foo extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    console.log("Click happened", this);
    this.setState({a: 1});
  }
  render() {
    return ;
  }
}

這里通過this.handleClick.bind(this)給函數(shù)綁定this。但是這樣寫起來有些麻煩，有沒有簡單的方法呢？這時候我們的箭頭函數(shù)就出場了

class Foo extends Component {
  // Note: this syntax is experimental and not standardized yet.
  handleClick = () => {
    console.log("Click happened", this);
    this.setState({a: 1});
  }
  render() {
    return ;
  }
}

箭頭函數(shù)中 this 的值是繼承自外圍作用域,很好的解決了這個問題。
除此之外我們還可以用箭頭函數(shù)傳參(這個不是必須的)，而且會有性能問題。更多信息請查看

const A = 65 // ASCII character code

class Alphabet extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.state = {
      justClicked: null,
      letters: Array.from({length: 26}, (_, i) => String.fromCharCode(A + i)).
    };
  }
  handleClick(letter) {
    this.setState({ justClicked: letter });
  }
  render() {
    return (
      
        Just clicked: {this.state.justClicked}
        
          {this.state.letters.map(letter =>
             this.handleClick(letter)}>
              {letter}
            
          )}
        
      
    )
  }
}

最后
更多系列文章請看

ES6學(xué)習(xí)（一）之var、let、const

ES6學(xué)習(xí)（二）之解構(gòu)賦值及其原理

ES6學(xué)習(xí)（三）之Set的模擬實現(xiàn)

ES6學(xué)習(xí)（四）之Promise的模擬實現(xiàn)

如果有錯誤或者不嚴(yán)謹(jǐn)?shù)牡胤?，請?wù)必給予指正，十分感謝。如果喜歡或者有所啟發(fā)，歡迎star對作者也是一種鼓勵。

云服務(wù)器 GPU云服務(wù)器箭頭函數(shù) 這里并未重試用到顯卡的都叫g(shù)pu服務(wù)器么一般租云服務(wù)器的都是干嘛的

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/103207.html

發(fā)表評論

登陸后可評論

0條評論

xiaoqibTn

男|高級講師

我要關(guān)注我要私信

TA的文章

tensorflow的版本

閱讀 2149·2023-04-25 18:49
vue 中echart折線自適應(yīng)

閱讀 1854·2019-08-30 14:02
簡單的選項卡切換效果

閱讀 2657·2019-08-29 17:24
body標(biāo)簽子級被默認(rèn)client width截斷的解決方法

閱讀 3334·2019-08-28 18:10
CSS Grid布局：什么是網(wǎng)格布局

閱讀 2938·2019-08-28 18:03
太原面經(jīng)分享：如何在vue面試環(huán)節(jié)，展示你晉級阿里P6+的技術(shù)功底？

閱讀 502·2019-08-26 12:01
2017年 JavaScript 框架回顧 -- 后端框架

閱讀 3322·2019-08-26 11:31
【譯】教你如何避開「Cannot read property of undefined」

閱讀 1442·2019-08-26 10:29

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

箭頭函數(shù)你想知道的都在這里

相關(guān)文章

關(guān)于 this 你想知道的一切都在這里

**零基礎(chǔ) | 入行軟件測試，你想知道的都在這里了**

**阿里云云上年中鉅惠來啦！你想知道的都在這里！**

淺談箭頭函數(shù)

**關(guān)于區(qū)塊鏈通證模型，你想知道的都在這**

發(fā)表評論

0條評論

xiaoqibTn

男|高級講師

TA的文章

tensorflow的版本

vue 中echart折線自適應(yīng)

簡單的選項卡切換效果

body標(biāo)簽子級被默認(rèn)client width截斷的解決方法

CSS Grid布局：什么是網(wǎng)格布局

太原面經(jīng)分享：如何在vue面試環(huán)節(jié)，展示你晉級阿里P6+的技術(shù)功底？

2017年 JavaScript 框架回顧 -- 后端框架

【譯】教你如何避開「Cannot read property of undefined」

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

箭頭函數(shù)你想知道的都在這里

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！