JavaScript Appeler et appliquer


Exemple

Les fonctions ont deux méthodes intégrées qui permettent au programmeur de fournir des arguments et la this différemment variable: call et apply .

Ceci est utile car les fonctions qui fonctionnent sur un objet (l’objet dont elles sont la propriété) peuvent être réutilisées pour fonctionner sur un autre objet compatible. De plus, des arguments peuvent être donnés en une seule fois sous forme de tableaux, de la même manière que l'opérateur de propagation ( ... ) dans ES6.

let obj = {
    a: 1,
    b: 2,
    set: function (a, b) {
        this.a = a;
        this.b = b;
    }
};

obj.set(3, 7); // normal syntax
obj.set.call(obj, 3, 7); // equivalent to the above
obj.set.apply(obj, [3, 7]); // equivalent to the above; note that an array is used

console.log(obj); // prints { a: 3, b: 5 }

let myObj = {};
myObj.set(5, 4); // fails; myObj has no `set` property
obj.set.call(myObj, 5, 4); // success; `this` in set() is re-routed to myObj instead of obj
obj.set.apply(myObj, [5, 4]); // same as above; note the array

console.log(myObj); // prints { a: 3, b: 5 }
5

ECMAScript 5 a introduit une autre méthode appelée bind() en plus de call() et apply() pour définir explicitement this valeur de la fonction sur un objet spécifique.

Il se comporte différemment des deux autres. Le premier argument de bind() est la valeur this pour la nouvelle fonction. Tous les autres arguments représentent des paramètres nommés qui doivent être définis de manière permanente dans la nouvelle fonction.

function showName(label) {
    console.log(label + ":" + this.name);
}
var student1 = {
     name: "Ravi"
};
var student2 = {
     name: "Vinod"
};

// create a function just for student1
var showNameStudent1 = showName.bind(student1);
showNameStudent1("student1"); // outputs "student1:Ravi"

// create a function just for student2
var showNameStudent2 = showName.bind(student2, "student2");
showNameStudent2(); // outputs "student2:Vinod"

// attaching a method to an object doesn't change `this` value of that method.
student2.sayName = showNameStudent1;
student2.sayName("student2"); // outputs "student2:Ravi"