Thoroughly understand the this pointing problem in JavaScript

This article brings you relevant knowledge about this pointer in JavaScript. The this keyword is a very important grammatical point. I hope everyone has to help.

1. The relationship between context and this

Pass Understanding the context, we can more clearly understand the pointing problem of this

this’s pointing can be seen as the current context

2. General functions

Let us first take an example to see what this is in a function:

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

First The first output is green and blue. At this time, the context of the function is colors, so this points to colors
. The second output is undefined and undefined. At this time, the function is called directly with parentheses, and the context It is window. At this time, this points to window

. Therefore, we can see that the context of the function is this is determined by the way the function is called. .

Common function context situation:

• The object is marked and calls its method function, then the function context is the marked object, thisPoint to this object
  obj.fun(); The context is obj
• Call the function directly with parentheses, the context is the window object, this points to the window object

For example:

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

The fun() in b in obj is directly called with parentheses, so at this time fun( ) The context is the window object, so this here points to window, b = 1 2 = 3;
The fun() of obj.fun() is called by obj, so its context is obj, so this here points to obj, so res = 5 3 = 8

3. Array/Array-like object

Array/Array-like object enumeration function To make a call, the context is this array/array-like object
, which can be seen as:

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

Let us understand it through an example:

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

Here is the subscript 3 is a function that enumerates the object with index 3 through the array and then executes it, so its context is this array arr

Array-like object:

• What is an array-like object?

All objects whose key names are natural number sequences (starting from 0) and have length attributes
For example: argumentsThe object is an array-like object Object, which is the actual parameter list of the function

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

Here the function fun is called, but at the same time it is called, a function passed to it is executed. That is, the statement arguments[3](), so this[0] will be output. It is an array-like object that enumerates functions for calling, so its context is arguments, this points to it.

---

4. Immediately execute function

Immediately execute function (IIFE), its context is the window object, so its this points to window

Let us understand it through an example:

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

obj.fun()As mentioned above, fun() is called by obj, so here this points to obj;
fun in obj is equal to the return value of an immediately executed function,
is equivalent to

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

where this points to is obj, so this.a = 2;
In this immediate execution function, its context object is window, so its this points to window, so let a = this.a this points to the window object, so a = 1, so its return value has a = 1;
so the final output is 1 2 = 3

5. Timing Timer and delayer calling functions

In the timer and delayer calling functions, the context object is the window object, and this inside points to the window object

Let us Let’s understand it through an example:

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

The calling function of setTimeout here is obj.fun, which is called by the delayer Yes, it will run after 2s, so its this points to the window object and outputs 7

If we write this, what will be output?

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

The above is the detailed content of Thoroughly understand the this pointing problem in JavaScript. For more information, please follow other related articles on the PHP Chinese website!