Quatre façons de l'utiliser dans les compétences javascript_javascript

ce

Lorsqu'une fonction est exécutée, cela pointe toujours vers l'objet qui a appelé la fonction. Pour déterminer où cela pointe, vous devez en fait déterminer à qui appartient la fonction.

Dans le livre "The Essence of JavaScript Language", les scénarios où cela apparaît sont divisés en quatre catégories. Pour faire simple :

S'il y a un objet, pointez sur l'objet appelant
Pointez sur l'objet global sans appeler l'objet
Construit avec new, il pointe vers le nouvel objet
Modifiez la référence de ceci via apply ou call ou bind.

1) Lorsque la fonction a un objet auquel elle appartient : pointez sur l'objet auquel elle appartient

Lorsqu'une fonction a un objet auquel elle appartient, elle est généralement appelée via une expression . Par exemple, l'exemple suivant :

var myObject = {value: 100};
myObject.getValue = function () {
 console.log(this.value); // 输出 100

 // 输出 { value: 100, getValue: [Function] }，
 // 其实就是 myObject 对象本身
 console.log(this);

 return this.value;
};

console.log(myObject.getValue()); // => 100

getValue() appartient à l'objet myObject et est appelé par myOjbect, donc cela pointe vers l'objet myObject.

2) La fonction n'a pas d'objet propriétaire : pointe vers l'objet global

var myObject = {value: 100};
myObject.getValue = function () {
 var foo = function () {
  console.log(this.value) // => undefined
  console.log(this);// 输出全局对象 global
 };

 foo();

 return this.value;
};

console.log(myObject.getValue()); // => 100

Dans le bloc de code ci-dessus, bien que la fonction foo soit définie dans le corps de la fonction getValue, elle n'appartient en réalité ni à getValue ni à myObject. foo n'est lié à aucun objet, donc lorsqu'il est appelé, son pointeur this pointe vers l'objet global.

On dit qu'il s'agit d'une erreur de conception.

3) this dans le constructeur : pointe vers le nouvel objet

En js, nous appelons le constructeur via le mot-clé new, et celui-ci sera lié au nouvel objet.

var SomeClass = function(){
 this.value = 100;
}

var myCreate = new SomeClass();

console.log(myCreate.value); // 输出100

À propos, en js, il n'y a pas de frontières claires entre les constructeurs, les fonctions ordinaires, les méthodes objet et les fermetures. Les limites sont toutes dans le cœur humain.

4) appliquer et appeler des appels et lier la liaison : pointez sur l'objet lié

La méthode apply() accepte deux paramètres. Le premier est la portée dans laquelle la fonction s'exécute et l'autre est un tableau de paramètres (arguments).

La signification du premier paramètre de la méthode call() est la même que celle de la méthode apply(), sauf que les autres paramètres doivent être listés un par un.

Pour faire simple, la méthode d'appel est plus proche de la façon dont nous appelons habituellement les fonctions, tandis que apply nous oblige à lui passer un tableau sous la forme de Array. Ils sont interchangeables.

var myObject = {value: 100};

var foo = function(){
 console.log(this);
};

foo(); // 全局变量 global
foo.apply(myObject); // { value: 100 }
foo.call(myObject); // { value: 100 }

var newFoo = foo.bind(myObject);
newFoo(); // { value: 100 }

C’est tout le contenu de cet article, j’espère qu’il vous plaira tous.