appliquer/appeler/lier et ceci en JavaScript

Le lien entre apply/call/bind est qu'ils peuvent tous être utilisés pour changer la valeur pointée par this dans la fonction, et le premier paramètre est la valeur de this à pointer, et le deuxième paramètre de apply (ou bind et Les paramètres variables de l'appel) sont les paramètres à transmettre. Cela doit mentionner le pointeur de ceci dans la fonction en javascript. Discutons brièvement de

fun.apply(context,[argsArray])

Appelez fun immédiatement, et en même temps pointez l'original this de la fonction fun vers le nouvel objet contextuel entrant, qui implémente la même méthode et la réutilise sur différents objets.

contexte : l'objet transmis, remplaçant l'original this de la fonction fun

argsArray : un tableau ou un objet de type tableau, dans lequel les paramètres du tableau seront développés et transmis à fun ; en tant que paramètres réels distincts. Pour les fonctions, vous devez faire attention à l'ordre des paramètres.

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

Identique à apply, sauf que la liste des paramètres est différente. d'appel doivent être séparés. Si vous ne connaissez pas le nombre de paramètres, utilisez apply.

Utiliser :

Math.max() //Recevez uniquement des paramètres individuels, vous pouvez utiliser la méthode max sur le tableau via la méthode suivante :
Math.max.apply(null , array); //Les paramètres du tableau seront développés en paramètres séparés, puis transmis dans
Array.prototype.push.apply(arr1, arr2); // Divisez un tableau et transférez-le dans un autre tableau ; appliquer Ensuite, les paramètres de tableau suivants seront insérés en tant qu'élément.
Array.prototype.slice.call(arguments); //Utiliser la méthode slice sur l'objet groupe d'éléments de classe

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

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

Faire en sorte que le contexte exécuté par la méthode fun ne change jamais.

arg1 : Liste d'arguments à transmettre à la nouvelle fonction

Renvoie une fonction pour les appels suivants. Son corps de fonction est le même que la fonction fun d'origine, mais le this de la nouvelle fonction pointe. à l'objet contextuel nouvellement passé. La nouvelle fonction aura les paramètres initiaux arg1/arg2... spécifiés par la méthode bind. Les paramètres réels lors de l'appel ultérieur de la nouvelle fonction seront disposés derrière les paramètres existants.

//原来的函数有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

Utiliser la liaison dans la fonction de gestionnaire d'événements :

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

Utilisez la méthode bind() pour réécrire la méthode slice() :

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

bind() est compatible avec Ie5~ traitement ie8

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

Généralement, celui de setTimeout() pointe vers la fenêtre ou l'objet global. Lorsque vous utilisez une méthode de classe et que vous en avez besoin pour pointer vers une instance de classe, vous pouvez utiliser bind() pour la lier à l'objet appelant au lieu de la transmettre self.

this

Cet objet est lié en fonction de l'environnement d'exécution de la fonction lorsque la fonction est en cours d'exécution : dans la fonction globale, this est égal à window, et lorsque la fonction est traitée comme Lorsqu'une méthode d'un objet est appelée, celle-ci est égale à cet objet.

Méthode de jugement : cela n'a rien à voir avec l'endroit où elle est définie. Lorsque la fonction est en cours d'exécution, s'il y a un opérateur ., this fait référence à l'objet avant .; Si le mot-clé new est appelé, il fait référence à un nouvel objet. Lorsqu'il y a apply/call/bind, il fait référence au premier paramètre.

/*例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" ;

Dans un gestionnaire d'événements HTML DOM, cela pointe toujours vers le nœud DOM auquel le gestionnaire est lié.

Pour plus d'articles liés à l'application/l'appel/la liaison et cela en JavaScript, veuillez faire attention au site Web PHP chinois !