es6 arrow 関数は関数型プログラミングですか?

＃＃＃＃＃＃はい。アロー関数は関数型プログラミングの表現です。関数型プログラミングは入力と出力の関係に重点を置き、プロセス内のいくつかの要素を省略します。したがって、アロー関数には独自の this、引数、新しいターゲット (ES6) はありません。 super (ES6); アロー関数は匿名関数と同等であるため、new をコンストラクターとして使用することはできません。

このチュートリアルの動作環境: Windows 7 システム、ECMAScript バージョン 6、Dell G3 コンピューター。

アロー関数アロー関数は ES6 で導入された新機能です。関数を定義するには「矢印」(=>) を使用します。

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

アロー関数にパラメータが必要ない場合、または複数のパラメータが必要な場合は、括弧を使用してパラメータ部分を表します。

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

アロー関数のコード ブロックが複数のステートメントである場合は、中かっこを使用してステートメントを囲み、return ステートメントを使用して戻ります。

var sum = (num1, num2) => { return num1 + num2; }

中括弧はコード ブロックとして解釈されるため、アロー関数が直接オブジェクトを返す場合は、オブジェクトの外側に括弧を追加する必要があります。追加しないとエラーが報告されます。

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

以下は特殊なケースであり、実行できますが、間違った結果が得られます。

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

上記のコードでは、本来の目的はオブジェクト { a: 1 } を返すことですが、エンジンは中括弧がコード ブロックであると考えるため、ステートメント a: 1 の行を実行します。このとき、a は文のラベルとして解釈できるため、実際に実行される文は 1; となり、戻り値を返さずに関数は終了します。

アロー関数のステートメントが 1 行のみで、値を返す必要がない場合は、中括弧を書かずに次の記述方法を使用できます。

let fn = () => void doesNotReturn();

アロー関数は、関数型プログラミングの表現です。関数型プログラミングは、入力と出力の関係に重点を置き、関係のいくつかの要素を排除します。したがって、アロー関数には独自の this、引数、新しいターゲット (ES6) およびスーパー (ES6) がありません。アロー関数は匿名関数と同等であるため、new をコンストラクターとして使用することはできません。

アロー関数内の this は、常にその親スコープ内の this を指します。言い換えれば、アロー関数は、それが配置されているコンテキストの this 値を独自の this 値としてキャプチャします。そのポインタは、call()、bind()、apply() などのメソッドによって変更することはできません。アロー関数で this を呼び出す場合、スコープ チェーンを検索して最も近い this を見つけて使用しますが、呼び出しのコンテキストとは何の関係もありません。コードを使って説明してみましょう。

const full = ({ first, last }) => first + ' ' + last; // 等同于 function full(person) { return person.first + ' ' + person.last; }

const isEven = n => n % 2 === 0; const square = n => n * n;

// 正常函数写法 [1,2,3].map(function (x) { return x * x; }); // 箭头函数写法 [1,2,3].map(x => x * x);

// 正常函数写法 var result = values.sort(function (a, b) { return a - b; }); // 箭头函数写法 var result = values.sort((a, b) => a - b);

次は、rest パラメータと次のパラメータを組み合わせる例です。アロー機能。

const numbers = (...nums) => nums; numbers(1, 2, 3, 4, 5) // [1,2,3,4,5] const headAndTail = (head, ...tail) => [head, tail]; headAndTail(1, 2, 3, 4, 5) // [1,[2,3,4,5]]

アロー関数には使用上の注意がいくつかあります。

(1) 関数本体内の this オブジェクトは、それが使用されるオブジェクトではなく、定義されるオブジェクトです。

(2) はコンストラクターとして使用できません。つまり、新しいコマンドは使用できません。そうでない場合は、エラーがスローされます。

(3) 引数オブジェクトは関数本体に存在しないため使用できません。これを使用したい場合は、代わりにrestパラメータを使用できます。

(4) yield コマンドが使用できないため、アロー関数をジェネレーター関数として使用できません。

