Eine kurze Diskussion über die Verwendung von call(), apply() und bind() in Javascript_Javascript-Kenntnissen

Funktionen in JavaScript sind nicht nur eine Sprachfunktion ähnlich den Methoden in Java, sie können auch als Objekte existieren. In diesem Artikel werden einige spezielle Verwendungsmöglichkeiten von Funktionen in JavaScript untersucht, einschließlich der drei Prototypmethoden call, apply und bind.
1. Funktionsgrundlagen
Eine Funktion in JavaScript ist eine Sprachfunktion, die einer Methode in Java ähnelt, aber unabhängig von einer Klasse definiert werden kann.

Funktionale Programmierung: Da JavaScript anonyme Funktionen unterstützt, können Funktionen als Objekte verwendet werden. Daher unterstützt JavaScript nicht nur die prozedurale Programmierung (objektorientiert ist auch eine Art prozedurale Programmierung), sondern auch die funktionale Programmierung.
Kontext

Jeder Aufruf einer Funktion hat einen besonderen Wert – den Kontext dieses Aufrufs – das ist der Wert des Schlüsselworts this. Wenn eine Funktion als Eigenschaft des Objekts in ein Objekt eingebunden wird, wird sie als Methode des Objekts bezeichnet. Wenn eine Funktion über dieses Objekt aufgerufen wird, stellt das Objekt den Kontext des Aufrufs dar, der den Wert dieser Funktion darstellt.

Es ist zu beachten, dass es sich hierbei um ein Schlüsselwort und nicht um eine Variable oder einen Attributnamen handelt. Die JavaScript-Syntax erlaubt es nicht, diesem Wert einen Wert zuzuweisen.

Eine Funktion ist eine Art Objekt

Der größte Unterschied zwischen Funktionen in JavaScript und Methoden in Java oder Funktionen in der Sprache C besteht darin, dass Funktionen in JavaScript auch Objekte sind. Dies bedeutet jedoch nicht, dass alle Objekte Funktionen sind. Eine Funktion ist ein spezielles Objekt, das ausführbaren Code enthält und von anderem Code aufgerufen werden kann.

Im Gegensatz zu Variablen unterliegt das Schlüsselwort this keinen Bereichsbeschränkungen und verschachtelte Funktionen erben dies nicht von der Funktion, die es aufruft. – Wenn eine verschachtelte Funktion als Methode aufgerufen wird, zeigt ihr Wert auf das Objekt, das sie aufgerufen hat. - Wenn die verschachtelte Funktion als Funktion aufgerufen wird, ist der Wert dieser entweder das globale Objekt (im nicht-strikten Modus) oder undefiniert (im strikten Modus).

Viele Leute glauben fälschlicherweise, dass beim Aufruf einer verschachtelten Funktion diese auf den Kontext der äußeren Funktion verweist. Wenn Sie auf den Wert dieser externen Funktion zugreifen möchten, müssen Sie den Wert dieser Funktion in einer Variablen speichern. Diese Variable und die interne Funktion befinden sich beide im selben Bereich. Zum Beispiel:

var o = {
 m: function() {
  var self = this;
  console.log(this==o); // true
  f();
  
  function f() {
   console.log(this === o); // false，this的值是全局对象或undefined
   console.log(self === o); // true
  }
 }
}

Schließung

JavaScript-Funktionen können in anderen Funktionen verschachtelt definiert werden, sodass sie auf alle Variablen in dem Bereich zugreifen können, in dem sie definiert sind. Dies bedeutet, dass JavaScript-Funktionen einen Abschluss bilden, was JavaScript sehr leistungsstarke Programmierfunktionen verleiht.

als Funktion des Wertes
In JavaScript ist eine Funktion nicht nur eine Syntax, sondern auch ein Wert. Das heißt, eine Funktion kann einer Variablen zugewiesen, in den Eigenschaften eines Objekts oder eines Elements eines Arrays gespeichert und an ein anderes übergeben werden Funktion als Parameter usw.

binden, anrufen, bewerben
Jede Funktion enthält ein Prototypattribut, das einen Verweis auf ein Objekt darstellt. Dieses Objekt wird als „Prototypobjekt“ bezeichnet. Jede Funktion enthält ein anderes Prototypobjekt. Bei Verwendung einer Funktion als Konstruktor erbt das neu erstellte Objekt Eigenschaften vom Prototypobjekt.

Function.prototype.call() und Function.prototype.apply()

