ES3 en détails

En utilisant du pseudocode, une valeur de type Reference peut être représentée comme un objet avec deux propriétés : la base (c'est-à-dire l'objet auquel appartient la propriété) et le nom de la propriété pour cette base :

valueOfReferenceType = {
    base: <objet de la propriété>,
    propertyName: <nom de la propriété>
}

'use strict';

// Accès à `jack`.
jack;

// Référence pour `jack`.
jackReference = {
    base: GO,
    propertyName: 'jack',
    strict: true,
}

La valeur d'un type Reference peut seulement être de deux sortes :

1. Récupérée à partir d'un identifiant,
2. Récupérée à partir d'un accesseur de propriété.

IV-A-1. Les identifiants▲

var jack = 10; // variable
function sally() {}; // fonction
zero = 'ghost'; // propriété non qualifiée

jackReference = {
    base: GO,
    propertyName: 'jack'
}

sallyReference = {
    base: GO,
    propertyName: 'sally'
}

zeroReference = {
    base: GO,
    propertyName: 'zero'
}

function GetValue(value) {

    // Quand on ne demande pas la valeur d'un type Reference
    if (Type(value) != Reference) {
        return value;
    }

    // Obtenir ce sur quoi pointe la référence
    base = GetBase(value);

    // Vérifier qu'elle ne pointe pas dans le vide
    if (base === null) {
       throw new ReferenceError;
    }

    // Obtenir cette valeur
    return base.[[Get]](GetPropertyName(value));

}

GetValue(jackReference) // `10`
GetValue(sallyReference) // `function sally() {}`
GetValue(zeroReference) // `'ghost'`

IV-A-2. Les accesseurs de propriété▲

var barrel = {
    lock: function shock() {}
}

// accesseurs
barrel.lock();
barrel['lock']();

barrelLockReference = {
    base: barrel,
    propertyName: 'lock'
}

GetValue(barrelLockReference) // `function shock() {}`

IV-A-3. Détermination de this▲

function barrel() {
    return this;
}

barrel(); // `this` vaut `GO`

barrelReference = {
    base: GO,
    propertyName: 'barrel'
}

var barrel = {
    lock: function shock() {
        return this;
    }
};

barrel.lock(); // `this` vaut `barrel`

barrelLockReference = {
    base: barrel,
    propertyName: 'lock'
}

var oogieBoogie = barrel.lock;
oogieBoogie(); // `this` vaut `GO`

oogieBoogieReference = {
    base: GO,
    propertyName: 'oogieBoogie'
}

function barrel() {
    console.log(this);
}

barrel(); // `GO`

barrelReference = {
    base: GO,
    propertyName: 'barrel'
}

console.log(barrel === barrel.prototype.constructor); // true

// autre forme d'expression appelante

barrel.prototype.constructor(); // `barrel.prototype`

barrelPrototypeConstructorReference = {
    base: barrel.prototype,
    propertyName: 'constructor'
}

function barrel() {
    console.log(this.lock);
}

var nightmare = { lock: 10 };
var christmas = { lock: 20 };

nightmare.gift = barrel;
christmas.gift = barrel;

nightmare.gift(); // `10`
christmas.gift(); // `20`

Nous avons noté plus haut que dans le cas où la partie gauche des parenthèses appelantes est une valeur qui n'est pas de type Reference (mais de n'importe quel autre type), la valeur de this est automatiquement mise à null et, par conséquent, remplacée par l'objet global.

Imaginons un exemple avec une telle expression :

(function () {
    console.log(this); // `null` => `GO`
})();

Dans ce cas, nous avons une fonction de type Object (d'instance Function) mais pas un type Reference (il n'y a aucun identifiant ou accesseur de propriété à résoudre), et donc la valeur de this est finalement remplacée par celle de l'objet global.

Voici des exemples plus complexes :

var barrel = {
    lock: function () {
        console.log(this);
    }
};

barrel.lock(); // Premier cas
(barrel.lock)(); // Deuxième cas
(barrel.lock = barrel.lock)(); // Troisième cas
(false || barrel.lock)(); // Quatrième cas
(barrel.lock, barrel.lock)(); // Cinquième cas

Nous avons un accesseur de propriété dont la valeur intermédiaire devrait normalement être une valeur de type Reference nous fournissant en base l'objet barrel (premier cas), mais qui pourtant, dans certains cas, nous donne pour this une base valant GO (Autres cas ?).

Le point ici, c'est que les trois derniers appels (qui ont bien une partie à gauche des parenthèses appelantes) après l'application de certaines opérations ne retournent pas une valeur de type Reference.

• Avec le premier cas, tout est clair. Il n'y a sans l'ombre d'un doute un type Reference qui est résolu, et par conséquent, la valeur de this est la base de cette référence, c'est-à-dire barrel.
• Dans le deuxième cas, il y a un opérateur de groupement qui n'applique pas, comme nous l'avons vu plus haut, la méthode pour aller chercher la valeur réelle d'un objet depuis une valeur de type Reference, c'est-à-dire qui n'applique pas GetValue. Sachant cela, après l'évaluation de l'opérateur de groupement qui dans ce cas retourne simplement barrel.lock, nous obtenons de nouveau une expression à gauche dont la valeur sera de type Reference et dont la base sera pour this l'objet barrel.
• Dans le troisième cas, l'opération dans l'opérateur de groupement se fait avec l'opérateur d'affectation, à la différence d'une opération réalisée uniquement avec un opérateur de groupement, l'opérateur d'affectation appelle la méthode GetValue. La conséquence est que cela nous ramène, une fois l'expression complètement évaluée, une fonction de type Object (mais pas une valeur de type Reference). Dans ce cas this vaut null et, par conséquent, vaut l'objet global.
• De la même manière pour les quatrième et cinquième exemples, l'opérateur virgule et l'opérateur d'expression logique OR font appel à la méthode interne GetValue. Ils perdent leurs valeurs de type Reference pour retourner une valeur de type Object (une fonction). Donc this finit par valoir l'objet global.

