Méthodes pour changer ce pointeur dans JS (appeler, appliquer, lier)_compétences javascript

Il s'agit d'un mot-clé en JavaScript. La valeur de ceci changera à mesure que la fonction est utilisée dans différentes situations. Mais il y a toujours un principe, c'est-à-dire qu'il fait référence à l'objet qui appelle la fonction.

Cela pointe généralement vers l'appelé actuel, mais il peut également être modifié d'autres manières. Trois méthodes seront présentées ci-dessous :

1. Lorsqu'il est utilisé comme héritage :

function Parent(age){
this.name=['mike','jack','smith'];
this.age=age;
}
function Child(age){
Parent.call(this,age);//把this指向Parent,同时还可以传递参数
}
var test=new Child(21);
console.log(test.age);//21
console.log(test.name);
test.name.push('bill');
console.log(test.name);//mike,jack,smith,bill

2. call et apply peuvent changer cela pour pointer vers , mais le deuxième paramètre de apply est une distribution de hachage, et call peut être un tableau

console.log(Math.max.apply(null,[1,2,3,4]));//4

La méthode

apply() reçoit deux paramètres : l'un est la portée dans laquelle exécuter la fonction et l'autre est le tableau de paramètres. Parmi eux, le deuxième paramètre peut être une instance de Array ou un objet arguments. La méthode call() a le même effet que la méthode apply(), elles diffèrent uniquement par la manière dont elles reçoivent les paramètres. Pour appel()
En ce qui concerne les méthodes, la valeur du premier paramètre ne change pas. Ce qui change, c'est que les paramètres restants sont transmis directement à la fonction. En d’autres termes, lors de l’utilisation de la méthode call(), les paramètres passés à la fonction doivent être énumérés un par un.

3.ES5 définit également une méthode  : bind(), qui créera une instance d'une fonction, et sa valeur sera liée à la valeur de la fonction bind() . Comme

window.color='red';
var o={color:'blue'};

function sayColor(){
console.log(this.color);
}
var objectSaycolor=sayColor.bind(o);
//var objectSaycolor=sayColor.bind();
objectSaycolor();//blue

Ici, sayColor() appelle bind() et transmet l'objet o, créant la fonction objectSayColor(). La valeur this de la fonction objectSayColor() est égale à o, donc même si cette fonction est appelée dans la portée globale, vous verrez du bleu.

Ce qui précède est la méthode que l'éditeur vous présente pour modifier ce pointeur dans JS (appeler, postuler, lier). J'espère que cela vous sera utile !

J'ai encore un peu de temps pour vous ajouter quelques connaissances de base : la différence entre call() et apply()

1. Définition de la méthode

méthode d'appel :

Syntaxe : call(thisObj, Object)

Définition : Appeler une méthode d'un objet pour remplacer l'objet actuel par un autre objet.

Instructions :

La méthode call peut être utilisée pour appeler une méthode au nom d'un autre objet. La méthode d'appel modifie le contexte d'objet d'une fonction du contexte initial au nouvel objet spécifié par thisObj.

Si aucun paramètre thisObj n'est fourni, l'objet Global est utilisé comme thisObj.

Méthode d'application :

Syntaxe : apply(thisObj, [argArray])

Définition : Appliquer une méthode d'un objet pour remplacer l'objet actuel par un autre objet.

Description :

Si argArray n'est pas un tableau valide ou n'est pas un objet arguments, une TypeError sera provoquée.
Si ni argArray ni thisObj ne sont fournis, l'objet Global sera utilisé comme thisObj et aucun paramètre ne pourra être transmis.

Exemple de code :

function Animal(name) {
   this.name = name;
   this.showName = function() {
     console.log(this.name);
   };
 }
 function Cat(name) {
   Animal.call(this, name);
 }
 Cat.prototype = new Animal();
 function Dog(name) {
   Animal.apply(this, name);
 }
 Dog.prototype = new Animal();
 var cat = new Cat("Black Cat"); //call必须是object
 var dog = new Dog(["Black Dog"]); //apply必须是array
 cat.showName();
 dog.showName();
 console.log(cat instanceof Animal);
 console.log(dog instanceof Animal);

Simuler un appel, appliquer ce remplacement

 function Animal(name) {
   this.name = name;
   this.showName = function() {
     alert(this.name);
   };
 };
 function Cat(name) {
   this.superClass = Animal;
   this.superClass(name);
   delete superClass;
 }
 var cat = new Cat("Black Cat");
 cat.showName();