【JavaScript】- Der Unterschied und die Verwendung von call(), apply(), bind()

Methode Ausleihmuster

Auch Kontextmodus genannt, unterteilt in Apply und Call, Bind

Ähnlichkeiten zwischen den dreien:

1, werden verwendet, um den Punkt des this-Objekts der Funktion zu ändern.

2. Der erste Parameter ist das Objekt, auf das dieser zeigt.

3. Sie können nachfolgende Parameter verwenden, um Parameter zu übergeben.

1. Anruf:

Die Call- Methode kann eine Funktion aufrufen und den thisZeiger auf diese Funktion spezifizieren

Nach der Aufrufmethode wird die Parameterliste übergeben, und die Parameter können jeden beliebigen Typs sein. Wenn keine Parameter übergeben werden oder der erste Parameter nulloder ist nudefined,this zeigen alle aufwindow

Diese Methoden finden Sie im Prototyp Prototyp

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

Anrufdetails:

nicht strikter Modus

Wenn kein Parameter übergeben wird oder der erste Parameter null oder undefiniert ist, zeigt dies alles auf das Fenster

   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

strikter Modus

Wer ist der erste Parameter, auf wen dies zeigt, einschließlich null und undefiniert, wenn der Parameter this nicht übergeben wird, ist er undefiniert

    "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

Anrufanwendung:

// 将伪数组转成数组
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. anwenden:

Das heißt, die apply()Methode akzeptiert ein Array mit mehreren Parametern . Die call()Methode akzeptiert eine Liste mit mehreren Parametern

Sie können apply verwenden, um den Code des Anrufs gerade jetzt zu ändern

apply() hat nur zwei Parameter , der erste ist ein Objekt und der zweite ein Array.

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

const obj = {
    name: "屌丝"
}

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

apply : Im Grunde dasselbe wie call, der einzige Unterschied ist die Art und Weise, wie Parameter übergeben werden

apply fügt die Parameter, die an fn übergeben werden müssen, in ein Array (oder Klassen-Array) ein und übergibt es. Obwohl es ein Array schreibt, ist es auch äquivalent dazu, fn einzeln zu übergeben.

bewerbenBewerben:

// 简化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

3. Bindungsmethode:

Die Methode bind() erstellt eine neue Funktion, die an den thisZeiger der neuen Funktion gebunden werden kann

Der Unterschied zwischen der bind()- Methode und den ersten beiden besteht darin, dass die bind()- Methode die Funktion zurückgibt, deren Ausführungskontext geändert wurde, ohne sie sofort auszuführen, während die ersten beiden die Funktion direkt ausführen. Seine Parameter sind die gleichen wie bei 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

 Anwendung:

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();  //此时才调用函数