Une brève discussion sur les techniques d'appel, d'application et de liaison_javascript en javascript

En JavaScript, call, apply et bind sont les trois méthodes fournies avec l'objet Function. La fonction principale de ces trois méthodes est de modifier le pointeur this dans la fonction, afin d'obtenir l'effet de "reprendre les fleurs". et l'abattage d'arbres ». Cet article expliquera ces trois méthodes en détail et répertoriera plusieurs scénarios d'application classiques.

appeler(thisArgs [,args...])

Cette méthode peut transmettre un paramètre thisArgs et une liste de paramètres. thisArgs spécifie l'appelant de la fonction au moment de l'exécution, c'est-à-dire l'objet this dans la fonction, et la liste de paramètres sera transmise à la fonction appelante. La valeur de thisArgs a les quatre situations suivantes :

(1) Ne pas passer, ou passer null, non défini, ceci dans la fonction pointe vers l'objet fenêtre

(2) Passez le nom de fonction d'une autre fonction, et cela dans la fonction pointe vers une référence à cette fonction

(3) Transmettez les types de base tels que les chaînes, les nombres ou les types booléens. Dans la fonction, cela pointe vers son objet d'emballage correspondant, tel que String, Number, Boolean

(4) Passer un objet, et ceci dans la fonction pointe vers cet objet

function a(){
 console.log(this); //输出函数a中的this对象
}
function b(){} //定义函数b

var obj = {name:'onepixel'}; //定义对象obj

a.call(); //window
a.call(null); //window
a.call(undefined);//window
a.call(1); //Number
a.call(''); //String
a.call(true); //Boolean
a.call(b);// function b(){}
a.call(obj); //Object

C'est la fonction principale de call. Elle vous permet d'appeler une méthode non définie sur un objet, et cette méthode peut accéder aux propriétés de l'objet, j'en parlerai plus tard. regardez d'abord un exemple simple :

var a = {

 name:'onepixel', //定义a的属性

 say:function(){ //定义a的方法
  console.log("Hi,I'm function a!");
 }
};

function b(name){
 console.log("Post params: "+ name);
 console.log("I'm "+ this.name);
 this.say();
}

b.call(a,'test');
>>
Post params: test
I'm onepixel
I'm function a!

Lorsque b.call est exécuté, la chaîne `test` est passée à la fonction b en tant que paramètre. En raison de la fonction d'appel, cela dans la fonction b pointe vers l'objet a, cela équivaut donc à appeler la fonction b sur l'objet. a. En fait, b n’est pas défini dans a.

appliquer(thisArgs[,args[]])

La seule différence entre apply et call est la manière dont le deuxième paramètre est passé. Le deuxième paramètre de apply doit être un tableau, tandis que call permet de transmettre une liste de paramètres. Il convient de noter que bien que apply reçoive un tableau de paramètres, lorsqu'il est transmis à la fonction appelante, il est transmis sous la forme d'une liste de paramètres :

function b(x,y,z){
 console.log(x,y,z);
}

b.apply(null,[1,2,3]); // 1 2 3

Cette fonctionnalité d'application est très importante, nous mentionnerons cette fonctionnalité dans les scénarios d'application suivants.

lier(thisArgs [,args...])

bind est une nouvelle méthode dans ES5. Ses paramètres sont similaires à call, mais ils sont très différents de call/apply, c'est-à-dire que l'appel de call ou apply exécutera automatiquement la fonction correspondante, tandis que bind n'exécutera pas la fonction correspondante. . La fonction renvoie simplement une référence à la fonction. En un coup d'œil, bind semble être en retard par rapport à call/apply, alors pourquoi ES5 introduit-il bind ?

En fait, le véritable objectif de l'introduction de bind dans ES5 est de combler les lacunes de call/apply puisque call/apply exécutera automatiquement la fonction cible, elle ne peut pas être utilisée dans la fonction de liaison d'événement car la liaison d'événement. la fonction n'a pas besoin Nous le faisons manuellement, elle est automatiquement exécutée par JS en interne lorsque l'événement est déclenché. Bind n'exécutera pas automatiquement la fonction cible lors de la modification de la fonction, il peut donc parfaitement résoudre les problèmes ci-dessus. Vous pouvez le comprendre en regardant un exemple :
.

var obj = {name:'onepixel'};

/**
 * 给document添加click事件监听，并绑定onClick函数
 * 通过bind方法设置onClick的this为obj，并传递参数p1,p2
 */
document.addEventListener('click',onClick.bind(obj,'p1','p2'),false);

//当点击网页时触发并执行
function onClick(a,b){
 console.log(
   this.name, //onepixel
   a, //p1
   b //p2
 )
}

Lorsque l'on clique sur la page Web, onClick est déclenché et exécuté, et un pixel p1 p2 est affiché, indiquant que cela dans onClick a été modifié par bind en un objet obj Afin d'avoir une compréhension approfondie de bind, Jetons un coup d'œil à l'implémentation polyfill de bind : <🎜 >

if (!Function.prototype.bind) {
 Function.prototype.bind = function (oThis) {
  var aArgs = Array.prototype.slice.call(arguments, 1),
   fToBind = this, //this在这里指向的是目标函数
   fBound = function () {
    return fToBind.apply(
     //如果外部执行var obj = new fBound(),则将obj作为最终的this，放弃使用oThis
     this instanceof fToBind
       ? this //此时的this就是new出的obj
       : oThis || this, //如果传递的oThis无效，就将fBound的调用者作为this

     //将通过bind传递的参数和调用时传递的参数进行合并，并作为最终的参数传递
     aArgs.concat(Array.prototype.slice.call(arguments)));
   };

  //将目标函数的原型对象拷贝到新函数中，因为目标函数有可能被当作构造函数使用
  fBound.prototype = this.prototype;

  //返回fBond的引用，由外部按需调用
  return fBound;
 };
}

Scénario d'application un : Héritage

function Animal(name,weight){
 this.name = name;
 this.weight = weight;
}

function Cat(){
 Animal.call(this,'cat','50');
 //Animal.apply(this,['cat','50']);

 this.say = function(){
  console.log("I am " + this.name+",my weight is " + this.weight);
 }
}

var cat = new Cat();
cat.say();//I am cat,my weight is 50

function test(){
 //检测arguments是否为Array的实例
 console.log(
   arguments instanceof Array, //false
   Array.isArray(arguments) //false
 );
 //判断arguments是否有forEach方法
 console.log(arguments.forEach); //undefined

 // 将数组中的forEach应用到arguments上
 Array.prototype.forEach.call(arguments,function(item){
  console.log(item); // 1 2 3 4
 });

}
test(1,2,3,4);

var arr = [2,3,1,5,4];

Math.max.apply(null,arr); // 5