Detaillierte Einführung in die Verwendung von Bind-, Call- und Apply-Funktionen in JavaScript

Bei der Einführung von js in andere Programme in unserem Projektteam habe ich viele Inhalte vorbereitet, aber es schien keine große Wirkung zu haben. Wie erwartet reicht es Ihnen nicht, nur darüber zu reden muss es tun. Vor ein paar Tagen fragte mich jemand nach der Verwendung der Funktion call() im Code. Ich bat ihn, ein Buch zu lesen, das ich Programmierern empfehle, die js verwenden Server lesen 《JavascriptProgrammierungEssence" Dieses Buch, Mistfürd habe es wirklich nicht geschrieben. Später habe ich eine ähnliche Frage zu segmentfault gesehen. Nachdem ich sie dort beantwortet hatte, habe ich mir hier eine Notiz gemacht. Bezüglich der Methode zum Definieren einer Klasse oder eines

Objekts

in js lesen Sie bitte w3school hier hier. Der Text ist sehr detailliert und klar Ich werde nicht auf Details eingehen.

Um die Verwendung der drei Funktionen binden, aufrufen und anwenden einzuführen, muss ich einige Einstellungen von Funktionen in js einführen. Zu diesem Teil wird empfohlen, Kapitel 4 von

„The Essence of JavaScript Programming“

durchzulesen. Eine detaillierte Einführung in diese drei Funktionen finden Sie in der MDN-Dokumentation:

bind

, call, apply.

Beginnen wir mit den Bausteinen und modifizieren meine vorherige Antwort zum Segmentfehler:

Es gibt 4 Modi des Funktionsaufrufs in js:

Methodenaufruf und normaler Funktionsaufruf , Konstruktorfunktionsaufruf, Apply/Call-Aufruf.

Gleichzeitig fügt jeder Funktionsaufruf automatisch zwei formale Parameter hinzu, diesen und Argumente, zusätzlich zu den formalen Parametern, die bei der Deklaration definiert wurden.

arguments beinhaltet nicht die oben genannten drei Funktionen, daher sprechen wir hier nur darüber. Der Wert davon wird im Aufrufmodus in 4 oben an verschiedene Werte gebunden. Lassen Sie uns separat darüber sprechen:

Methodenaufruf:

Das ist leicht zu verstehen. Eine Funktion ist das

Attribut

eines Objekts, wie zum Beispiel

Diesmal ist this in der obigen Funktion an dieses Objekt a gebunden. This.v kann also das Attribut v von Objekt a abrufen.

var a = {     
    v : 0,     
    f : function(xx) {                 
        this.v = xx;     
    } 
} 
a.f(5);

Normaler Funktionsaufruf:

Betrachte immer noch den Code

Zu diesem Zeitpunkt ist dies in Funktion f an das globale Objekt gebunden, wenn es ausgeführt wird der Browser Im Interpreter ist es im Allgemeinen das Fensterobjekt. Was this.x hier also tatsächlich zugreift, ist window.x. Wenn das Fenster kein x-Attribut hat, fügen Sie gemäß der betrügerischen Syntax von js natürlich ein x hinzu Attribut zum Fensterobjekt hinzufügen und gleichzeitig einen Wert zuweisen.

function f(xx) {         
    this.x = xx; 
} 
f(5);

Aufruf der Konstruktorfunktion:

Konstruktorfunktion

war meiner Meinung nach immer der nervigste Teil in js, weil es dasselbe ist wie Das ursprüngliche Design von js Die prototypbasierte objektorientierte-Implementierung ist fehl am Platz, als wäre sie speziell dafür konzipiert, den Gewohnheiten gerecht zu werden, die jeder durch andere klassenbasierte objektorientierte Implementierungen verdorben hat. Wenn Sie eine Funktion mit dem Schlüsselwort

new

aufrufen, erstellt js ein Prototypattribut, das ein neues Objekt dieser Funktion ist. Wenn Sie diese Funktion aufrufen, wird this an this gebunden neues Objekt. Natürlich wird das neue Schlüsselwort auch das Verhalten der return-Anweisung ändern, aber wir werden hier nicht darauf eingehen. Schauen Sie sich den Code an

