Qu'est-ce que cela signifie en javascript

En js, cela signifie "this; current" et est une variable de pointeur qui pointe dynamiquement vers l'environnement d'exécution de la fonction actuelle. Lorsque la même fonction est appelée dans différents scénarios, le pointeur de celle-ci peut également changer, mais il pointe toujours vers le véritable appelant de la fonction dans laquelle elle se trouve ; s'il n'y a pas d'appelant, il pointe vers la fenêtre de l'objet global ;

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

Une fois qu'une fonction JavaScript est appelée, elle sera exécutée dans un environnement d'exécution spécifique. Cet environnement d'exécution est l'appelant de la fonction, ou l'objet qui appelle la fonction. Si la fonction n'a pas d'appelant (pas via l'objet, mais directement), alors l'environnement d'exécution est la fenêtre d'objet globale.

Afin de référencer (accéder) à l'environnement d'exécution lors de l'exécution de la fonction, JavaScript a spécialement ajouté un mot-clé this. il s'agit d'une variable pointeur qui pointe vers l'environnement d'exécution de la fonction actuelle.

Lorsque la même fonction est appelée dans différents scénarios, le but de cela peut également changer, mais elle pointera toujours vers le véritable appelant de la fonction dans laquelle elle se trouve (celui qui l'appelle désignera qui s'il y en a) ; aucun appelant, cela pointera vers la fenêtre de l'objet global.

Dans la section "JS ceci et appeler des objets", nous avons parlé de l'utilisation préliminaire de ce pointeur. Les lecteurs qui ne comprennent pas veuillez cliquer sur le lien pour apprendre. Cette section se concentre sur une analyse approfondie de ce pointeur.

Utilisez ceci

ceci est automatiquement généré par le moteur JavaScript lors de l'exécution d'une fonction. Il s'agit d'un pointeur dynamique qui existe au sein de la fonction et fait référence à l'objet appelant actuel. L'utilisation spécifique est la suivante :

this[.属性]

Si cela ne contient pas d'attributs, l'objet actuel est transmis.

Son utilisation est flexible et les valeurs qu'il contient sont également variées. Par exemple, l'exemple suivant utilise la méthode call() pour modifier continuellement l'objet auquel il fait référence dans une fonction.

var x = "window";  //定义全局变量x，初始化字符串为“window”
function a () {  //定义构造函数a
    this.x = "a";  //定义私有属性x，初始化字符a
}
function b () {  //定义构造函数b
    this.x = "b";  //定义私有属性x，初始化为字符b
}
function c () {  //定义普通函数，提示变量x的值
    console.log(x);
}
function f () {  //定义普通函数，提示this包含的x的值
    console.log(this.x);
}
f();  //返回字符串“window”，this指向window对象
f.call(window);  //返回字符串“window”，指向window对象
f.call(new a());  //返回字符a，this指向函数a的实例
f.call(new b());  //返回字符b，this指向函数b的实例
f.call(c);  //返回undefined，this指向函数c对象

Ce qui suit est un bref résumé de cette performance dans 5 scénarios courants et stratégies d'adaptation.

1.Appels ordinaires

L'exemple suivant démontre l'impact des références de fonction et des appels de fonction à ce sujet.

var obj = {  //父对象
    name : "父对象obj",
    func : function () {
        return this;
    }
}
obj.sub_obj = {  //子对象
    name : "子对象sub_obj",
    func : obj.func
}
var who = obj.sub_obj.func();
console.log(who.name);  //返回“子对象sub_obj”，说明this代表sub_obj

Si vous changez la fonction du sous-objet sub_obj en un appel de fonction.

obj.sub_obj = {
    name : "子对象sub_obj",
    func : obj.func()  //调用父对象obj的方法func
}

Ensuite, ceci dans la fonction représente l'objet parent obj où la fonction est définie.

var who = obj.sub_obj.func;
console.log(who.name);  //返回“父对象obj”，说明this代表父对象obj

2. Instanciation

Lors de l'appel d'une fonction à l'aide de la nouvelle commande, cela fait toujours référence à l'objet instance.

var obj = {};
obj.func = function () {
    if (this == obj) console.log("this = obj");
    else if (this == window) console.log("this = window");
    else if (this.contructor == arguments.callee) console.log("this = 实例对象");
}
new obj.func;  //实例化

