"Ceci" en javascript est l'une des questions les plus importantes et les plus fréquemment posées en javascript.

Souvent, en raison d'une mauvaise compréhension du concept, nous avons tendance à écrire et à rencontrer des bogues dans nos logiciels. Dans cet article, nous allons essayer de démystifier ce sujet.

Pour décider de la liaison de "ceci", il y a peu de règles que nous devons comprendre. Donc, avant de sauter pour répondre, regardez et réfléchissez à la façon dont la fonction est invoquée ou appelée.
Énumérera les règles qui permettront de décider facilement de la "contrainte" de ceci.

Type de reliure "Ceci"

Liaison par défaut :

Lorsque nous appelons ou invoquons une fonction normalement, la liaison Rule of Default s'applique. Par défaut, dans le cas d'une "fenêtre" de navigateur, reportez-vous à celle-ci.

Comprenons-le par un exemple

function foo(){
   console.log(this);  
    function bar(){
     console.log(this);
   } 
  bar()
}
foo()
// both of the console statement will print the window.
//because , here functions are invoked normally.
// even bar is being called inside function foo.

Liaison implicite :

Le deuxième type de liaison est la liaison "implicite". Vous souvenez-vous de la fois où vous avez appelé la fonction avec (.) (point) ? comme foo.bar(). Oui, cela s'appelle une liaison implicite. Dans ce cas, "this" fait référence à l'objet appelant.

function foo(){
  console.log(this)
}
const obj = {foo: foo}
obj.foo() // prints obj as this

function foo(){
   console.log(this); 

  function bar(){
     console.log(this);
   }  
   bar()
}
const obj = {foo: foo}
obj.foo() // what do you think? function bar will print?

Mais rappelez-vous, ce que nous avons appris au point 1, que si la fonction est appelée normalement, peu importe où elle est définie et où elle est appelée, "ceci" fera toujours référence à la "liaison par défaut".

donc ici, foo a "obj" comme this , car obj appelle . Mais "bar" est toujours invoqué normalement, donc pour bar(), "this" est toujours "window".

La priorité de la liaison implicite est supérieure à la liaison par défaut .

Liaison explicite :

Lorsque nous invoquons une fonction en utilisant "call", "apply" ou "bind", il s'agit d'une liaison explicite. Parce qu'ici nous passons explicitement "cet" objet .

function foo(){
   console.log(this)
}
const obj = {name: 'Javascript'}
foo.call(obj) // here we are passing obj as "thisArg" so now foo has "obj" as 
//this binding

La priorité de la liaison explicite est encore plus élevée que la liaison implicite. Par exemple :

function foo(){
   console.log(this)
}
const obj = {name: 'Javascript', foo: foo}
const obj1 = {name: 'HackerNoon'}
obj.foo.call(obj1) // Here "call" has more precedence over (.) dot. 
// so now foo has obj1 as this binding

Que pensez-vous que la sortie serait pour l'exemple ci-dessous ?

function foo(){
   console.log(this)
}
const obj = {name: 'Javascript', foo: foo}
const obj1 = {name: 'HackerNoon'}
obj.foo.call(null)

Nouvelle reliure :

Lorsque nous invoquons une fonction avec le "nouveau" clavier, beaucoup de choses se passent sous le capot.

1. Un nouvel objet vide est créé.
2. le prototype de cet objet est lié au prototype de la fonction constructeur
3. exécute la fonction constructeur, liant l'objet "nouvellement créé" comme "ceci"
4. obj est retourné, si rien d'autre n'est retourné

function Foo(bar1, bar2) {
  
  this.bar1 = bar1;
  this.bar2 = bar2;
  console.log(this)
}
const obj = new Foo('bar1', 'bar2')

La priorité de la "nouvelle" liaison est encore plus élevée que la liaison "explicite" ou "implicite". Par exemple :

function Foo(bar1, bar2){
   this.bar1 = bar1;
   this.bar2 = bar2;
   console.log(this)
}
const obj = {foo: Foo}
new obj.foo('bar1', 'bar2') 
//output : {bar1: 'baar1', bar2: 'bar2'}

Fonction flèche (ES6):

La fonction flèche se comporte un peu différemment de la fonction normale. Les règles dont nous avons discuté jusqu'à présent ne fonctionnent pas pour la fonction Flèche.

La fonction de flèche n'a pas sa propre liaison "this", elle prend donc "this" de l'environnement le plus proche qui a cette liaison, et s'il n'y a pas un tel env. "ceci" fait toujours référence à "fenêtre" dans le navigateur pour la fonction flèche .

function foo(){
    const es6 = () => console.log(this);
    function normal(){console.log(this)};
    es6();
    normal();
}
foo()

changeons la façon dont "foo" est appelé.

function foo(){
    const es6 = () => console.log(this); // obj
    function normal(){console.log(this)}; // window
    es6();
    normal();
}
const obj = {foo: foo}
obj.foo()

So when deciding the “this” for arrow function, just look , if outside environment has any “this” binding , if yes then that’s the this binding for es6 function, if not then “window” would be the answer in browser context

const obj = {foo: () => console.log(this)}
obj.foo()

Faites une pause, la règle de liaison implicite ne fonctionnera pas ici, car foo est maintenant la fonction es6.

puisqu'il n'y a pas d'autre liaison, car foo n'est pas à l'intérieur d'une fonction normale qui a son propre "this".
La liaison de "ceci" est "fenêtre" pour l'instant.

Donc, dans sort , lorsque nous devons vérifier "ceci", regardez comment la fonction est invoquée et non où la fonction est définie.