Comprendre cet objet en JavaScript (exemple de code)

Le contenu de cet article porte sur la compréhension de cet objet en JavaScript (exemples de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Avant-propos : J'ai récemment lu Javascript Advanced Programming. Pour moi, la version chinoise du livre a des traductions insatisfaisantes à de nombreux endroits, j'essaie donc de l'interpréter en utilisant ce que je comprends. S'il y a des erreurs ou des omissions, nous vous serions très reconnaissants de les signaler. La plupart du contenu de cet article est tiré de « JavaScript Advanced Programming, Third Edition ».

Cet objet est lié à l'environnement d'exécution basé sur la fonction au moment de l'exécution :

Dans l'environnement global, cela est égal à window, et lorsque la fonction est appelée comme méthode d'un objet , ceci est pointé vers cet objet.

Cependant, l'environnement d'exécution des fonctions anonymes est global, donc cet objet pointe généralement vers window.

L'utilisation de cet objet dans une fermeture peut poser quelques problèmes.

Parfois, cela n'est pas si évident en raison de la façon dont les fermetures sont écrites.

// 在全局环境中，this等于window
function thisBoundForWindow(){
    console.log(this);
    console.log(this.name);
}
thisBoundForWindow(); // Window
var o = new Object();
o.name = "Shaw";
//当函数被作为某个对象的方法调用时，this就指向了那个对象。
thisBoundForWindow.apply(o); // {name: "Shaw"}; "Shaw" ;

//在闭包中使用this对象可能会导致一些问题。
//有时候由于编写闭包的方式不同，这一点可能不会那么明显。
var name = "The Window";
var object = {
    name: "My Object",
    getNameFunc: function() {
        return function() {
            console.log(this.name);
        }
    }
}
object.getNameFunc()(); // "The Window"
/*
object.getNameFunc return=> function() {
        return function() {
            console.log(this.name);
        }
    }  => ()调用，还是在全局环境下调用的，所以this.name = window.name => "The Window"
*/

Le code ci-dessus crée d'abord un nom de variable globale, puis crée un objet contenant l'attribut name.

Cet objet contient également une méthode - getNameFunc(), qui renvoie une fonction anonyme, et la fonction anonyme renvoie this.name. Cette fonction anonyme est une fermeture.

Revoyons la définition de « fermeture » :

Une fonction qui a accès à des variables dans une autre portée est une fermeture.

Puisque getNameFunc() renvoie une fonction, l'appel de object.getNameFunc()() appellera la fonction qu'il renvoie. Le résultat est qu'un caractère est imprimé sur la console.

Cependant, le caractère renvoyé dans cet exemple est "La Fenêtre", qui est la valeur de la variable de nom globale.

Alors, comment pointer ceci vers l'objet dans l'exemple ?

Enregistrez cet objet dans la portée externe dans une variable à laquelle la fermeture peut accéder, afin que la fermeture puisse accéder à l'objet. (Notez que cette méthode est également souvent utilisée lors de l'utilisation de fonctions de rappel).

var name = "The Window";
var object = {
    name: "My Object",
    getNameFunc: function(){
        var that = this;
        return function() {
            console.log(that.name);
        }
    }
}
object.getNameFunc()(); // "My Object"
/*
// 伪代码过程
object.getNameFunc  execute
=> this = object = that 
=>function() {console.log(that.name);}  
=> ()
=> that.name = object.name 
=> "My Object" 
*/

Avant de définir la fonction anonyme, affectez l'objet this à une variable nommée ça.

Après avoir défini la fermeture, la fermeture peut également accéder à cette variable, car c'est une variable que nous avons spécifiquement déclarée dans la fonction conteneur.

Même après le retour de la fonction, cela fait toujours référence à l'objet, donc appeler Object.getNameFunc() renvoie "Mon objet".

Dans plusieurs circonstances particulières, la valeur de ceci peut changer de manière inattendue. Par exemple, le code suivant modifie les résultats de l'exemple précédent.

var name = "The Window";
var object = {
    name: "My Object",
    getName: function() {
        console.log(this.name);
    }
};
object.getName(); // "My Object"
(object.getName)(); // "My Object"
(object.getName = object.getName)(); // "The Window"

La première ligne de code appelle object.getName() comme d'habitude et renvoie "Mon objet" car this.name est object.name.

La deuxième ligne de code ajoute des parenthèses avant d'appeler cette méthode. Bien qu'après l'ajout des parenthèses, elle semble faire référence à une fonction, la valeur de celle-ci est conservée car la définition de object.getName et (object .getName) est. le même.

La troisième ligne de code exécute d'abord une instruction d'affectation, puis appelle le résultat de l'affectation. Étant donné que l'expression d'affectation est la fonction elle-même, sa valeur n'est pas conservée et « La fenêtre » est renvoyée.

//第三个例子伪代码
//理解此段代码，首先要明确一个知识点：赋值语句是有返回值的，返回值就是所赋的值（也就是‘=’右边的值）。

(object.getName = object.getName)(); // "The Window"

(object.getName = function(){ console.log(this.name)})();

(function(){console.log(this.name)})();
//所以this指向window

Bien sûr, il est peu probable que nous appelions cette méthode comme les deuxième et troisième lignes de code. Ce n'est pas grave si vous ne le comprenez pas pour le moment. Cet exemple permet d'illustrer que même des changements subtils dans la syntaxe peuvent accidentellement en modifier la valeur.

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!