Qu'est-ce que cela signifie en javascript

La signification chinoise de ceci est "actuel ; ceci". Il s'agit d'une variable de pointeur en JavaScript, 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 pointeur de this changera, mais il pointera toujours vers le véritable appelant de la fonction dans laquelle elle se trouve, s'il n'y a pas d'appelant, cela pointera vers la fenêtre ;

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

La portée des fonctions JavaScript est statique, mais l'appel de fonction est dynamique. Étant donné que les fonctions peuvent être exécutées dans différents environnements d'exécution, JavaScript définit le mot-clé this dans le corps de la fonction pour obtenir l'environnement d'exécution actuel.

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 pointe vers qui) ; s'il n'y a pas d'appelant, pointez simplement vers la fenêtre de l'objet global.

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.

Ceci est flexible à utiliser 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 la fonction du sous-objet sub_obj est modifiée 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, this 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 chiffre numérique. objet, et cela 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, ceci contenu dans func() ne pointe plus vers l'objet obj, mais vers le bouton bouton, car func() est appelé après avoir été passé à la fonction de gestion des é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 fenêtre et l'objet bouton, mais dans DOM navigateur standard, il pointe uniquement 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é des navigateurs, 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 une fonction.

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);

[Recommandations associées : Tutoriel d'apprentissage 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!