es6 화살표 함수는 함수형 프로그래밍인가요?

그렇습니다. 화살표 함수는 함수형 프로그래밍의 표현입니다. 함수형 프로그래밍은 입력과 출력 간의 관계에 더 중점을 두고 프로세스에서 일부 요소를 생략합니다. 따라서 화살표 함수에는 자체 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;이 되며, 그 이후에는 반환값 없이 함수가 종료된다.

화살표 함수에 명령문이 한 줄만 있고 값을 반환할 필요가 없는 경우 중괄호를 쓰지 않고 다음 작성 방법을 사용할 수 있습니다.

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

설명:

화살표 함수는 함수형 프로그래밍의 표현입니다. 함수형 프로그래밍은 프로세스의 일부 요소를 생략하고 입력과 출력 간의 관계에 더 중점을 두므로 화살표 함수에는 자체 this가 없습니다. , 인수, 새 대상(ES6) 및 슈퍼(ES6). 화살표 함수는 익명 함수와 동일하므로 new를 생성자로 사용할 수 없습니다.

화살표 함수의 This는 항상 상위 범위에서 this를 가리킵니다. 즉, 화살표 함수는 자신이 위치한 컨텍스트의 this 값을 자신의 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);

입니다. 다음은 화살표 함수에 나머지 매개변수를 결합한 예입니다.

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) 인수 객체는 함수 본문에 존재하지 않으므로 사용할 수 없습니다. 이를 사용하려면 대신 나머지 매개변수를 사용할 수 있습니다.

(4) 항복 명령을 사용할 수 없으므로 화살표 기능을 제너레이터 기능으로 사용할 수 없습니다.

위의 네 가지 사항 중 첫 번째 사항이 특히 주목할 만합니다. 이 객체의 포인터는 가변적이지만 화살표 함수에서는 고정되어 있습니다.

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

위 코드에서 setTimeout의 매개변수는 화살표 함수입니다. 이 화살표 함수의 정의는 foo 함수가 생성될 때 적용되며 실제 실행은 100밀리초 이후까지 기다리지 않습니다. 일반 함수라면 실행 시 전역 개체 창을 가리켜야 하며 이때 21이 출력되어야 합니다. 그러나 화살표 함수를 사용하면 함수 정의가 적용되는 객체(이 경우 {id: 42})를 항상 가리키므로 출력은 42입니다.

화살표 함수를 사용하면 setTimeout에서 이것이 실행되는 범위를 가리키는 대신 정의된 범위에 바인딩될 수 있습니다. 여기 또 다른 예가 있습니다.

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 함수 내부에 각각 화살표 함수와 일반 함수를 사용하여 두 개의 타이머가 설정되어 있습니다. 전자의 this 바인딩은 범위(예: Timer 함수)에 정의되고 후자의 this 바인딩은 실행되는 범위(예: 전역 객체)를 가리킵니다. 따라서 3100밀리초가 지나면 타이머.s1은 세 번 업데이트되었지만, 타이머.s2는 한 번도 업데이트되지 않았습니다.

화살표 함수를 사용하면 이 문제를 해결할 수 있습니다. 이 기능은 콜백 함수를 캡슐화하는 데 매우 유용합니다. 다음은 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.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 화살표 함수는 함수형 프로그래밍인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!