call() und apply() können als Methoden eines Objekts betrachtet werden, und Funktionen werden indirekt durch Aufrufen von Methoden aufgerufen. Ihr erster Parameter ist das übergeordnete Objekt der aufzurufenden Funktion, das den aufrufenden Kontext darstellt, und über dieses wird im Funktionskörper eine Referenz darauf abgerufen. Die Methode apply() hat die gleiche Wirkung wie die Methode call(), außer dass die Methode der Funktionsübertragung unterschiedlich ist. Ihre tatsächlichen Parameter werden alle in einem Array platziert.

Um beispielsweise die Funktion f() als Methode des Objekts o aufzurufen und zwei Parameter zu übergeben, können Sie Code wie diesen verwenden:

var o = {};

function f(a, b) {
 return a + b;
}

f.call(o, 1, 2);    // 将函数f作为o的方法，实际上就是重新设置函数f的上下文
f.apply(o, [1, 2]);

Geben Sie ein weiteres Beispiel: Verwenden Sie die Call-Methode, um eine anonyme Funktion aufzurufen:

Im for-Schleifenkörper des folgenden Beispiels erstellen wir eine anonyme Funktion und führen dann die anonyme Funktion aus, indem wir die Aufrufmethode der Funktion aufrufen und dabei jedes Array-Element als angegebenen Wert verwenden. Der Hauptzweck dieser anonymen Funktion besteht darin, jedem Array-Elementobjekt eine Druckmethode hinzuzufügen. Diese Druckmethode kann die korrekte Indexnummer jedes Elements im Array ausdrucken. Natürlich ist es nicht notwendig, die Array-Elemente als Wert an die anonyme Funktion zu übergeben (normale Parameter reichen aus). Der Zweck besteht darin, die Verwendung von Aufrufen zu demonstrieren.

var animals = [
 {species: 'Lion', name: 'King'},
 {species: 'Whale', name: 'Fail'}
];

for (var i = 0; i < animals.length; i++) {
 (function (i) { 
  this.print = function () { 
   console.log('#' + i + ' ' + this.species + ': ' + this.name); 
  } 
  this.print();
 }).call(animals[i], i);
}

Function.prototype.bind()

bind() ist eine neue Methode in ES5. Wie aus dem Namen hervorgeht, besteht die Hauptfunktion dieser Methode darin, eine Funktion an ein Objekt zu binden. Wenn die bind()-Methode für die Funktion f() aufgerufen wird und dann ein Objekt o als Parameter übergeben wird, gibt diese Methode eine neue Funktion zurück: (in Form eines Funktionsaufrufs) Der Aufruf der neuen Funktion ersetzt das Original Funktion f() Wird als Methode von o aufgerufen. Zum Beispiel:

function f(y) {
 return this.x + y;
}

var o = {
 x: 1
};

var g = f.bind(o); // 通过调用 g(x) 来调用 o.f(x)
g(2); // 3

Tatsächlich können wir die bind()-Methode problemlos implementieren:

// 返回一个函数，通过调用它来调用o中的方法f()，传递它所有的实参
function bind(f, o) {
 if (f.bind) return f.bind(o); // 如果bind()方法存在，使用bind()方法
 else return function () {
  return f.apply(o, arguments);
 }
}

二、函数式编程
JavaScript并非函数式编程语言，但在JavaScript中可以像操控对象一样操控函数，也就是说可以在JavaScript中应用函数式编程技术。

使用函数处理数组

假设有一个数组，数组元素都是数字，我们想要计算这些元素的平均值和标准差。

var data = [1, 1, 3, 5, 5];
var sum = function(x, y) {
 return x + y;
};
var square = function(x) {
 return x * x;
};

var mean = data.reduce(sum)/data.length;
var deviations = data.map(x => x - mean);

var stddev = Math.sqrt(deviations.map(square).reduce(sum)/(data.length - 1));
高阶函数

高阶函数就是操作函数的函数，它接收一个或多个函数作为参数，并返回一个新函数。举个例子：

function not(f) {
 return function () {
  var result = f.apply(this, arguments);
  return !result;
 };
}

// 判断x是否为偶数的函数
var even = function(x) {
 return x % 2 === 0;
};

var odd = not(even);      // 一个新函数，所做的事情和even()相反
[1, 1, 3, 5, 5].every(odd);   // true，每个函数都是奇数

函数not()是个高阶函数，因为它返回一个新的函数，这个新函数将它的实参传入f()，并返回f的返回值的逻辑非。

以上就是关于javascript的call()、apply()、bind()的用法，希望对大家的学习有所帮助。