3. Appel dynamique

Utilisez call et apply pour forcer cela à pointer vers l'objet paramètre.

function func () {
    //如果this的构造函数等于当前函数，则表示this为实例对象
    if (this.contructor == arguments.callee) console.log("this = 实例对象");
    //如果this等于window，则表示this为window对象
    else if (this == window) console.log("this = window对象");
    //如果this为其他对象，则表示this为其他对象
    else console.log("this == 其他对象 \n this.constructor =" + this.constructor);
}
func();  //this指向window对象
new func();  //this指向实例对象
cunc.call(1);  //this指向数值对象

Dans l'exemple ci-dessus, lorsque func() est appelé directement, cela représente l'objet window. Lorsqu'une fonction est appelée à l'aide de la nouvelle commande, un nouvel objet instance sera créé, et celui-ci pointera vers cet objet instance nouvellement créé.

Lorsque vous utilisez la méthode call() pour exécuter la fonction func(), puisque la valeur du paramètre de la méthode call() est le chiffre 1, le moteur JavaScript forcera le chiffre 1 à être encapsulé dans un objet numérique, et ce pointera vers cet objet numérique.

4. Traitement des événements

Dans le résumé de la fonction de traitement des événements, cela pointe toujours vers l'objet qui a déclenché l'événement.

<input type="button" value="测试按钮" />
<script>
    var button = document.getElementsByTagName("put")[0];
    var obj = {};
    obj.func = function () {
        if (this == obj) console.log("this = obj");
        if (this == window) console.log("this = window");
        if (this == button) console.log("this = button");
    }
    button.onclick = obj.func;
</script>

Dans le code ci-dessus, le this contenu dans func() ne pointe plus vers l'objet obj, mais vers le bouton bouton, car func() est appelé et exécuté après avoir été passé au gestionnaire d'événements du bouton.

Si vous utilisez le standard de niveau DOM2 pour enregistrer la fonction de gestionnaire d'événements, la procédure est la suivante :

if (window.attachEvent) {  //兼容IE模型
    button.attachEvent("onclick", obj.func);
} else {  //兼容DOM标准模型
    button.addEventListener("click", obj.func, true);
}

Dans le navigateur IE, cela pointe vers l'objet window et l'objet bouton, mais dans le navigateur standard DOM, cela pointe uniquement pointe vers l'objet bouton. Parce que, dans le navigateur IE, attachEvent() est une méthode de l'objet window Lorsque cette méthode est appelée, elle pointe vers l'objet window.

Afin de résoudre les problèmes de compatibilité du navigateur, vous pouvez appeler la méthode call() ou apply() pour forcer l'exécution de la méthode func() sur l'objet obj afin d'éviter le problème de différents navigateurs analysant cela différemment.

if (window.attachEvent) {
    button.attachEvent("onclick", function () {  //用闭包封装call()方法强制执行func()
        obj.func.call(obj);
    });
} else {
    button.attachEventListener("onclick", function () {
        obj.func.call(obj);
    }, true);
}

Lorsqu'il est à nouveau exécuté, le this contenu dans func() pointe toujours vers l'objet obj.

5. Minuterie

Utilisez une minuterie pour appeler des fonctions.

var obj = {};
obj.func = function () {
    if (this == obj) console.log("this = obj");
    else if (this == window) console.log("this = window对象");
    else if (this.constructor == arguments.callee) console.log("this = 实例对象");
    else console.log("this == 其他对象 \n this.constructor =" + this.constructor);
}
setTimeOut(obj.func, 100);

Dans IE, cela pointe vers l'objet window et l'objet bouton. La raison spécifique est la même que celle de la méthode attachEvent() expliquée ci-dessus. Dans les navigateurs compatibles DOM, cela pointe vers l'objet window, pas vers l'objet bouton.

Étant donné que la méthode setTimeOut() est exécutée dans la portée globale, elle pointe vers l'objet window. Pour résoudre les problèmes de compatibilité du navigateur, vous pouvez utiliser les méthodes call ou apply.

setTimeOut (function () {
    obj.func.call(obj);
}, 100);

【Apprentissage recommandé : Tutoriel avancé javascript】

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!