Série avancée JavaScript : comment cela fonctionne

• Portée globale

• Appel de fonction

• Appel de méthode

• Appeler le constructeur

• Définir explicitement ceci

• Incompréhension courante

• méthode Expression d'affectation

JavaScript a un mécanisme complètement différent pour gérer cela que les autres langages. Dans cinq cas différents, cela indique quelque chose de différent.

Portée globale

this;

Lorsque ceci est utilisé dans toutes les portées, il pointera vers l'objet global.

Appel de fonction

foo();

Ici, cela pointera également vers l'objet global.

Appel de méthode

test.foo();

Dans cet exemple, cela pointe vers l'objet de test.

Appelez le constructeur

new foo();

Si la fonction a tendance à être utilisée avec le nouveau mot-clé, nous appelons cette fonction un constructeur. À l'intérieur de la fonction, cela pointe vers l'objet nouvellement créé.

Définissez explicitement ceci

function foo(a, b, c) {}

var bar = {};
foo.apply(bar, [1, 2, 3]); // 数组将会被扩展，如下所示
foo.call(bar, 1, 2, 3); // 传递到foo的参数是：a = 1, b = 2, c = 3

Lors de l'utilisation de la méthode call ou apply sur Function.prototype, ceci dans la fonction sera explicitement défini sur le premier dans le paramètre d'appel de fonction.

Ainsi, les règles pour les appels de fonction ne s'appliquent plus dans l'exemple ci-dessus, et cela est défini sur bar dans la fonction foo.

Idées fausses courantes

Bien que la plupart des situations soient vraies, la première règle (Note du traducteur : cela fait référence à la deuxième règle, c'est-à-dire lorsque appelant directement une fonction, cela pointe vers l'objet global) est considéré comme une autre erreur de conception du langage JavaScript, car il n'a jamais été d'utilité pratique.

Foo.method = function() {
    function test() {
        // this 将会被设置为全局对象（译者注：浏览器环境中也就是 window 对象）
    }
    test();
}

Un malentendu courant est que ceci dans test pointera vers l'objet Foo, ce qui n'est pas réellement le cas.

Afin d'obtenir une référence à l'objet Foo en test, nous devons créer une variable locale à l'intérieur de la fonction méthode pointant vers l'objet Foo.

Foo.method = function() {
    var that = this;
    function test() {
        // 使用 that 来指向 Foo 对象
    }
    test();
}

C'est juste un nom que nous donnons au hasard, mais ce nom est largement utilisé pour désigner l'extérieur de cet objet. Dans la section Fermetures, nous avons vu que cela peut être passé en paramètre.

Remarque : Dans la syntaxe de déclaration littérale d'un objet, ceci ne peut pas être utilisé pour pointer vers l'objet lui-même. Par conséquent, me in var obj = {me: this} ne pointera pas vers obj, car cela ne peut apparaître que dans les cinq situations ci-dessus. Note du traducteur : dans cet exemple, s'il est exécuté dans un navigateur, obj.me est égal à l'objet window.

Expression d'affectation de la méthode

Une autre chose qui semble étrange est l'alias de fonction, qui attribue une méthode à une variable.

var test = someObject.methodTest;
test();

Dans l'exemple ci-dessus, test est appelé comme une fonction ordinaire, par conséquent, celui-ci dans la fonction ne sera plus pointé vers l'objet someObject ;

Bien que la caractéristique de liaison tardive de celui-ci semble peu conviviale, elle est en effet basée sur le sol dont dépend l'héritage prototypique.

function Foo() {}
Foo.prototype.method = function() {};

function Bar() {}
Bar.prototype = Foo.prototype;

new Bar().method();

Lorsque la méthode est appelée, elle pointe vers l'objet instance de Bar.

Ce qui précède est le principe de fonctionnement de la série avancée JavaScript : pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !