Detailed explanation of JS arrow function

In JS, arrow functions can be used in many ways like ordinary functions. However, they are generally used when anonymous function expressions are required, such as callback functions.

The following example shows examples of arrow functions as callback functions, especially for map(), filter(), reduce(), sort() and other array methods.

const scores = [ 1, 28, 66, 666];
const maxScore = Math.max(...scores);

scores.map(score => +(score / maxScore).toFixed(2));

At first glance, arrow functions seem to be defined and used as regular functions, but this is not the case. Because of the simplicity of arrow functions, they are different from regular functions. From another perspective, arrow functions may be regarded as abnormal JS functions.

[Related course recommendations: JavaScript video tutorial]

Although the syntax of arrow functions is very simple, this is not the focus of this article. This article mainly talks about the differences between the behavior of arrow functions and regular functions, and how we can use these differences to better use arrow functions.

● Whether in strict mode or non-strict mode, arrow functions cannot have duplicate named parameters.

● Arrow functions do not have arguments bound. However, they can access the arguments object of the nearest non-arrow parent function.

● Arrow functions can never be used as constructors, and naturally they cannot be called using the new keyword. Therefore, there is no prototype attribute for arrow functions.

●The value inside an arrow function remains unchanged throughout the lifetime of the function, and is always bound to the value in the nearest non-arrow parent function.

Named function parameters

Functions in JS are usually defined with named parameters. Named parameters are used to map parameters positionally to local variables in the function scope.

Let’s take a look at the following function:

function logParams (first, second, third) {
  console.log(first, second, third);
}

// first => 'Hello'
// second => 'World'
// third => '!!!'
logParams('Hello', 'World', '!!!'); // "Hello"  "World"  "!!!"

// first => { o: 3 }
// second => [ 1, 2, 3 ]
// third => undefined
logParams({ o: 3 }, [ 1, 2, 3 ]); // {o: 3}  [1, 2, 3]

logParams()The function is defined by three named parameters: first, second and third. If there are more named arguments than are passed to the function, the remaining arguments are undefined.

JS functions exhibit strange behavior in non-strict mode with named parameters. In non-strict mode, JS functions allow repeated named parameters. Let’s take a look at the example:

function logParams (first, second, first) {
  console.log(first, second);
}

// first => 'Hello'
// second => 'World'
// first => '!!!'
logParams('Hello', 'World', '!!!'); // "!!!"  "World"

// first => { o: 3 }
// second => [ 1, 2, 3 ]
// first => undefined
logParams({ o: 3 }, [ 1, 2, 3 ]); // undefined  [1, 2, 3]

We can see that the first parameter is repeated, so it is mapped to the parameter passed to The value of the third parameter of the function call overwrites the first parameter, which is not a desirable behavior.

// 由于参数重复，严格模式会报错
function logParams (first, second, first) {
  "use strict";
  console.log(first, second);
}

How arrow functions handle repeated arguments

About arrow functions:

vs. regular Different functions, no matter in strict mode or non-strict mode, arrow functions do not allow repeated parameters. Repeated parameters will cause a syntax error.

// 只要你敢写成重复的参数，我就敢死给你看
const logParams = (first, second, first) => {
  console.log(first, second);
}

Function overloading

Function overloading is the ability to define functions so that the corresponding function can be called based on the number of parameters. , Binding can be used in JS to achieve this function.

Look at a simple overloaded function that calculates the average of the parameters passed in:

function average() {
  const length = arguments.length;

  if (length == 0) return 0;

  // 将参数转换为数组
  const numbers = Array.prototype.slice.call(arguments);

  const sumReduceFn = function (a, b) { return a + Number(b) };
  // 返回数组元素的总和除以数组的长度
  return numbers.reduce(sumReduceFn, 0) / length;
}

This way the function can be called with any number of parameters, from 0 to the maximum number of parameters the function can accept. It should be 255.

average(); // 0
average('3o', 4, 5); // NaN
average('1', 2, '3', 4, '5', 6, 7, 8, 9, 10); // 5.5
average(1.75, 2.25, 3.5, 4.125, 5.875); // 3.5

Now try to use the shear function syntax to copy the average() function. Generally, we will think that this is not difficult and cannot be done like this:

const average = () => {
  const length = arguments.length;

  if (length == 0) return 0;

  const numbers = Array.prototype.slice.call(arguments);
  const sumReduceFn = function (a, b) { return a + Number(b) };

  return numbers.reduce(sumReduceFn, 0) / length;
}

Test now When using this function, we will find that it will throw a reference error, arguments is undefined.

