foreword

The 'this' keyword in JavaScript is a very important concept, but many beginners find it difficult to understand it deeply. If you are or will be tortured by this, take a deep breath and relax now, you must have It is not difficult to know that it is actually not difficult to understand the keyword 'this'; after reading this article patiently, I believe you will have a deeper understanding of 'this'. Below we will discuss how the 'this' keyword works.

what is the 'this' keyword

The 'this' keyword is a special variable created for each execution context (each function); so in general, in functions using the 'this' keyword, 'this' will always take the value of its owner. In other words it means that it points to the owner of the function. This sounds abstract, so for now you just have to remember that the value of the 'this' keyword is not static, so it's always different. Its value depends on how the function was called, and its value is only assigned when the function is actually called. For example, we set x=4; then the value of x is 4, but the value of the 'this' keyword depends on how the function is called; so now let's analyze four different ways to call the function.

Four ways---1. The first way to call a function is: use the function as a method

Example: this represents an object

const bruce={
    name:'bruce',
    birthYear:2001,
    calcAge:function () {
        return 2022-this.birthYear
    }
};
console.log(bruce.calcAge());//21`

In the above bruce object there is a calcAge() function, which is a function attached to the bruce object. So when we call a method, the this in calcAge() will point to the object; in other words, the bruce object pointed to by this is calling this method. In the last line of the code, we call this function; in the calcAge() function we use this, so what should the value of this be? Yes, this this refers to bruce; so this.birrhYear==bruce.birthYear==2001.

Four ways --- 2. The second way to call a function is: simply call the function, do not use the function as a method, and do not attach it to any object

Example: at this time this=undefined

const calcAge=function(birthYear){
    console.log(2022-birthYear);
    //查看此函数中的this
    console.log(this);
}
calcAge(2001)

The result is as follows:

QQ图片20220710143425.png

像这样常规的调用某个函数，只是简单的调用某个函数，并没有将这个函数添加到任何对象上面；可以这样说这个this没有主人，就是this指的就是window 。但是在严格模式下全局对象无法进行默认绑定，所以导致this只能绑定在undefined上。这就是this的默认绑定规则：

this所处的词法作用域在哪里生效this就绑定在哪里。
在严格模式下，全局对象无法进行默认绑定，所以导致this只能绑定在undefined上

四种方式---3.调用函数的第三种方法是:调用箭头函数

箭头函数没有自己的this关键字

Example:

//3.箭头函数的调用
const calcAge= birthYear => {
    console.log(2022-birthYear);
    //查看此函数中的this
    console.log(this);
}
calcAge()

执行结果：

QQ图片20220710143752.png 因为箭头函数没有this，所以在箭头函数里面的this是它外层作用域里面的非箭头函数的this,而本例中外层作用域是window,所以这里的this指的是window

四种方式---4.调用函数的第四种方式：该函数被调用作为事件监听器

那么此时的this将会指向处理程序函数所附加到的DOM元素

深入理解this指向的是调用该方法的对象

这就意味着this关键字不会简单的指向在我们编写方法的对象上面。

在第一种函数调用的方式中，因为bruce是调用calaAge()方法的对象，所以此时this是bruce; 那么现在创建一个新对象：

const lucy={
   birthYear:2006,
}

我们都知道函数只是一个值，所以我们可以这样：

const lucy={
    birthYear:2006,
}
lucy.calcAge=bruce.calcAge
console.log(lucy);

结果：

QQ图片20220710134346.png

现在lucy里面也有了一个calcAge()方法，我们再来执行lucy.calcAge()

const lucy={
    birthYear:2006,
}
lucy.calcAge=bruce.calcAge
console.log(lucy);
lucy.calcAge()

结果为：

QQ图片20220710134720.png 这就说明lucy对象调用calcAge()方法时，此时函数calcAge()方法里面的this指向的是lucy, 即调用该方法的对象。所以this关键字如上面所说，它不是静态的，而是取决于函数的调用方式。

现在我们来定义一个常量y,并将bruce.calcAge()函数赋给它

const y=bruce.calcAge
y()

结果为：

QQ图片20220710140300.png 那么此时y()只是作为一个普通函数来进行调用，this是window

小结

this关键字是一个让许多初学者感到困惑的东西，但是总的来说:

1.如果函数是以普通函数（非构造函数）的形式调用，this指的永远都是window

2.如果函数是以方法的形式调用，this就是调用方法的那个对象

Explain the 'this' keyword in js in a simple way