上記の 4 点のうち、特に注目すべき点は 1 つ目です。このオブジェクトのポインタは可変ですが、アロー関数では固定です。

function foo() { setTimeout(() => { console.log('id:', this.id); }, 100); } var id = 21; foo.call({ id: 42 }); // id: 42

上記のコードでは、setTimeout のパラメータはアロー関数です。このアロー関数の定義は、foo 関数の生成時に有効になり、実際の実行は 100 ミリ秒後まで待機しません。通常の関数であれば、実行時にグローバルオブジェクトウィンドウを指すはずで、このとき21が出力されるはずです。ただし、アロー関数により、this は関数定義が有効になるオブジェクト (この場合は {id: 42}) を常に指すため、出力は 42 になります。

アロー関数を使用すると、setTimeout 内の this を、実行されるスコープを指すのではなく、定義されているスコープにバインドできます。別の例を示します。

function Timer() { this.s1 = 0; this.s2 = 0; // 箭头函数 setInterval(() => this.s1++, 1000); // 普通函数 setInterval(function () { this.s2++; }, 1000); } var timer = new Timer(); setTimeout(() => console.log('s1: ', timer.s1), 3100); setTimeout(() => console.log('s2: ', timer.s2), 3100); // s1: 3 // s2: 0

上記のコードでは、Timer 関数内に 2 つのタイマーがそれぞれアロー関数と通常の関数を使用して設定されています。前者の this バインディングはスコープ (つまり、Timer 関数) で定義され、後者の this バインディングは、それが実行されるスコープ (つまり、グローバル オブジェクト) を指します。したがって、3100 ミリ秒後、timer.s1 は 3 回更新されましたが、timer.s2 は 1 回も更新されていません。

アロー関数を使用すると、この点を修正できます。この機能は、コールバック関数をカプセル化する場合に非常に役立ちます。以下は、DOM イベントのコールバック関数がオブジェクトにカプセル化される例です。

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

上記のコードの init メソッドでは、アロー関数が使用されています。これにより、アロー関数内の this が常にハンドラー オブジェクトを指すようになります。そうしないと、コールバック関数の実行時に this.doSomething 行でエラーが報告されます。これは、現時点ではこれがドキュメント オブジェクトを指しているためです。

this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。正是因为它没有this，所以也就不能用作构造函数。

所以，箭头函数转成 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); }

上面代码中，转换后的 ES5 版本清楚地说明了，箭头函数里面根本没有自己的this，而是引用外层的this。

请问下面的代码之中有几个this？

function foo() { return () => { return () => { return () => { console.log('id:', this.id); }; }; }; } var f = foo.call({id: 1}); var t1 = f.call({id: 2})()(); // id: 1 var t2 = f().call({id: 3})(); // id: 1 var t3 = f()().call({id: 4}); // id: 1

上面代码之中，只有一个this，就是函数foo的this，所以t1、t2、t3都输出同样的结果。因为所有的内层函数都是箭头函数，都没有自己的this，它们的this其实都是最外层foo函数的this。

除了this，以下三个变量在箭头函数之中也是不存在的，指向外层函数的对应变量：arguments、super、new.target。

function foo() { setTimeout(() => { console.log('args:', arguments); }, 100); } foo(2, 4, 6, 8) // args: [2, 4, 6, 8]

上面代码中，箭头函数内部的变量arguments，其实是函数foo的arguments变量。

另外，由于箭头函数没有自己的this，所以当然也就不能用call()、apply()、bind()这些方法去改变this的指向。

(function() { return [ (() => this.x).bind({ x: 'inner' })() ]; }).call({ x: 'outer' }); // ['outer']

上面代码中，箭头函数没有自己的this，所以bind方法无效，内部的this指向外部的this。

长期以来，JavaScript 语言的this对象一直是一个令人头痛的问题，在对象方法中使用this，必须非常小心。箭头函数”绑定”this，很大程度上解决了这个困扰。

【相关推荐：javascript视频教程、编程视频】

以上がes6 arrow 関数は関数型プログラミングですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。