What did we do wrong

For arrow functions:

Different from regular functions, arguments does not exist in arrow functions. However, it is possible to access the arguments objects of non-arrow parent functions.

Based on this understanding, the average() function can be modified into a regular function, which will return the result of the immediately called nested arrow function. The nested arrow function is Ability to access the arguments of the parent function.

function average() {
  return (() => {
    const length = arguments.length;

    if (length == 0) return 0;

    const numbers = Array.prototype.slice.call(arguments);
    const sumReduceFn = function (a, b) { return a + Number(b) };

    return numbers.reduce(sumReduceFn, 0) / length;
  })();
}

This can solve the problem of arguments that the object is not defined, but this bullshit approach is obviously redundant.

Do something different

Is there an alternative to the above problem? You can use the rest parameter of es6 .

Using ES6 rest parameters, we can get an array that saves all the parameters passed to the function. restThe syntax works for all types of functions, whether regular or arrow functions.

const average = (...args) => {
  if (args.length == 0) return 0;
  const sumReduceFn = function (a, b) { return a + Number(b) };

  return args.reduce(sumReduceFn, 0) / args.length;
}

There are some things to note when using rest parameters:

●restThe parameters are different from the arguments objects inside the function . The rest parameter is an actual function parameter, while the arguments object is an internal object bound to the function scope.

　●　一个函数只能有一个rest参数，而且它必须位于最后一个参数。这意味着函数可以包含命名参数和rest参数的组合。

　●　rest 参数与命名参数一起使用时，它不包含所有传入的参数。但是，当它是惟一的函数参数时，表示函数参数。另一方面，函数的arguments对象总是捕获所有函数的参数。

　●　rest参数指向包含所有捕获函数参数的数组对象，而arguments对象指向包含所有函数参数的类数组对象。

接着考虑另一个简单的重载函数，该函数将数字根据传入的进制转换为另一个类的进制数。 可以使用一到三个参数调用该函数。 但是，当使用两个或更少的参数调用它时，它会交换第二个和第三个函数参数。如下所示：

