Comprendre cela en Javascript

Pourquoi écrivez-vous cet article ?

On m'a déjà posé cette question lors d'entretiens chez Alibaba et dans d'autres entreprises, je souhaite donc la partager avec tout le monde. Si vous pouvez clairement comprendre la différence entre les sept situations suivantes, vous pouvez suivre l'entretien de l'officier. Une explication claire est sans aucun doute un gros plus. Après avoir compris cet article, l’intervieweur n’aura plus peur de vous poser cette question.

Parler de cela en Javascript, cela donne en fait mal à la tête aux gens. Contrairement à Java, cela en C++ pointe vers l'objet qui appelle cela.

La valeur de this dans une fonction est déterminée lorsque la fonction est réellement appelée et exécutée, et ne peut pas être déterminée lorsque la fonction est définie.

Comme la valeur de this fait partie du contexte d'exécution, chaque fois qu'une fonction est appelée, un nouveau contexte d'exécution sera généré. Lorsque vous l'utilisez dans votre code, la valeur de this est obtenue directement à partir du contexte d'exécution sans recherche dans la chaîne de portée.

Concernant la valeur de ceci, il peut être grossièrement divisé selon les sept situations suivantes :

Cas 1 : Global & appelle des fonctions ordinaires

Dans l'environnement global, cela toujours pointe vers la fenêtre.

console.log(this === window);     //true

Lorsqu'une fonction normale est appelée (notez qu'il ne s'agit pas d'un constructeur, aucun new n'est ajouté devant), cela pointe également vers la fenêtre.

var x = 10;
function foo(){
    console.log(this);     //Window
    console.log(this.x);   //10
}
foo();

Cas 2 : Constructeur

Le soi-disant constructeur est un objet dérivé d'une fonction new Généralement, la première lettre du nom de fonction du constructeur est en majuscule, comme par exemple. Objet, Fonction, Tableau Ce sont tous des constructeurs.

function Foo(){
    this.x = 10;
    console.log(this);    //Foo {x:10}
}
var foo = new Foo();
console.log(foo.x);      //10

Dans le code ci-dessus, si la fonction est utilisée comme constructeur, alors celle-ci représente l'objet qu'elle est sur le point de créer.

Mais si la fonction Foo est appelée directement au lieu de new Foo(), cela devient le cas 1 et Foo() devient une fonction normale.

function Foo(){
    this.x = 10;
    console.log(this);    //Window
}
var foo = Foo();
console.log(foo.x);      //undefined

Cas 3 : Méthode objet

Si la fonction est utilisée comme méthode de l'objet, celle-ci dans la méthode pointe vers l'objet.

var obj = {
    x: 10,
    foo: function () {
        console.log(this);        //Object
        console.log(this.x);      //10
    }
};
obj.foo();

Remarque : Si la fonction est définie dans une méthode objet, la situation est différente.

var obj = {
    x: 10,
    foo: function () {
        function f(){
            console.log(this);      //Window
            console.log(this.x);    //undefined
        }
        f();
    }
}
obj.foo();

Cela peut être compris de cette façon : bien que la fonction f soit définie dans obj.foo, elle appartient toujours à une fonction ordinaire, et celle-ci pointe toujours vers window. (C'est un piège, gardez-le à l'esprit)

Ici, si vous souhaitez appeler la variable obj.x dans la portée supérieure, vous pouvez utiliser self pour mettre en cache la variable externe this.

var obj = {
    x: 10,
    foo: function () {
        var self = this;
        function f(){
            console.log(self);      //{x: 10}
            console.log(self.x);    //10
        }
        f();
    }
}
obj.foo();

Si la fonction foo n'est pas appelée en tant que méthode objet :

var obj = {
    x: 10,
    foo: function () {
        console.log(this);       //Window
        console.log(this.x);     //undefined
    }
};
var fn = obj.foo;
fn();

obj.foo est affecté à une variable globale et n'est pas appelé en tant que propriété d'obj, alors this La valeur de this est window.

Cas 4 : Attribut de prototype de constructeur

function Foo(){
    this.x = 10;
}
Foo.prototype.getX = function () {
    console.log(this);        //Foo {x: 10, getX: function}
    console.log(this.x);      //10
}
var foo = new Foo();
foo.getX();

