Bien comprendre ce problème de pointage en JavaScript

Cet article vous apporte des connaissances pertinentes sur ce pointeur en JavaScript. Le mot-clé this est un point grammatical très important, j'espère qu'il sera utile à tout le monde.

1. La relation entre le contexte et ceci

En comprenant le contexte, nous pouvons comprendre plus clairement le problème de pointage de thisthis的指向问题

this的指向可以看成就是当前的上下文

2. 一般函数

先让我们通过一个例子来看看什么是函数中的this：

let colors = {
    green : "绿色",
    blue : "蓝色",
    showColors : function() {
        console.log("green: " + this.green  + " blue: " + this.blue);
    }}colors.showColors();let show = colors.showColors;show();

第一个输出的是绿色和蓝色，此时函数的上下文是 colors，所以this指向 colors
第二个输出的是 undefined 和 undefined，此时直接用圆括号调用函数，上下文就是 window，此时this指向的是 window

所以，我们可以看出函数的上下文也就是this是由调用函数的方式决定。

常见的函数上下文情况：

• 对象打点调用它的方法函数，则函数上下文是这个打点的对象，this指向这个对象
  obj.fun(); 上下文就是 obj
• 直接用圆括号调用函数，上下文就是 window 对象，this指向 window 对象

举个例子：

function fun() {
    return this.a + this.b;}var a = 1;var b = 2;let obj = {
    a : 5,
    b : fun(),
    fun : fun}let res = obj.fun();console.log(res);

在 obj 里面的 b 这里的 fun() 是直接用圆括号调用的，所以此时的 fun() 上下文就是 window 对象，所以这里的this指向 window，b = 1 + 2 = 3；
obj.fun() 的 fun() 是由 obj 打点调用的，所以它的上下文就是 obj，所以这里的this指向 obj，所以 res = 5 + 3 = 8

3. 数组 / 类数组对象

数组 / 类数组对象枚举出函数进行调用，上下文是这个数组 / 类数组对象
即可以看成：

数组[下标](); 调用这个函数的上下文对象就是这个数组

让我们通过例子来理解一下：

let arr = [1, 2, 3, function() {
    console.log(this[0]);}];arr[3]();

这里下标为 3 是个函数，通过数组枚举出来下标为 3 的对象，然后再执行，所以它的上下文就是这个数组 arr

类数组对象：

• 什么是类数组对象 ？

所有键名为自然数序列（从 0 开始），且有length属性的对象
例如：arguments对象就是一个类数组对象，它是函数的实参列表

function fun() {
    arguments[3]();}fun(1, 2, 3, function() {
    console.log(this[0]);})

这里 fun 这个函数被调用了，但是被调用的同时又执行了传入到它身上的一个函数，即arguments[3]()这个语句，所以就会输出this[0]，它是个类数组对象枚举出函数进行调用，所以它的上下文就是arguments，this指向它。

---

4. 立即执行函数

立即执行函数（IIFE），它的上下文就是 window 对象，所以它的this指向的是 window

让我们通过一个例子理解一下：

var a = 1;let obj = {
    a : 2,
    fun : (function() {
        let a = this.a;
        return function() {
            console.log(a + this.a);
        }
    })()};obj.fun();

obj.fun()由前文所讲，fun() 由 obj 调用，所以这里的this指向 obj；
obj 中的 fun 等于一个立即执行函数的返回值，
就相当于

obj = function() {
    console.log(a + this.a);}

这里的this指向的是 obj，所以 this.a = 2；
在这个立即执行函数里面它的上下文对象是 window，所以它的this指向 window，所以这里面的let a = this.a 的this指向的会是 window 对象，所以 a = 1，所以它的返回值那里的 a = 1；
所以最终输出 1 + 2 = 3

5. 定时器、延时器调用函数

在定时器、延时器调用函数中，上下文对象是 window 对象，里面的this指向 window 对象

让我们来通过一个例子来理解一下：

let obj = {
    a : 1,
    b : 2,
    fun : function() {
        console.log(this.a + this.b);
    }}var a = 3;var b = 4;setTimeout(obj.fun, 2000);

这里setTimeout的调用函数是obj.fun，它是由延时器调用的，它将在 2s 后运行，所以它的this

this Le point de code> peut être vu comme le contexte actuel<p></p> <h1 id="Fonctions-générales">2 Fonctions générales🎜</h1>🎜Prenons d'abord un exemple pour voir ce qu'est <code>ce dans une fonction. :🎜

let obj = {
    a : 1,
    b : 2,
    fun : function() {
        console.log(this.a + this.b);
    }}var a = 3;var b = 4;setTimeout(function() {
    obj.fun();}, 2000);

🎜🎜 Les premiers résultats sont vert et bleu. À ce stade, le contexte de la fonction est les couleurs, donc this pointe vers les couleurs🎜 La deuxième sortie est indéfinie et indéfinie. À ce stade, la fonction est appelée directement avec des parenthèses, et. le contexte est window. Ceci Lorsque this pointe vers window🎜🎜Donc, nous pouvons voir que le contexte de la fonction, c'est-à-dire this est 🎜déterminé par la façon dont le la fonction est appelée🎜. 🎜🎜🎜Situations courantes de contexte de fonction : 🎜🎜

• Lorsqu'un objet est appelé et que sa fonction de méthode est appelée, le contexte de fonction est l'objet qui est marqué, et this pointe vers cela object🎜obj .fun(); Le contexte est obj
• Appelez la fonction directement en utilisant des parenthèses, le contexte est l'objet window, this pointe vers l'objet fenêtre

