Detaillierte Erklärung der JS-Pfeilfunktion

In JS können Pfeilfunktionen wie normale Funktionen auf viele Arten verwendet werden. Sie werden jedoch im Allgemeinen verwendet, wenn anonyme Funktionsausdrücke erforderlich sind, wie z. B. Rückruffunktionen.

Das folgende Beispiel zeigt beispielhafte Pfeilfunktionen als Callback-Funktionen, insbesondere für Array-Methoden wie map(), filter(), reduce(), sort().

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

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

Auf den ersten Blick scheinen Pfeilfunktionen als reguläre Funktionen definiert und verwendet zu werden, aber das ist nicht der Fall. Aufgrund der Einfachheit unterscheiden sich Pfeilfunktionen von regulären Funktionen. Aus einer anderen Perspektive können Pfeilfunktionen als abnormale JS-Funktionen betrachtet werden.

[Verwandte Kursempfehlungen: JavaScript-Video-Tutorial]

Obwohl die Syntax von Pfeilfunktionen sehr einfach ist, steht dies nicht im Mittelpunkt dieses Artikels. In diesem Artikel geht es hauptsächlich um die Unterschiede zwischen dem Verhalten von Pfeilfunktionen und regulären Funktionen und wie wir diese Unterschiede nutzen können, um Pfeilfunktionen besser zu nutzen.

● Ob im strikten oder nicht strikten Modus, Pfeilfunktionen dürfen keine doppelten benannten Parameter haben.

● Pfeilfunktionen haben keine arguments-Bindung. Sie können jedoch auf das arguments-Objekt der nächstgelegenen übergeordneten Funktion ohne Pfeil zugreifen.

● Pfeilfunktionen können niemals als Konstruktoren verwendet werden und natürlich können sie nicht mit dem Schlüsselwort new aufgerufen werden. Daher gibt es kein prototype-Attribut für Pfeilfunktionen.

● Der Wert innerhalb einer Pfeilfunktion bleibt während der gesamten Lebensdauer der Funktion unverändert und ist immer an den Wert in der nächstgelegenen übergeordneten Nicht-Pfeilfunktion gebunden.

Benannte Funktionsparameter

Funktionen in JS werden normalerweise mit benannten Parametern definiert. Benannte Parameter werden verwendet, um Parameter positionell lokalen Variablen im Funktionsumfang zuzuordnen.

Sehen wir uns die folgende Funktion an:

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()Die Funktion wird durch drei benannte Parameter definiert: first, second und third. Wenn es mehr benannte Argumente gibt, als an die Funktion übergeben werden, sind die verbleibenden Argumente undefined.

JS-Funktionen zeigen im nicht-strikten Modus mit benannten Parametern ein seltsames Verhalten. Im nicht-strikten Modus erlauben JS-Funktionen wiederholte benannte Parameter. Schauen wir uns das Beispiel an:

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]

Wir können sehen, dass der Parameter first wiederholt wird, sodass er dem ersten übergebenen Parameter zugeordnet wird Der Funktionsaufruf überschreibt den ersten Parameter, was kein wünschenswertes Verhalten ist.

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

Wie Pfeilfunktionen mit doppelten Argumenten umgehen

Über Pfeilfunktionen:

vs. normal Verschiedene Funktionen, egal ob im strikten oder nicht strikten Modus, Pfeilfunktionen erlauben keine wiederholten Parameter. Wiederholte Parameter führen zu einem Syntaxfehler.

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

Funktionsüberladung

Funktionsüberladung ist die Fähigkeit, Funktionen so zu definieren, dass die entsprechende Funktion basierend auf der Anzahl der Parameter aufgerufen werden kann. , Bindung kann in JS verwendet werden, um diese Funktion zu erreichen.

Sehen Sie sich eine einfache überladene Funktion an, die den Durchschnitt der übergebenen Argumente berechnet:

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

Auf diese Weise kann die Funktion mit einer beliebigen Anzahl von Argumenten aufgerufen werden, von 0 bis zur maximalen Anzahl von Argumenten Die Funktion kann akzeptieren. Es sollte 255 sein.

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

Versuchen Sie nun, die Syntax der Head-Cut-Funktion zu verwenden, um die Funktion average() zu kopieren. Im Allgemeinen denken wir, dass es nicht schwierig ist und wir es nicht einfach so machen können:

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

Jetzt werden wir beim Testen dieser Funktion feststellen, dass sie einen Referenzfehler auslöst, arguments ist undefiniert.

Was machen wir falsch?

Für Pfeilfunktionen:

Im Gegensatz zu regulären Funktionen existiert arguments nicht in in Pfeilfunktionen. Es kann jedoch auf arguments-Objekte von Nicht-Pfeil-Elternfunktionen zugegriffen werden.

Basierend auf diesem Verständnis kann die Funktion average() in eine reguläre Funktion geändert werden, die das Ergebnis der sofort aufgerufenen Funktion mit verschachtelten Pfeilen zurückgibt, und die Funktion mit verschachtelten Pfeilen kann auf Funktion der übergeordneten Funktion 🎜>. arguments

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

Dies kann das Problem lösen, dass

das Objekt nicht definiert ist, aber dieser Bullshit-Ansatz ist offensichtlich überflüssig. arguments

Machen Sie etwas anderes

Gibt es eine Alternative zum oben genannten Problem? Sie können den

-Parameter von es6 verwenden. rest

Mit dem ES6-Parameter

können wir ein Array erhalten, das alle an die Funktion übergebenen Parameter speichert. restDie Syntax funktioniert für alle Arten von Funktionen, egal ob reguläre oder Pfeilfunktionen. rest

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

Bei der Verwendung des

-Parameters sind einige Dinge zu beachten: rest

　●　Der

-Parameter unterscheidet sich vom rest-Objekt innerhalb der Funktion. Der arguments-Parameter ist ein tatsächlicher Funktionsparameter, während das rest-Objekt ein internes Objekt ist, das an den Funktionsumfang gebunden ist. arguments

　●　一个函数只能有一个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教程 栏目，欢迎学习！

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung der JS-Pfeilfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!