apply/call/bind und dies in JavaScript

Die Verbindung zwischen apply/call/bind besteht darin, dass sie alle verwendet werden können, um den Wert zu ändern, auf den this in der Funktion zeigt, und der erste Parameter der Wert von this ist, auf den gezeigt werden soll, und der zweite Parameter apply (oder die variablen Parameter von bind und call) sind die zu übergebenden Parameter. Dazu muss der Zeiger darauf in der Funktion in Javascript erwähnt werden. Lassen Sie uns kurz

fun.apply(context,[argsArray])

Rufen Sie fun sofort auf und verweisen Sie gleichzeitig auf die ursprüngliche This-Funktion der Fun-Funktion Eingehendes neues Kontextobjekt, das dieselbe Methode implementiert und für verschiedene Objekte wiederverwendet.

Kontext: das übergebene Objekt, das das ursprüngliche This der Fun-Funktion ersetzt

argsArray: ein Array oder Array-ähnliches Objekt, in dem die Array-Parameter erweitert und an Fun übergeben werden als separate Aktualparameter Bei Funktionen müssen Sie auf die Reihenfolge der Parameter achten.

fun.call(context,[arg1],[arg2],[…])

Dasselbe wie gelten, außer dass die Parameterliste unterschiedlich ist Ein eingehender Anruf muss getrennt werden. Wenn Sie die Anzahl der Parameter nicht kennen, verwenden Sie apply.

Verwendung:

Math.max() //Nur einzelne Parameter empfangen. Sie können die Max-Methode für das Array über die folgende Methode verwenden:
Math.max.apply(null , array); //Die Array-Array-Parameter werden in separate Parameter erweitert und dann an
Array.prototype.push.apply(arr1, arr2); übergeben; //Ein Array aufteilen und in ein anderes Array verschieben; anwenden Dann werden die nachfolgenden Array-Parameter als Elemente eingefügt.
Array.prototype.slice.call(arguments); //Verwenden Sie die Slice-Methode für das Klassenelementgruppenobjekt

function isArray(obj){
  return Object.prototype.toString.call(obj) === '[object Array]' ;
}  //验证是否是数组

fun.bind(context,[arg1],[arg2],[…])

Sorgen Sie dafür, dass sich der von der Fun-Methode ausgeführte Kontext nie ändert.

arg1: Parameterliste, die an die neue Funktion übergeben werden soll

Gibt eine Funktion für nachfolgende Aufrufe zurück. Ihr Funktionskörper ist derselbe wie der ursprüngliche Funktionsspaß, aber dies der neuen Funktionspunkte zum neu übergebenen Kontextobjekt. Die neue Funktion verfügt über die Anfangsparameter arg1/arg2..., die durch die Bindungsmethode angegeben werden. Die tatsächlichen Parameter werden beim anschließenden Aufruf der neuen Funktion hinter den vorhandenen Parametern angeordnet.

//原来的函数有4个参数
var displayArgs = function (val1, val2, val3, val4) {
  console.log(val1 + " " + val2 + " " + val3 + " " + val4);
}
var emptyObject = {};
// 生成新函数时bind方法指定了2个参数，则新函数会带着这个两个实参
var displayArgs2 = displayArgs.bind(emptyObject, 12, "a");
// 调用时传入另2个参数，要在bind方法传入的2个实参后面
displayArgs2("b", "c");
// Output: 12 a b c

Verwenden Sie bind in der Event-Handler-Funktion:

var obj = {
  arg1 : 1,
  attach: function(){
    //var self = this; 普通传入this 的方法
    $('xxx').on('click',function (event) {
      console.log(this.arg1);//若不绑定this，回调函数中的this常指目标元素
     }.bind(this));  //使用bind方法绑定this
  }
}

Verwenden Sie die bind()-Methode, um die Slice()-Methode neu zu schreiben:

var _Slice = Array.prototype.slice;
var slice = Function.prototype.call.bind(_Slice);
slice(…);

bind() ist mit Ie5~ kompatibel ie8-Verarbeitung

if (!Function.prototype.bind) {
  Function.prototype.bind = function(context) {
    var self = this, // 调用bind方法的目标函数
    args = arguments;
    return function() {
      self.apply(context, Array.prototype.slice.call(args, 1));//参数个数不确定时用apply
    }
  }
}

Im Allgemeinen zeigt dies von setTimeout() auf das Fenster oder das globale Objekt. Wenn Sie eine Klassenmethode verwenden und diese auf eine Klasseninstanz verweisen soll, können Sie bind() verwenden, um diese an das aufrufende Objekt zu binden, anstatt self zu übergeben.

dies

Dieses Objekt ist basierend auf der Ausführungsumgebung der Funktion gebunden, wenn die Funktion ausgeführt wird: In der globalen Funktion entspricht dies dem Fenster und dem Zeitpunkt Die Funktion wird wie folgt behandelt: Wenn eine Methode eines Objekts aufgerufen wird, ist diese gleich diesem Objekt.

Beurteilungsmethode: Dies hat nichts damit zu tun, wo sie definiert ist. Wenn die Funktion ausgeführt wird, bezieht sich dies auf das Objekt vor .; wenn nicht, bezieht sich dies auf das Fenster. Wenn das Schlüsselwort new aufgerufen wird, verweist es auf ein neues Objekt. Wenn es apply/call/bind gibt, bezieht es sich auf den ersten Parameter.

/*例1*/
function foo() {
  console.log( this.a );
} 
var obj2 = {
  a: 42,
  foo: foo
};
var obj1 = {
  a: 2,
  obj2: obj2
};
obj1.obj2.foo(); // 42;当foo函数被调用时，其本身是归obj2所拥有
/*例2*/
function foo() {
  console.log( this.a );
} 
var obj = {
  a: 2,
  foo: foo
};
var bar = obj.foo;   // bar引用foo函数本身
var a = "global";   // 全局对象的属性
bar();        // "global" ;

In einem HTML-DOM-Ereignishandler zeigt dies immer auf den DOM-Knoten, an den der Handler gebunden ist.

Weitere Artikel zum Thema Apply/Call/Bind und dies in JavaScript finden Sie auf der chinesischen PHP-Website!