es6中的箭頭函數

UsherChen 發布于2019-08-20 15:45 / 456人閱讀

摘要：箭頭函數箭頭函數相當于一個匿名函數同等于下面的匿名函數傳參如果箭頭函數含表達式就必須加和如果箭頭函數不是一個參數，參數就必須加兩個參數沒有參數可變參數是個如果的值是一個對象需要加進行區分，防止沖突箭頭函數中的由上下文決定寫法寫法錯誤

箭頭函數（arrow function）

箭頭函數相當于一個匿名函數

x => x * x;
//同等于下面的匿名函數
//x - >傳參
//x * x  -> return

function(x) {
    return x * x;
}

如果箭頭函數含表達式就必須加{...} 和 return

x => {
    if(x>10) {
        return x + x;
    }else {
        return x * x;
    }
}

如果箭頭函數不是一個參數，參數就必須加()->(x,y)

//兩個參數
(x,y) => x * y
//沒有參數
() = > 1 + 4
//可變參數
var fn = (x,...rest) => {
    for(var i = 0;i < rest.length; i++) {
        x += rest[i]
    }
    return x;
}
//rest是個Array [4,5]
fn(1,4,5);//10

如果return的值是一個對象需要加()進行區分，防止沖突

var fn = x => { foo: x }
fn(3);//undefined

var fn = x => ({ foo: x })
fn(3);//Object {foo: 3}

箭頭函數中的this由上下文決定

//es6 =>寫法

var obj = {
    age: 18,
    fnc : function (x) {
        var fn = x => this.age + x;//this->obj
        return fn(x);
    }
}
obj.fnc(5)//23

//es5寫法

//錯誤的寫法
var obj = {
    age: 18,
    fnc : function (x) {
        var fn = function (x) {
            return this.age + x;//this->window
        } 
        return fn(x);
    }
}
obj.fnc(5)//NaN
//正確的寫法
var obj = {
    age: 18,
    fnc : function (x) {
        var that = this;//this->obj
        var fn = function (x) {
            return that.age + x;
        } 
        return fn(x);
    }
}
obj.fnc(5)//23

如果用call()或者apply()調用箭頭函數時，無法對this進行綁定（傳入的第一個參數被忽略）：

var obj = {
    age: 18,
    fnc : function (x) {
        var fn = x => this.age + x;//this->obj
        return fn.call({age:20},x);//用call無法改變this的指向，箭頭函數中的age依然等于18
    }
}
obj.fnc(5)//23

云服務器 GPU云服務器 es6中的class es6中的promise 箭頭函數 javascript中的函數

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82463.html

es6 - 箭頭函數

摘要：也就是說箭頭函數的的值不再根據調用時上下文確定，而是像普通變量那樣根據定義時的作用域鏈進行查找。箭頭函數中的依然要根據定義時的作用域鏈進行查找。知乎這篇文章對箭頭函數的一些不適合的場景進行了總結，可以作為參考。 es6 - 箭頭函數哇，箭頭函數...，聽起來好NB，但是如果你知道它是因為使用了=>這樣類似箭頭的符號，所以才叫箭頭函數。瞬間感覺：呵，這名字起的...。 es6增加了...

13651657101 2019-08-26 11:46 評論0 收藏0
深入ES6：箭頭函數

摘要：令人震驚的箭頭函數引入了寫入函數的新語法。使用箭頭函數創建簡單對象時有一個警告。代碼因此被默默地解釋為一個不執行任何操作并返回未定義的箭頭函數。內部函數是一個箭頭函數，所以它從封閉范圍繼承此函數。箭頭從一開始就一直是JavaScript的一部分。第一個JavaScript教程建議在HTML注釋中包裝內聯腳本。這會阻止不支持JS的瀏覽器錯誤地將JS代碼顯示為文本。你會寫這樣的東西： ...

MasonEast 2019-08-22 17:14 評論0 收藏0
ES6 系列之箭頭函數

摘要：回顧我們先來回顧下箭頭函數的基本語法。主要區別包括沒有箭頭函數沒有，所以需要通過查找作用域鏈來確定的值。箭頭函數并沒有方法，不能被用作構造函數，如果通過的方式調用，會報錯。回顧我們先來回顧下箭頭函數的基本語法。 ES6 增加了箭頭函數： let func = value => value; 相當于： let func = function (value) { return ...

hsluoyz 2019-08-26 11:58 評論0 收藏0
ES6箭頭函數體中this指向哪里？

摘要：注意因為箭頭函數內部的是指向外層代碼塊的最近的，例中的函數的，所以我們可以通過改變外層代碼塊的的指向從而改變箭頭函數中的指向例中使用了函數的方法。一、this關鍵字小測試 ES6箭頭函數體中的this指向哪里？在回答這個問題之前先來揣揣你對this關鍵字的了解程度：（讓我們回到ES6之前）題： var obj = { a: function() { cons...

Half 2019-08-22 15:48 評論0 收藏0
帶你入門 JavaScript ES6 (三)

摘要：上一章我們學習了遍歷和擴展字符語法。本章我們主要學習中的箭頭函數箭頭函數更準確來說叫箭頭函數表達式。箭頭函數余普通函數功能相同，但語法差別比較大。帶你入門 JavaScript ES6 (三) 本文同步帶你入門 JavaScript ES6 (三)，轉載請注明出處。上一章我們學習了 for of 遍歷和擴展字符語法。本章我們主要學習 ES6 中的箭頭函數箭頭函數更準確來說叫箭...

劉福 2019-08-21 18:35 評論0 收藏0
【ES6系列】函數部分

摘要：正是因為它沒有，所以也就不能用作構造函數。不可以當作構造函數，也就是說，不可以使用命令，否則會拋出一個錯誤。不可以使用對象，該對象在函數體內不存在。箭頭函數在之前ES5的版本中，我們定義一個函數的形式如下： function a() { // do something…… } 但是在ES6中，則新增了箭頭函數的方式，ES6中允許使用箭頭（=>）來定義函數。 () => { ...

enda 2019-08-22 16:15 評論0 收藏0