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;

上記コードは使用のみを使用します。わずか 2 行で、2 つの単純なユーティリティ関数が定義されています。アロー関数が使用されていなかったら、複数行を占める可能性があり、今ほど目を引くものではなかったでしょう。

アロー関数の 1 つの用途は、コールバック関数を簡素化することです

// 正常函数写法
[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 サイトの他の関連記事を参照してください。