function baseConvert (num, fromRadix = 10, toRadix = 10) {
  if (arguments.length <p>调用 <code>baseConvert</code> 方法：</p><pre class="brush:php;toolbar:false">// num => 123, fromRadix => 10, toRadix => 10
console.log(baseConvert(123)); // "123"

// num => 255, fromRadix => 10, toRadix => 2
console.log(baseConvert(255, 2)); // "11111111"

// num => 'ff', fromRadix => 16, toRadix => 8
console.log(baseConvert('ff', 16, 8)); // "377"

使用箭头函数来重写上面的方法：

const baseConvert = (num, ...args) => {
  // 解构`args`数组和
  // 设置`fromRadix`和`toRadix`局部变量
  let [fromRadix = 10, toRadix = 10] = args;

  if (args.length <p><strong><span style="font-size: 18px;">构造函数</span></strong></p><p>可以使用<code>new</code>关键字调用常规JS函数，该函数作为类构造函数用于创建新的实例对象。</p><pre class="brush:php;toolbar:false">function Square (length = 10) {
  this.length = parseInt(length) || 10;

  this.getArea = function() {
    return Math.pow(this.length, 2);
  }

  this.getPerimeter = function() {
    return 4 * this.length;
  }
}

const square = new Square();

console.log(square.length); // 10
console.log(square.getArea()); // 100
console.log(square.getPerimeter()); // 40

console.log(typeof square); // "object"
console.log(square instanceof Square); // true

当使用new关键字调用常规JS函数时，将调用函数内部[[Construct]]方法来创建一个新的实例对象并分配内存。之后，函数体将正常执行，并将this映射到新创建的实例对象。最后，函数隐式地返回 this(新创建的实例对象)，只是在函数定义中指定了一个不同的返回值。

此外，所有常规JS函数都有一个prototype属性。函数的prototype属性是一个对象，它包含函数创建的所有实例对象在用作构造函数时共享的属性和方法。

以下是对前面的Square函数的一个小修改，这次它从函数的原型上的方法，而不是构造函数本身。

function Square (length = 10) {
  this.length = parseInt(length) || 10;
}

Square.prototype.getArea = function() {
  return Math.pow(this.length, 2);
}

Square.prototype.getPerimeter = function() {
  return 4 * this.length;
}

const square = new Square();

console.log(square.length); // 10
console.log(square.getArea()); // 100
console.log(square.getPerimeter()); // 40

console.log(typeof square); // "object"
console.log(square instanceof Square); // true

如下所知，一切仍然按预期工作。 事实上，这里有一个小秘密：ES6 类在后台执行类似于上面代码片段的操作 - 类(class)只是个语法糖。

那么箭头函数呢

它们是否也与常规JS函数共享此行为?答案是否定的。关于箭头函数:

与常规函数不同，箭头函数永远不能使用new关键字调用，因为它们没有[[Construct]]方法。 因此，箭头函数也不存在prototype属性。

箭头函数不能用作构造函数，无法使用new关键字调用它们，如果这样做了会抛出一个错误，表明该函数不是构造函数。

因此，对于箭头函数，不存在可以作为构造函数调用的函数内部的new.target等绑定，相反，它们使用最接近的非箭头父函数的new.target值。

此外，由于无法使用new关键字调用箭头函数，因此实际上不需要它们具有原型。 因此，箭头函数不存在prototype属性。

由于箭头函数的prototype 为 undefined，尝试使用属性和方法来扩充它，或者访问它上面的属性，都会引发错误。

const Square = (length = 10) => {
  this.length = parseInt(length) || 10;
}

// throws an error
const square = new Square(5);

// throws an error
Square.prototype.getArea = function() {
  return Math.pow(this.length, 2);
}

console.log(Square.prototype); // undefined

this 是啥

JS函数的每次调用都与调用上下文相关联，这取决于函数是如何调用的，或者在哪里调用的。

函数内部this值依赖于函数在调用时的调用上下文，这通常会让开发人员不得不问自己一个问题:this值是啥。

下面是对不同类型的函数调用this指向一些总结：

　●　使用new关键字调用:this指向由函数的内部[[Construct]]方法创建的新实例对象。this(新创建的实例对象)通常在默认情况下返回，除了在函数定义中显式指定了不同的返回值。

　●　不使用new关键字直接调用:在非严格模式下，this指向window对象(浏览器中)。然而，在严格模式下，this值为undefined;因此，试图访问或设置此属性将引发错误。

　●　间接使用绑定对象调用：Function.prototype对象提供了三种方法，可以在调用函数时将函数绑定到任意对象，即：call()，apply()和bind()。 使用这些方法调用函数时，this指向指定的绑定对象。

　●　作为对象方法调用：this指向调用函数（方法）的对象，无论该方法是被定义为对象的自己的属性还是从对象的原型链中解析。

　●　作为事件处理程序调用:对于用作DOM事件侦听器的常规函数，this指向触发事件的目标对象、DOM元素、document或window 。

再来看个函数，该函数将用作单击事件侦听器，例如，表单提交按钮：

function processFormData (evt) {
  evt.preventDefault();

  const form = this.closest('form');

  const data = new FormData(form);
  const { action: url, method } = form;
}

button.addEventListener('click', processFormData, false);

与前面看到的一样，事件侦听器函数中的 this值是触发单击事件的DOM元素，在本例中是button。

因此，可以使用以下命令指向submit按钮的父表单

this.closest('form');

如果将函数更改为箭头函数语法，会发生什么？

const processFormData = (evt) => {
  evt.preventDefault();

  const form = this.closest('form');
  const data = new FormData(form);
  const { action: url, method } = form;
}

button.addEventListener('click', processFormData, false);

如果现在尝试此操作，咱们就得到一个错误。从表面上看，this 的值并不是各位想要的。由于某种原因，它不再指向button元素，而是指向window对象。

如何修复this指向

利用上面提到的 Function.prototype.bind() 强制将this值绑定到button元素:

button.addEventListener('click', processFormData.bind(button), false);

但这似乎不是各位想要的解决办法。this仍然指向window对象。这是箭头函数特有的问题吗?这是否意味着箭头函数不能用于依赖于this的事件处理?

为什么会搞错

关于箭头函数的最后一件事：

与常规函数不同，箭头函数没有this的绑定。 this的值将解析为最接近的非箭头父函数或全局对象的值。

这解释了为什么事件侦听器箭头函数中的this值指向window 对象（全局对象）。 由于它没有嵌套在父函数中，因此它使用来自最近的父作用域的this值，该作用域是全局作用域。

但是，这并不能解释为什么不能使用bind()将事件侦听器箭头函数绑定到button元素。对此有一个解释:

与常规函数不同，内部箭头函数的this值保持不变，并且无论调用上下文如何，都不能在其整个生命周期中更改。

箭头函数的这种行为使得JS引擎可以优化它们，因为可以事先确定函数绑定。

考虑一个稍微不同的场景，其中事件处理程序是使用对象方法中的常规函数定义的，并且还取决于同一对象的另一个方法：

({
  _sortByFileSize: function (filelist) {
    const files = Array.from(filelist).sort(function (a, b) {
      return a.size - b.size;
    });

    return files.map(function (file) {
      return file.name;
    });
  },

  init: function (input) {
    input.addEventListener('change', function (evt) {
      const files = evt.target.files;
      console.log(this._sortByFileSize(files));
    }, false);
  }

}).init(document.getElementById('file-input'));

上面是一个一次性的对象，该对象带有_sortByFileSize()方法和init()方法，并立即调init方法。init()方法接受一个input元素，并为input元素设置一个更改事件处理程序，该事件处理程序按文件大小对上传的文件进行排序，并打印在浏览器的控制台。

如果测试这段代码，会发现，当选择要上载的文件时，文件列表不会被排序并打印到控制台;相反，会控制台上抛出一个错误，问题就出在这一行:

console.log(this._sortByFileSize(files));

在事件监听器函数内部，this 指向 input 元素 因此this._sortByFileSize 为 undefined。

要解决此问题，需要将事件侦听器中的this绑定到包含方法的外部对象，以便可以调用this._sortByFileSize()。 在这里，可以使用bind()，如下所示：

init: function (input) {
  input.addEventListener('change', (function (evt) {
    const files = evt.target.files;
    console.log(this._sortByFileSize(files));
  }).bind(this), false);
}

现在一切正常。这里不使用bind()，可以简单地用一个箭头函数替换事件侦听器函数。箭头函数将使用父init()方法中的this的值：

init: function (input) {
  input.addEventListener('change', (function (evt) {
    const files = evt.target.files;
    console.log(this._sortByFileSize(files));
  }).bind(this), false);
}

再考虑一个场景，假设有一个简单的计时器函数，可以将其作为构造函数调用来创建以秒为单位的倒计时计时器。使用setInterval()进行倒计时，直到持续时间过期或间隔被清除为止，如下所示:

function Timer (seconds = 60) {
  this.seconds = parseInt(seconds) || 60;
  console.log(this.seconds);

  this.interval = setInterval(function () {
    console.log(--this.seconds);

    if (this.seconds == 0) {
      this.interval && clearInterval(this.interval);
    }
  }, 1000);
}

const timer = new Timer(30);

如果运行这段代码，会看到倒计时计时器似乎被打破了，在控制台上一直打印 NaN。

这里的问题是，在传递给setInterval()的回调函数中，this指向全局window对象，而不是Timer()函数作用域内新创建的实例对象。因此，this.seconds 和 this.interval  都是undefined的。

与之前一样，要修复这个问题，可以使用bind()将setInterval()回调函数中的this值绑定到新创建的实例对象，如下所示

function Timer (seconds = 60) {
  this.seconds = parseInt(seconds) || 60;
  console.log(this.seconds);

  this.interval = setInterval((function () {
    console.log(--this.seconds);

    if (this.seconds == 0) {
      this.interval && clearInterval(this.interval);
    }
  }).bind(this), 1000);
}

或者，更好的方法是，可以用一个箭头函数替换setInterval()回调函数，这样它就可以使用最近的非箭头父函数的this值:

function Timer (seconds = 60) {
  this.seconds = parseInt(seconds) || 60;
  console.log(this.seconds);

  this.interval = setInterval(() => {
    console.log(--this.seconds);

    if (this.seconds == 0) {
      this.interval && clearInterval(this.interval);
    }
  }, 1000);
}

现在理解了箭头函数如何处理this关键字，还需要注意箭头函数对于需要保留this值的情况并不理想 - 例如，在定义需要引用的对象方法时 使用需要引用目标对象的方法来扩展对象或扩充函数的原型。

不存在的绑定

在本文中，已经看到了一些绑定，这些绑定可以在常规JS函数中使用，但是不存在用于箭头函数的绑定。相反，箭头函数从最近的非箭头父函数派生此类绑定的值。

总之，下面是箭头函数中不存在绑定的列表:

　●　arguments：调用时传递给函数的参数列表

　●　new.target：使用new关键字作为构造函数调用的函数的引用

　●　super:对函数所属对象原型的引用，前提是该对象被定义为一个简洁的对象方法

　●　this：对函数的调用上下文对象的引用

原文：https://s0dev0to.icopy.site/bnevilleoneill/anomalies-in-javascript-arrow-functions-2afh

为了保证的可读性，本文采用意译而非直译。

本文来自 js教程 栏目，欢迎学习！

The above is the detailed content of Detailed explanation of JS arrow function. For more information, please follow other related articles on the PHP Chinese website!