Es gibt keinen Unterschied zwischen der oben genannten Funktion und der normalerweise aufgerufenen Funktion, außer dass beim Aufruf das Schlüsselwort new vor dem Funktionsnamen hinzugefügt wird. Auf diese Weise ist dies nicht der Fall Dann gibt es das zuvor erwähnte globale Objekt, aber das hier erstellte neue Objekt ist tatsächlich sehr gefährlich, da Sie beim Betrachten der Funktion nicht wissen, ob diese Funktion als Konstruktor verwendet werden soll. oder von allgemeinen Funktionen verwendet werden. Wir können also sehen, dass in jslint alle von Ihnen geschriebenen Konstruktoren erforderlich sind. Sobald festgestellt wird, dass Sie das neue Schlüsselwort verwendet haben, muss der erste Buchstabe der nachfolgenden Funktion großgeschrieben werden Funktion muss großgeschrieben werden. Zur Unterscheidung habe ich persönlich nur eine Meinung: Cheaten:)

function a(xx)
{         
    this.m = xx; 
} 
var b = new a(5);

Anwenden/Aufrufen:

我们知道，在 js 里，函数其实也是一个对象，那么函数自然也可以拥有它自己的方法，有点绕，在js 里，每个函数都有一个公共的 prototype —— Function，而这个原型自带有好几个属性和方法，其中就有这里困惑的 bind、call、apply 方法。先说 apply 方法，它让我们构造一个参数数组传递给函数，同时可以自己来设置 this 的值，这就是它最强大的地方，上面的 3 种函数调用方式，你可以看到，this 都是自动绑定的，没办法由你来设，当你想设的时候，就可以用 apply()了。apply 函数接收 2 个参数，第一个是传递给这个函数用来绑定 this 的值，第二个是一个参数数组。

看代码

function a(xx) {         
    this.b = xx; 
} 
var o = {}; 
a.apply(o, [5]); 
alert(a.b);    // undefined 
alert(o.b);    // 5

是不是很神奇，函数 a 居然可以给 o 加属性值。当然，如果你 apply 的第一个参数传递 null，那么在函数 a 里面 this 指针依然会绑定全局对象。

call() 方法和 apply() 方法很类似，它们的存在都是为了改变 this 的绑定，那 call() 和apply() 有什么区别呢?就我个人看来，没啥鸟区别。。。开玩笑!刚刚说了，上面 apply() 接收两个参数，第一个是绑定 this 的值，第二个是一个参数数组，注意它是一个数组，你想传递给这个函数的所有参数都放在数组里，然后 apply() 函数会在调用函数时自动帮你把数组展开。而 call()呢，它的第一个参数也是绑定给 this 的值，但是后面接受的是不定参数，而不再是一个数组，也就是说你可以像平时给函数传参那样把这些参数一个一个传递。

所以如果一定要说有什么区别的话，看起来是这样的

function a(xx, yy) {     
    alert(xx, yy);     
    alert(this);     
    alert(arguments); 
} 
a.apply(null, [5, 55]); 
a.call(null, 5, 55);

仅此而已。

最后再来说 bind() 函数，上面讲的无论是 call() 也好， apply() 也好，都是立马就调用了对应的函数，而 bind() 不会， bind() 会生成一个新的函数，bind() 函数的参数跟 call() 一致，第一个参数也是绑定 this 的值，后面接受传递给函数的不定参数。 bind() 生成的新函数返回后，你想什么时候调就什么时候调，看下代码就明白了

var m = {    
    "x" : 1 
}; 
function foo(y) { 
    alert(this.x + y); 
} 
foo.apply(m, [5]); 
foo.call(m, 5); 
var foo1 = foo.bind(m, 5); 
foo1();

末了来个吐槽，你在 js 里想定义一个函数，于是你会这么写:

function jam() {};

其实这是 js 里的一种语法糖，它等价于：

var jam = function() {};

然后你想执行这个函数，脑洞大开的你会这么写：

function jam() {}();

但是这么写就报错了，其实这种写法也不算错，因为它确实是 js 支持的函数表达式，但是同时 js 又规定以function 开头的语句被认为是函数语句，而函数语句后面是肯定不会带 () 的，所以才报错，于是聪明的人想出来，加上一对括号就可以了。于是就变成了这样：

1(function jam() {}());

这样就定义了一个函数同时也执行它，详情参加 ECMAScript 的 Expression Statement 章节。

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die Verwendung von Bind-, Call- und Apply-Funktionen in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!