Nous avons vu qu'il y a des cas où l'appel de l'expression se situant sur la partie gauche des parenthèses retourne bien une valeur intermédiaire de type Reference, mais qu'il y a aussi des cas où la valeur de this est à null (et donc remplacée par l'objet global). C'est ce qui arrive quand la base de la valeur du type Reference est un objet d'activation (dont la forme abrégée sera AO pour « activation object »).

Nous pouvons mettre en évidence cela dans un exemple avec une fonction interne à une fonction parente appelante. Comme nous l'avons vu dans le deuxième chapitre ; les variables locales, les fonctions internes et les paramètres formels sont stockés dans l'objet d'activation, ce qui donne :

function jack() {
    function sally() {
        console.log(this);
    }
    sally(); // Comme la base de `sally` est `AO(jack)`, `this` est remplacé par `GO`
}

L'objet d'activation retourne toujours une valeur de this équivalente à null (c'est-à-dire que le pseudocode AO(jack) est équivalent à null). Ici encore, nous en revenons à la description précédente indiquant que la valeur de this dans le cas où elle est null est l'objet global.

Une exception demeure cependant avec une fonction qui serait appelée dans la structure de contrôle with dans le cas où with contiendrait un nom de propriété de fonction. La structure de contrôle with ajoute ses objets en amont de la chaîne de portées, c'est-à-dire avant l'objet d'activation. Par conséquent, la base de la valeur de type Reference (par un identifiant ou un accesseur de propriété) n'est pas l'objet d'activation, mais l'objet de la structure de contrôle with. Au passage, cela n'est pas vrai uniquement pour des fonctions internes, mais également aux fonctions globales, car l'objet with masque les objets les plus hauts (objet global ou objet d'activation) dans la chaîne des portées :

var gift = 10;

with ({

    jack: function () {
        console.log(this.gift);
    },
    gift: 20

}) {

    jack(); // 20

}

Car,

jackReference = {
    base: __withObject,
    propertyName: 'jack'
}

Une situation similaire intervient en appelant une fonction qui serait le premier argument de la structure de contrôle catch : dans ce cas, l'objet catch est aussi ajouté en amont de la chaîne des portées c'est-à-dire avant l'objet d'activation ou l'objet global. Cependant, ce comportement est reconnu comme un bug dans ECMA-262-3, car la nouvelle version du standard ECMA-262-5 rectifie cela. C'est-à-dire que la valeur de this pour un objet d'activation doit être équivalente à l'objet global et non plus à l'objet catch :

try {
    throw function () {
        console.log(this);
    };
} catch (nightmare) {
    nightmare(); // `__catchObject` en ES3, `GO` dans la version ES5
}

c'est-à-dire en ES3 :

eReference = {
    base: __catchObject,
    propertyName: 'nightmare'
}

mais en ES5 :

eReference = {
    base: GO,
    propertyName: 'nightmare'
}

On a également la même situation avec un appel récursif d'une expression de fonction nommée (plus de détails à propos des fonctions seront donnés dans un prochain tutoriel). Au premier appel de la fonction, la base de la valeur intermédiaire de type Reference est l'objet d'activation parent (soit l'objet global), mais dans les appels récursifs — la base devrait être un objet spécial stockant le nom optionnel de l'expression de fonction. Cependant, dans ce cas, la valeur de this associée est toujours l'objet global :

(function nightmare(jack) {

    console.log(this);

    !jack && nightmare(1); // « devrait » être un objet spécial, mais est toujours l'objet global

})(); // `GO`

Il y a un cas de plus en rapport avec la valeur de this dans un contexte de fonction. On le nomme appel de fonction en tant que constructeur :

function Happy() {
    console.log(this); // objet nouvellement créé plus bas et nommé `happy`
    this.halloween = 10;
}

var happy = new Happy();
console.log(happy.halloween); // `10`

Dans ce cas, l'opérateur new appelle la méthode interne [[Construct]] de la fonction Halloween qui va appeler à son tour la méthode interne [[Call]] après chaque création d'un nouvel objet pour fournir une nouvelle valeur de this pour chacun d'eux.

Il y a deux méthodes définies dans Function.prototype (et donc accessibles par toutes les fonctions), permettant de spécifier la valeur de this manuellement lors de l'appel d'une fonction. Ces méthodes sont apply et call.

Chacune d'entre elles accepte en premier argument la valeur que va prendre this dans le contexte créé lors de l'appel. La différence entre ces deux méthodes est vraiment minime. Pour apply, le second argument est obligatoirement un objet sous forme de tableau (ou un objet s'en rapprochant comme la propriété arguments de l'objet d'activation) dont chaque élément dans l'ordre sera associé à chaque paramètre de la fonction de gauche à droite. Pour call, la méthode accepte n'importe quels arguments. Le seul paramètre obligatoire pour ses deux méthodes est le premier, c'est-à-dire la valeur que prendra this.

Exemple :

var sally = 10;

function halloween(jack) {
    console.log(this.sally);
    console.log(jack);
}

halloween(20); // `this === GO`, `this.sally === 10` et `jack === 20`

halloween.call({ sally: 20 }, 30); // `this === <premier argument>`, `this.sally === 20` et `jack === 30`
halloween.apply({ sally: 30 }, [40]) // `this === <premier argument>`, `this.sally === 30` et `jack === 40`