Ich hoffe, dass ich durch diesen Artikel mein Verständnis von „Anwenden“, „Aufrufen“ und „Binden“ deutlich verbessern und einige ihrer wunderbaren Verwendungsmöglichkeiten auflisten kann, um mein Gedächtnis zu vertiefen.
bewerben, anrufen
In JavaScript dienen beide Funktionen „Aufruf“ und „Anwenden“ dazu, den Kontext zu ändern, wenn eine Funktion ausgeführt wird. Mit anderen Worten: Sie dienen dazu, den Zeiger dieser Funktion innerhalb des Funktionskörpers zu ändern.
Ein Hauptmerkmal von JavaScript ist, dass Funktionen die Konzepte „Definitionskontext“ und „Laufzeitkontext“ sowie „Kontext kann geändert werden“ haben.
Lassen Sie mich zunächst ein Codebeispiel geben:
function fruits() {}
fruits.prototype = {
color: "red",
say: function() {
console.log("My color is " + this.color);
}
}
var apple = new fruits;
apple.say(); //My color is redAber wenn wir ein Objekt banane= {color : "gelb"} haben und seine Say-Methode nicht neu definieren möchten, können wir die Say-Methode von Apple über call oder apply verwenden:
banana = {
color: "yellow"
}
apple.say.call(banana); //My color is yellow
apple.say.apply(banana); //My color is yellowEs ist also ersichtlich, dass Aufruf und Anwenden dies scheinbar dynamisch ändern, wenn ein Objekt keine bestimmte Methode hat (Banane in dieser Kastanie hat keine Say-Methode), andere jedoch schon (Apfel in dieser Kastanie). (eine Say-Methode) können wir call oder apply verwenden, um mit Methoden anderer Objekte zu arbeiten.
Der Unterschied zwischen bewerben und anrufen
Sowohl bei apply als auch bei call sind die Funktionen genau gleich, aber die Art und Weise, Parameter zu akzeptieren, ist unterschiedlich. Beispielsweise gibt es eine Funktion, die wie folgt definiert ist:
var func = function(arg1, arg2) {
};kann wie folgt aufgerufen werden:
func.call(this, arg1, arg2); func.apply(this, [arg1, arg2])
Wenn dies der Kontext ist, den Sie angeben möchten, kann es sich um ein beliebiges JavaScript-Objekt handeln (alles in JavaScript ist ein Objekt). Beim Aufruf müssen die Parameter der Reihe nach übergeben werden, und bei „Anwenden“ werden die Parameter in ein Array eingefügt.
In JavaScript ist die Anzahl der Parameter einer Funktion nicht festgelegt. Wenn Sie also Bedingungen anwenden möchten, verwenden Sie call, wenn die Anzahl Ihrer Parameter eindeutig bekannt ist.
Wenn Sie sich nicht sicher sind, verwenden Sie „Apply“ und übertragen Sie dann die Parameter in das Array und übergeben Sie sie. Wenn die Anzahl der Parameter unsicher ist, können alle Parameter innerhalb der Funktion über das Argumentarray durchlaufen werden.
Um das Gedächtnis zu festigen und zu vertiefen, sind hier einige häufige Anwendungen:
1. Zwischen Arrays anhängen
var array1 = [12 , "foo" , {name "Joe"} , -2458];
var array2 = ["Doe" , 555 , 100];
Array.prototype.push.apply(array1, array2);
/* array1 值为 [12 , "foo" , {name "Joe"} , -2458 , "Doe" , 555 , 100] */2. Holen Sie sich die Maximal- und Minimalwerte im Array
var numbers = [5, 458 , 120 , -215 ]; var maxInNumbers = Math.max.apply(Math, numbers), //458 maxInNumbers = Math.max.call(Math,5, 458 , 120 , -215); //458
Number selbst hat keine Max-Methode, Math jedoch schon, sodass wir ihre Methode mit call oder apply verwenden können.
3. Überprüfen Sie, ob es sich um ein Array handelt (vorausgesetzt, die toString()-Methode wurde nicht überschrieben)
functionisArray(obj){
return Object.prototype.toString.call(obj) === '[object Array]' ;
}4. Klassen-(Pseudo-)Array verwendet Array-Methode
var domNodes = Array.prototype.slice.call(document.getElementsByTagName("*"));In Javascript gibt es eine Objektstruktur namens Pseudo-Array. Was noch spezieller ist, ist das Arguments-Objekt und Aufrufe wie getElementsByTagName, document.childNodes usw., die NodeList-Objekte zurückgeben, sind Pseudo-Arrays. Die Push-, Pop- und anderen Methoden unter Array können nicht angewendet werden.
Aber wir können es über Array.prototype.slice.call in ein echtes Array-Objekt mit der Längeneigenschaft konvertieren, sodass domNodes alle Methoden unter Array anwenden kann.
Tiefes Verständnis der Verwendung von Apply und Call
Das Folgende ist [das Ausleihen einer Interviewfrage], um Bewerbung und Anruf besser zu verstehen.
Definieren Sie eine Protokollmethode, damit sie die Methode console.log vertreten kann:
function log(msg) {
console.log(msg);
}
log(1); //1
log(1,2); //1Die obige Methode kann die grundlegendsten Anforderungen erfüllen, aber wenn die Anzahl der übergebenen Parameter unsicher ist, ist die obige Methode ungültig. Zu diesem Zeitpunkt können Sie die Verwendung von „Apply“ oder „Call“ in Betracht ziehen Hier ist unsicher, daher ist es am besten, die folgende Methode zu verwenden:
function log(){
console.log.apply(console, arguments);
};
log(1); //1
log(1,2); //1 2Die nächste Anforderung besteht darin, jeder Protokollnachricht ein „(app)“-Präfix hinzuzufügen, wie zum Beispiel:
log("hello world"); //(app)hello worldWie geht das eleganter? Zu diesem Zeitpunkt müssen Sie davon ausgehen, dass der Parameter arguments ein Pseudo-Array ist, ihn über Array.prototype.slice.call in ein Standard-Array konvertieren und dann die Array-Methode unshift verwenden. so:
function log(){
var args = Array.prototype.slice.call(arguments);
args.unshift('(app)');
console.log.apply(console, args);
};binden
Nachdem wir über „Bewerben“ und „Anrufen“ gesprochen haben, sprechen wir über „Binden“. Die bind()-Methode ähnelt apply und call sehr und kann auch deren Zeiger im Funktionskörper ändern.
Die Erklärung von MDN lautet: Die bind()-Methode erstellt eine neue Funktion, die als Bindungsfunktion bezeichnet wird. Wenn diese Bindungsfunktion aufgerufen wird, basiert die Bindungsfunktion auf dem ersten Wert, der an die bind()-Methode übergeben wurde Der erstellte Parameter ist dieser, und der zweite und die folgenden Parameter, die an die bind()-Methode übergeben werden, sowie die Parameter der gebundenen Funktion selbst werden beim Ausführen als Parameter der ursprünglichen Funktion verwendet, um die ursprüngliche Funktion aufzurufen.
Sehen wir uns an, wie man es direkt verwendet. Im allgemeinen Singleton-Modus verwenden wir normalerweise _this, that, self usw., um dies zu speichern, damit wir nach einer Änderung des Kontexts weiterhin darauf verweisen können. So:
var foo = {
bar : 1,
eventBind: function(){
var _this = this;
$('.someClass').on('click',function(event) {
/* Act on the event */
console.log(_this.bar); //1
});
}
}由于 Javascript 特有的机制，上下文环境在 eventBind:function(){ } 过渡到 $('.someClass').on('click',function(event) { }) 发生了改变，上述使用变量保存 this 这些方式都是有用的，也没有什么问题。当然使用 bind() 可以更加优雅的解决这个问题：
var foo = {
bar : 1,
eventBind: function(){
$('.someClass').on('click',function(event) {
/* Act on the event */
console.log(this.bar); //1
}.bind(this));
}
}在上述代码里，bind() 创建了一个函数，当这个click事件绑定在被调用的时候，它的 this 关键词会被设置成被传入的值（这里指调用bind()时传入的参数）。因此，这里我们传入想要的上下文 this(其实就是 foo )，到 bind() 函数中。然后，当回调函数被执行的时候， this 便指向 foo 对象。再来一个简单的栗子：
var bar = function(){
console.log(this.x);
}
var foo = {
x:3
}
bar(); // undefined
var func = bar.bind(foo);
func(); // 3这里我们创建了一个新的函数 func，当使用 bind() 创建一个绑定函数之后，它被执行的时候，它的 this 会被设置成 foo ， 而不是像我们调用 bar() 时的全局作用域。
有个有趣的问题，如果连续 bind() 两次，亦或者是连续 bind() 三次那么输出的值是什么呢？像这样：
var bar = function(){
console.log(this.x);
}
var foo = {
x:3
}
var sed = {
x:4
}
var func = bar.bind(foo).bind(sed);
func(); //?
var fiv = {
x:5
}
var func = bar.bind(foo).bind(sed).bind(fiv);
func(); //?答案是，两次都仍将输出 3 ，而非期待中的 4 和 5 。原因是，在Javascript中，多次 bind() 是无效的。更深层次的原因， bind() 的实现，相当于使用函数在内部包了一个 call / apply ，第二次 bind() 相当于再包住第一次 bind() ,故第二次以后的 bind 是无法生效的。
apply、call、bind比较
那么 apply、call、bind 三者相比较，之间又有什么异同呢？何时使用 apply、call，何时使用 bind 呢。简单的一个栗子：
var obj = {
x: 81,
};
var foo = {
getX: function() {
return this.x;
}
}
console.log(foo.getX.bind(obj)()); //81
console.log(foo.getX.call(obj)); //81
console.log(foo.getX.apply(obj)); //81三个输出的都是81，但是注意看使用 bind() 方法的，他后面多了对括号。
也就是说，区别是，当你希望改变上下文环境之后并非立即执行，而是回调执行的时候，使用 bind() 方法。而 apply/call 则会立即执行函数。
再总结一下：
apply 、 call 、bind 三者都是用来改变函数的this对象的指向的；
apply 、 call 、bind 三者第一个参数都是this要指向的对象，也就是想指定的上下文；
apply 、 call 、bind 三者都可以利用后续参数传参；
bind 是返回对应函数，便于稍后调用；apply 、call 则是立即调用 。
好了，本文关于开启Javascript中apply、call、bind的用法之旅模式的相关教程，到此给大家介绍完了，希望大家喜欢。
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
