Verstehen Sie das Zeigeproblem in JavaScript gründlich

Dieser Artikel vermittelt Ihnen relevantes Wissen über diesen Zeiger in JavaScript. Ich hoffe, dass er für alle hilfreich ist.

1. Die Beziehung zwischen Kontext und this

Durch das Verständnis des Kontexts können wir das Zeigeproblem von 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 klarer verstehen Der Punkt des Codes> kann als aktueller Kontext angesehen werden<p></p> <h1>2 Allgemeine Funktionen🎜</h1>🎜Nehmen wir zunächst ein Beispiel, um zu sehen, was <code>dies in einer Funktion ist :🎜

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

🎜🎜 Die erste Ausgabe ist Zu diesem Zeitpunkt ist der Kontext der Funktion Farben, daher zeigt this auf Farben. Die zweite Ausgabe ist undefiniert und undefiniert. Zu diesem Zeitpunkt wird die Funktion direkt mit Klammern aufgerufen Der Kontext ist Fenster. Wenn this auf window zeigt, können wir sehen, dass der Kontext der Funktion, also this, durch die Art und Weise bestimmt wird Funktion heißt🎜. 🎜🎜🎜Häufige Funktionskontextsituationen: 🎜🎜

• Wenn ein Objekt und seine Methodenfunktion aufgerufen werden, ist der Funktionskontext das markierte Objekt, und this zeigt darauf object🎜obj .fun(); Der Kontext ist obj
• Rufen Sie die Funktion direkt mit Klammern auf, der Kontext ist das Fensterobjekt, auf das this zeigt das Fensterobjekt

🎜Zum Beispiel: 🎜

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

🎜 🎜 Das b in obj wird hier direkt in Klammern als fun() bezeichnet, sodass der Kontext von fun() zu diesem Zeitpunkt das Fensterobjekt ist, sodass this hier zeigt to window, b = 1 + 2 = 3;🎜 Der fun() von obj.fun() wird von obj aufgerufen, daher ist sein Kontext obj, also zeigt this hier auf obj, also res = 5 + 3 = 8🎜

3. Array/Array-ähnliches Objekt

🎜Array/Array-ähnliches Objekt listet Funktionen zum Aufrufen auf. Der Kontext ist dieses Array/Array-ähnliche Objekt🎜, das als angesehen werden kann :🎜

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>

🎜Lassen Sie es uns anhand von Beispielen verstehen. Hier ist es: 🎜rrreee🎜🎜Hier unten markiert 3 ist eine Funktion, die das Objekt mit dem Index 3 durch das Array aufzählt und es dann ausführt, sodass sein Kontext dieses Array arr ist🎜🎜🎜Array-ähnliches Objekt:🎜🎜

• Was ist ein Array-ähnliches Objekt?

🎜Alle Objekte, deren Schlüsselnamen natürliche Zahlenfolgen (beginnend bei 0) sind und das Attribut length haben🎜 Beispiel: Das Objekt arguments ist ein Array-ähnliches Objekt, das die eigentliche Parameterliste der Funktion ist🎜rrreee🎜🎜🎜Hier wird die Funktion fun aufgerufen, aber gleichzeitig mit dem Aufruf wird eine an sie übergebene Funktion ausgeführt, also die Anweisung arguments[3]() , also wird this[0] ausgegeben, eine Array-ähnliche Objektaufzählungsfunktion zum Aufrufen, deren Kontext also arguments und this ist zeigt darauf. 🎜

---

4. Funktion sofort ausführen

🎜Funktion (IIFE) sofort ausführen, ihr Kontext ist das Fensterobjekt, daher zeigt sein this auf window🎜🎜Lass uns verstehen es durch ein Beispiel: 🎜rrreee🎜🎜 obj.fun()Wie oben erwähnt, wird fun() von obj aufgerufen, also zeigt this hier auf obj 🎜 fun in obj ist gleichbedeutend mit einer sofortigen Ausführung Die Rückkehr Wert der Funktion, 🎜 ist äquivalent zu 🎜rrreee🎜 Hier zeigt this auf obj, also this.a = 2 🎜 In dieser Funktion zur sofortigen Ausführung ist das Kontextobjekt window, also this zeigt auf das Fenster, also sei a = this.as this zeigt auf das Fensterobjekt, also a = 1, also ist sein Rückgabewert dort a = 1;🎜Also die endgültige Ausgabe 1 + 2 = 3🎜

5. Timer- und Delayer-Aufruffunktionen

🎜In den Timer- und Delayer-Aufruffunktionen ist das Kontextobjekt das Fensterobjekt, innerhalb dessen der this auf das verweist Fensterobjekt 🎜🎜Lassen Sie es uns anhand eines Beispiels verstehen: 🎜rrreee🎜🎜 Die aufrufende Funktion von setTimeout hier ist obj.fun, die vom Verzögerer verwendet wird. Wenn sie aufgerufen wird, wird sie nach 2 Sekunden ausgeführt, also ist sie this zeigt auf das Fensterobjekt und gibt 7🎜🎜Wenn wir so schreiben, was wird ausgegeben? 🎜

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学习教程】

Das obige ist der detaillierte Inhalt vonVerstehen Sie das Zeigeproblem in JavaScript gründlich. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!