🎜Par exemple : 🎜

DOM元素.onclick = function() {
    这里的上下文就是 DOM元素，this指向DOM元素};

🎜 🎜 Le b dans obj ici est appelé fun() directement en utilisant des parenthèses, donc le contexte de fun() à ce moment est l'objet window, donc this pointe ici à la fenêtre, b = 1 + 2 = 3 ;🎜 Le fun() de obj.fun() est appelé par obj, donc son contexte est obj, donc this pointe ici vers obj, donc res = 5 + 3 = 8🎜

3. Objet de type tableau/tableau

🎜L'objet de type tableau/tableau énumère les fonctions à appeler. Le contexte est cet objet de type tableau/tableau🎜, qui peut être vu comme. :🎜

nbsp;html>
    <meta>
    <meta>
    <meta>
    <title>事件处理函数</title>
    <style>
        p {
            width: 200px;
            height: 200px;
            float: left;
            border: 1px solid #000;
            margin-right: 10px;
        }
    </style>
    <p></p>
    <p></p>
    <p></p>

    <script>
        function show() {
            alert("You click " + this.id);
        }

        let box1 = document.getElementById(&#39;box1&#39;);
        let box2 = document.getElementById(&#39;box2&#39;);
        let box3 = document.getElementById(&#39;box3&#39;);

        box1.onclick = show;
        box2.onclick = show;
        box3.onclick = show;
    </script>

🎜Comprenons à travers des exemples Le voici : 🎜rrreee🎜🎜En bas, marqué 3 est une fonction qui énumère l'objet avec l'index 3 à travers le tableau puis l'exécute, donc son contexte est cet tableau arr🎜🎜🎜Objet de type tableau :🎜🎜

Qu'est-ce qu'un objet de type tableau ?

🎜Tous les objets dont les noms de clé sont des séquences de nombres naturels (à partir de 0) et ont l'attribut length🎜 Par exemple : l'objet arguments est un objet de type tableau, qui est la liste de paramètres réelle de la fonction🎜rrreee🎜🎜🎜Ici, la fonction fun est appelée, mais en même temps elle est appelée, une fonction qui lui est passée est exécutée, c'est-à-dire l'instruction arguments[3]() , donc affichera this[0], qui est une fonction énumérée d'objets de type tableau pour l'appel, donc son contexte est arguments, et this le pointe. 🎜

---

4. Exécuter immédiatement la fonction

🎜Exécuter immédiatement la fonction (IIFE), son contexte est l'objet window, donc son this pointe vers window🎜🎜Comprenons. à travers un exemple : 🎜rrreee🎜🎜 obj.fun()Comme mentionné ci-dessus, fun() est appelé par obj, donc this pointe ici vers obj 🎜 fun dans obj est égal à une exécution immédiate Le retour ; valeur de la fonction, 🎜 est équivalent à 🎜rrreee🎜 Ici this pointe vers obj, donc this.a = 2; 🎜 Dans cette fonction d'exécution immédiate, son objet contextuel est window, donc il Le this pointe vers window, donc laissez a = this.a. Le this pointe vers l'objet window, donc a = 1, donc sa valeur de retour est là a = 1;🎜. Donc la sortie finale 1 + 2 = 3🎜

5. Fonctions d'appel de minuterie et de retardateur

🎜Dans les fonctions d'appel de minuterie et de retardateur, l'objet contextuel est l'objet fenêtre, à l'intérieur du this pointe vers l'objet fenêtre 🎜🎜Comprenons-le à travers un exemple : 🎜rrreee🎜<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/067/9f014475a3e00e65c141386027b762e2-6.png" class="lazy" alt="Insérer la description de l'image ici">🎜 La fonction appelante de <code>setTimeout ici est obj.fun, qui est utilisée par le retardateur. Lorsqu'elle est appelée, elle s'exécutera après 2 secondes. , donc son this pointe vers l'objet window et affiche 7🎜🎜Si nous écrivons comme ceci, qu'est-ce qui sera affiché ? 🎜

let obj = {
    a : 1,
    b : 2,
    fun : function() {
        console.log(this.a + this.b);
    }}var a = 3;var b = 4;setTimeout(function() {
    obj.fun();}, 2000);

此时，setTimeout的第一个参数变成一个匿名函数，此时匿名函数的this指向的是 window 对象；
在匿名函数中obj.fun()，这个fun()是由 obj 调用的，所以此时fun里面的this指向的是 obj，所以输出 3

6. 事件处理函数

事件处理函数的上下文是绑定事件的DOM 元素，this指向的是DOM 元素
即：

DOM元素.onclick = function() {
    这里的上下文就是 DOM元素，this指向DOM元素};

让我们来通过一个例子来理解一下：

nbsp;html>
    <meta>
    <meta>
    <meta>
    <title>事件处理函数</title>
    <style>
        p {
            width: 200px;
            height: 200px;
            float: left;
            border: 1px solid #000;
            margin-right: 10px;
        }
    </style>
    <p></p>
    <p></p>
    <p></p>

    <script>
        function show() {
            alert("You click " + this.id);
        }

        let box1 = document.getElementById(&#39;box1&#39;);
        let box2 = document.getElementById(&#39;box2&#39;);
        let box3 = document.getElementById(&#39;box3&#39;);

        box1.onclick = show;
        box2.onclick = show;
        box3.onclick = show;
    </script>

当我们点击构建出来的三个盒子时，弹出的对话框中会输出对应的盒子 id
因为事件处理函数中，this指向的就是对应的DOM 元素

【相关推荐：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!