Is es6 arrow function functional programming?

yes. The arrow function is a manifestation of functional programming. Functional programming focuses more on the relationship between input and output, omitting some factors in the process. Therefore, the arrow function does not have its own this, arguments, and new target ( ES6) and super (ES6); arrow functions are equivalent to anonymous functions, so new cannot be used as a constructor.

The operating environment of this tutorial: Windows 7 system, ECMAScript version 6, Dell G3 computer.

Arrow function

Arrow function is a new feature introduced in ES6. Use "arrow" (=>) to define functions.

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

If the arrow function does not require parameters or requires multiple parameters, use a parentheses to represent the parameter part.

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

If the code block of the arrow function is more than one statement, use braces to enclose them and use the return statement to return.

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

Since curly brackets are interpreted as code blocks, if the arrow function directly returns an object, brackets must be added outside the object, otherwise an error will be reported.

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

The following is a special case, although it can be run, it will get wrong results.

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

In the above code, the original intention is to return an object { a: 1 }, but because the engine thinks that the curly braces are code blocks, it executes a line of statement a: 1. At this time, a can be interpreted as the label of the statement, so the statement actually executed is 1;, and then the function ends without a return value.

If the arrow function has only one line of statements and does not need to return a value, you can use the following writing method without writing the curly brackets.

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

Explanation:

The arrow function is a manifestation of functional programming. Functional programming focuses more on input and output. relationship, eliminating some factors of the process, so the arrow function does not have its own this, arguments, new target (ES6) and super (ES6). Arrow functions are equivalent to anonymous functions, so new cannot be used as a constructor.

This in an arrow function always points to this in its parent scope. In other words, the arrow function captures the this value of the context in which it is located as its own this value. Its pointer cannot be changed by any method, such as call(), bind(), apply(). When calling this in an arrow function, it simply searches up the scope chain to find the nearest this and uses it. It has nothing to do with the context of the call. Let’s explain it using code.

Arrow functions can be used in conjunction with variable destructuring

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

Arrow functions make expressions more concise

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

The above code only uses In just two lines, two simple utility functions are defined. If arrow functions were not used, it might take up multiple lines, and it would not be as eye-catching as it is now.

One use of arrow functions is to simplify callback functions

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

Another example is

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

The following is an example of combining the rest parameter with the arrow function.

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]]

Usage precautions

There are several usage precautions for arrow functions.

(1) The this object in the function body is the object where it is defined, not the object where it is used.

(2) cannot be used as a constructor, that is to say, the new command cannot be used, otherwise an error will be thrown.

(3) The arguments object cannot be used, as the object does not exist in the function body. If you want to use it, you can use the rest parameter instead.

(4) The yield command cannot be used, so arrow functions cannot be used as Generator functions.

Among the above four points, the first point is particularly noteworthy. The pointer of this object is variable, but in an arrow function, it is fixed.

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

In the above code, the parameter of setTimeout is an arrow function. The definition of this arrow function takes effect when the foo function is generated, and its actual execution will not wait until 100 milliseconds later. If it is a normal function, this should point to the global object window when executed, and 21 should be output at this time. However, the arrow function causes this to always point to the object where the function definition takes effect (in this case, {id: 42}), so the output is 42.

The arrow function allows this in setTimeout to be bound to the scope where it is defined, rather than pointing to the scope where it is run. Here's another example.

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

In the above code, two timers are set up inside the Timer function, using arrow functions and ordinary functions respectively. The former's this binding is defined in the scope (i.e., Timer function), and the latter's this points to the scope in which it is run (i.e., the global object). So, after 3100 milliseconds, timer.s1 has been updated three times, but timer.s2 has not been updated once.

The arrow function can make this point fixed. This feature is very helpful for encapsulating callback functions. Below is an example where the callback function of a DOM event is encapsulated in an object.

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);
  }
};

In the init method of the above code, an arrow function is used, which causes this in the arrow function to always point to the handler object. Otherwise, when the callback function runs, the this.doSomething line will report an error, because this points to the document object at this time.

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视频教程、编程视频】

The above is the detailed content of Is es6 arrow function functional programming?. For more information, please follow other related articles on the PHP Chinese website!