【注意事項】関数矢印

序文

第III章「ECMAScript6を理解する」から抜粋この記事 - 機能は、主な内容は次のとおりです。伝統的な矢印関数の機能、構文との違いは、その上矢印、すぐにこの矢印機能を使用して機能を実行する関数を作成し、

差関数と従来の機能矢印

• この、スーパー、引数、また結合new.targetない：その値はどこに最も近い非矢印関数によって決定されています
• 新しい呼び出すことはできません：矢印機能しない[[コンストラクタ]]メソッドをコンストラクタが新しいものであるとして、呼び出すことはできません
• プロトタイプん：なしprototypeプロパティ
• あなたはこれを変更することはできません。この定数の値が含む関数によって決定され、その値の関数のライフサイクル全体
• 引数はオブジェクトん：矢印関数は引数、パラメータ、またはパラメータをバインドしない機能にアクセスするために、残りのパラメータに依存してきました
• パラメータを繰り返すことは許されない：strictモードまたは非strictモードかどうか、パラメータを複製ことはできません。

文法

単一のパラメータは、括弧を省略する場合

1 2 3 4 5 6 7

聞かせて FUNC = 値 => 値 // ES5 VaRの FUNC = 関数（値） { 戻り 値; }

パラメータの数、パラメータなしでは、括弧を必要とします

1 2 3 4 5 6

聞かせて 合計= （NUM1、NUM2）=> NUM1 + NUM2。 // ES5 VaRの 和= 関数（NUM1、NUM2） { 返す NUM1 + NUM2を。 }

1 2 3 4 5 6

聞かせて のgetNameは= （） => "ニコラス 。 // ES5 VAR のgetName = 機能（） { リターン "ニコラス 。 }

空の関数を作成します

1	せ doNothing = （） => {}

オブジェクトリテラルを返します：括弧でラップされたオブジェクトリテラルを、括弧は関数リテラルではない体を表します

1 2 3 4 5 6 7 8 9

let getObj = id => ({ id, name: 'u14e' }); // es5 var getObj = function(id) { return { id: id, name: 'u14e' } }

注意：上面的箭头函数都是没有使用花括号的，这种情况下js引擎默认添加了return。而使用花括号后，需要手动添加return语句，如果没加，函数将不返回值

创建立即执行函数

使用传统函数时，(function(){})()、(function(){}())都可以，而箭头函数只支持(() => {})();

1 2 3 4

let person = ( name => ({ getName: function() { 大专栏  【笔记】箭头函数d">return name } }))( 'Nicholas'); console.log(person.getName()); // Nicholas

没有this绑定

传统函数中的this可以被改变，其值取决于调用该函数时的上下文

1 2 3 4 5 6 7 8 9 10 11

var pageHandler = { id: '123456', init: function() { document.addEventListener( 'click', function(event) { this.doSomething(event.type); // 报错，因为this指向的时document，而不是pageHandler }, false); }, doSomething: function(type) { console.log(type); } }

使用bind()方法

1 2 3 4 5 6 7 8 9 10 11

var pageHandler = { id: '123456', init: function() { document.addEventListener( 'click', function(event) { this.doSomething(event.type); }.bind( this), false); }, doSomething: function(type) { console.log(type); } }

箭头函数没有this绑定，this只能通过查找作用域来确定。如果箭头函数被包含在一个非箭头函数内，那么this就与该函数的this相等；否则，this值为undefined

1 2 3 4 5 6 7 8 9 10 11

var pageHandler = { id: '123456', init: function() { document.addEventListener( 'click', event => { this.doSomething(event.type); }, false); }, doSomething: function(type) { console.log(type); } }

注意：由于箭头函数的this值由包含它的函数决定，因此不能使用call、apply、bind方法来改变this值

没有arguments对象

虽然箭头函数没有自己的arguments对象，但是可以访问包含它的函数的arguments对象

1 2 3 4 5 6 7

function () { リターン （） => 引数 [ 0 ]。 } た FUNC = FOO（ 3 ）。 コンソール の.log（FUNC（））。 // 3