Dans la fonction Foo.prototype.getX, cela pointe vers l'objet foo. De plus, même dans toute la chaîne de prototypes, cela représente la valeur de l'objet actuel.

Cas 5 : La fonction est appelée en utilisant call, apply ou bind.

var obj = {
    x: 10
}
function foo(){
    console.log(this);     //{x: 10}
    console.log(this.x);   //10
}
foo.call(obj);
foo.apply(obj);
foo.bind(obj)();

Lorsqu'une fonction est appelée par call, apply ou bind, la valeur de this est la valeur de l'objet transmis.

Cas 6 : événement DOM this

Dans un gestionnaire d'événement HTML DOM, this pointe toujours vers le nœud HTML DOM auquel ce gestionnaire est lié :

function Listener(){   
    document.getElementById('foo').addEventListener('click', this.handleClick);     //这里的 this 指向 Listener 这个对象。不是强调的是这里的 this
}
Listener.prototype.handleClick = function (event) {
    console.log(this);    //<p id="foo"></p>
}
var listener = new Listener();
document.getElementById(&#39;foo&#39;).click();

This est facile à comprendre. Cela équivaut à passer des paramètres à la fonction, qui modifie le contexte d'exécution de handleClick. Cela équivaut au code suivant :

var obj = {
    x: 10,
    fn: function() {
        console.log(this);         //Window
        console.log(this.x);       //undefined
    }
};
function foo(fn) {
    fn();
} 
foo(obj.fn);

Vous pouvez également changer de contexte via bind :

.

function  Listener(){
    document.getElementById('foo').addEventListener('click',this.handleClick.bind(this));      
}
Listener.prototype.handleClick = function (event) {
    console.log(this);    //Listener {}
}
var listener = new Listener();
document.getElementById('foo').click();

Les six premières situations peuvent être résumées en une phrase : celle-ci pointe vers l'objet qui appelle la méthode.

Cas 7 : ceci dans la fonction flèche

Lors de l'utilisation de la fonction flèche, la situation est différente : ceci à l'intérieur de la fonction flèche se trouve la portée lexicale, déterminée par le contexte.

var obj = {
    x: 10,
    foo: function() {
        var fn = () => {
            return () => {
                return () => {
                    console.log(this);      //Object {x: 10}
                    console.log(this.x);    //10
                }
            }
        }
        fn()()();
    }
}
obj.foo();

Maintenant, la fonction flèche corrige complètement le pointage de ceci. Elle pointe toujours vers la portée lexicale, qui est l'obj appelant externe.

Si vous utilisez les fonctions fléchées, la méthode d'écriture de hack précédente :

var self = this;

n'est plus nécessaire.

var obj = {
    x: 10,
    foo: function() {
        var fn = () => {
            return () => {
                return () => {
                    console.log(this);    // Object {x: 10}
                    console.log(this.x);  //10
                }
            }
        }
        fn.bind({x: 14})()()();
        fn.call({x: 14})()();
    }
}
obj.foo();

Puisque cela a été lié en fonction de la portée lexicale dans la fonction flèche, lors de l'appel de la fonction flèche avec call() ou apply(), cela ne peut pas être lié, c'est-à-dire le premier entrant Le paramètre est ignoré.

Remarque supplémentaire :

• ceci est un mot réservé, vous ne pouvez pas le réécrire.

function test(){
    var this = {};     //Uncaught SyntaxError: Unexpected token this
}

• Objet hôte :

1. Lorsqu'un langage est en cours d'exécution, un environnement est requis, appelé environnement hôte.

2. Pour JavaScript, l'environnement hôte le plus courant est un navigateur Web. Le navigateur fournit un environnement pour que JavaScript puisse s'exécuter. Dans cet environnement, certaines interfaces doivent être fournies pour que le moteur JavaScript. peut interagir avec l’amarrage de l’environnement hôte.

3. Le moteur JavaScript est l'endroit où le code JavaScript est réellement exécuté. Les moteurs courants incluent le V8 (actuellement le moteur JavaScript le plus rapide, produit par Google) et le noyau JavaScript.

4. Le navigateur ou le serveur (nodejs) possède son propre moteur JS. Dans le navigateur, l'objet global est window, et dans nodejs, l'objet global est global.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!