Maison > interface Web > js tutoriel > Comment changer la valeur pointée par this dans une fonction en JavaScript ?

Comment changer la valeur pointée par this dans une fonction en JavaScript ?

伊谢尔伦
Libérer: 2017-07-20 13:34:06
original
1554 Les gens l'ont consulté

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 transmis, implémentant la même méthode dans différentes réutilisations sur l'objet.

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]' ;
}  //验证是否是数组
Copier après la connexion

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

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

arg1 : liste de paramètres à 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
Copier après la connexion

Utilisez bind 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
  }
}
Copier après la connexion

Utilisez la méthode bind() pour Méthode de réécriture slice ():


var _Slice = Array.prototype.slice;
var slice = Function.prototype.call.bind(_Slice);
slice(…);
Copier après la connexion

bind() est compatible avec le traitement Ie5~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
    }
  }
}
Copier après la connexion

Situation générale Le this 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" ;
Copier après la connexion

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal