【JavaScript】- La différence et l'utilisation de call(), apply(), bind()

modèle d'emprunt de méthode

Aussi appelé mode contextuel, divisé en appliquer et appeler, lier

Similitudes entre les trois :

1, sont utilisés pour changer le point de cet objet de la fonction.

2. Le premier paramètre est l'objet pointé par this.

3. Vous pouvez utiliser les paramètres suivants pour transmettre des paramètres.

1.appel：

La méthode d'appel peut appeler une fonction et peut spécifier le thispointeur vers cette fonction

Après la méthode d'appel , la liste des paramètres est transmise et les paramètres peuvent être de n'importe quel type. Si aucun paramètre n'est transmis ou si le premier paramètre est nullou nudefined,this ils pointent tous verswindow

Ces méthodes peuvent être trouvées dans le prototype prototype

const RichWumon = {
    name: "富婆",
    say: function () {
        console.log(this.name, " 我要重金求子");
    }
}

const obj = {
    name: "屌丝"
}

RichWumon.say();			// 富婆
RichWumon.say.call(obj);	// 屌丝

// fn.call(你想谁作为this变量,参数列表)
// call可以改变方法中this的指向，会以你调用call方法时传递的变量做为方法中的this

Détails de l'appel :

mode non strict

Si aucun paramètre n'est passé, ou si le premier paramètre est nul ou indéfini, tout cela pointe vers window

   let fn = function(a,b){
        console.log(this,a,b);
    }
    let obj = {name:"obj"};
    fn.call(obj,1,2);    // this:obj    a:1         b:2
    fn.call(1,2);        // this:1      a:2         b:undefined
    fn.call();           // this:window a:undefined b:undefined
    fn.call(null);       // this=window a=undefined b=undefined
    fn.call(undefined);  // this=window a=undefined b=undefined

mode strict

Qui est le premier paramètre, à qui cela pointe, y compris null et undefined, si le paramètre this n'est pas passé, il est indéfini

    "use strict"
    let fn = function(a,b){
        console.log(this,a,b);
    }
    let obj = {name:"obj"};
    fn.call(obj,1,2);   // this:obj        a:1          b:2
    fn.call(1,2);       // this:1          a:2          b=undefined
    fn.call();          // this:undefined  a:undefined  b:undefined
    fn.call(null);      // this:null       a:undefined  b:undefined
    fn.call(undefined); // this:undefined  a:undefined  b:undefined

demande d'appel :

// 将伪数组转成数组
let divs = document.querySelectorAll('div'); // 伪数组
// let divs = document.body.children;
console.log(divs);

function change(nodelist) {
    console.log(Object.prototype.toString.call(nodelist));
    return Array.prototype.slice.call(nodelist);

}

// 定义一个伪数组：看起来像数组，但是并没有数组的api,本质上是一个对象
    let arr = {
      0: 1,
      1: 10,
      2: 200,
      length: 3
    }
// 第一个参数是this,后面的是参数列表
    let data = [50, 60, 70, 80, 90];
    [].push.call(arr, ...data)
    console.log(arr)	
/* 输出的是 
Object
0: 1
1: 10
2: 200
3: 50
4: 60
5: 70
6: 80
7: 90
length: 8		// arr[arr.length++] = 50
*/

2.appliquer :

Autrement dit, la apply()méthode accepte un tableau avec plusieurs paramètres . La call()méthode accepte une liste de plusieurs paramètres

Vous pouvez utiliser apply pour modifier le code de l' appel tout à l'heure

apply() n'a que deux paramètres , le premier est un objet et le second est un tableau.

const RichWumon = {
    name: "富婆",
    say: function () {
        console.log(this.name, " 我要重金求子");
    }
}

const obj = {
    name: "屌丝"
}

RichWumon.say();			// 富婆
RichWumon.say.apply(obj);	// 屌丝

apply : fondamentalement identique à call, la seule différence est la manière de passer les paramètres

apply place les paramètres qui doivent être passés à fn dans un tableau (ou un tableau de classe) et les transmet. Bien qu'il écrive un tableau, cela équivaut également à passer fn un par un.

appliquerAppliquer :

// 简化log方法
function log() {
    // 不需要改变this
    console.log.apply(console, arguments);
}
​
​
var obj = {};
function foo(a, b, c) {
      console.log(a);
}
foo.apply(obj, [1, 2, 3])   //打印结果： 2;
//第一个参数是函数的对象，第二个参数是由函数的参数组成的数组
​
// 求数组中的最大值
var arr = [1, 66, 3, 99, 50];
var max = Math.max.apply(arr, arr);//第一个arr表示让arr借用max这个方法，第二个arr表示传给max的数据
console.log(max);       // 99
//apply()所执行的操作：1.执行Math.max(1,2,3,5,4) 2.把内部的this改成arr

méthode 3.bind :

La méthode bind() crée une nouvelle fonction qui peut être liée au thispointeur de la nouvelle fonction

La différence entre la méthode bind() et les deux premières est que la méthode bind() renverra la fonction dont le contexte d'exécution a été modifié sans l'exécuter immédiatement, tandis que les deux premières exécutent directement la fonction. Ses paramètres sont les mêmes que call()

var name = '张三';
function Fn(){
    this.age = 1;
    
    console.log(this.name + this.age);
}

Fn();			// 张三 1

// 返回值：新的函数
// 参数：新函数的this指向，当绑定了新函数的this指向后，无论使用何种调用模式，this都不会改变。
let obj = {
    name:'小强',
}
const newFn = Fn.bind(obj);
newFn();		// 小强 1

 application:

function f() {
  console.log("看我怎么被调用");
  console.log(this) //指向this
}
var obj = {name:'jack'};
f.call(obj) //直接调用函数
// f.bind(obj);    bind()不能调用函数
var g = f.bind(obj); 	// bind()改过this后，不执行函数，会返回一个绑定新this的函数
g();  //此时才调用函数