JavaScript this

    在本教程中，您将借助示例了解 JavaScript 的 this 关键字。
    在 JavaScript 中，this 关键字是指调用它的对象。

1. 全局作用域中的 this

    当 this 单独使用时，this 指的是全局对象（浏览器中的 window 对象）。例如，

let a = this;
console.log(a);  // Window {}

this.name = 'Sarah';
console.log(window.name); // Sarah

    这里，this.name 与 window.name 相同。

2. 函数中的 this

    当 this 在函数中使用时，this 指的是全局对象（浏览器中的 window 对象）。例如，

function greet() {

    // this inside function
    // this refers to the global object
    console.log(this);
}

greet(); // Window {}

3. 构造函数中的 this

    在 JavaScript 中，构造函数用于创建对象。当函数用作构造函数时，this 指的是在其中使用它的对象。例如，

function Person() {

    this.name = 'Jack';
    console.log(this);

}

let person1 = new Person();
console.log(person1.name);

    输出

Person {name: "Jack"}
Jack

    这里，this 代表 person1 对象。这就是为什么，person1.name 返回 Jack。
    注意：当 this 与 ES6 类一起使用时，它指的是在其中使用它的对象（类似于构造函数）。

4. 对象方法中的 this

    当 this 在对象的方法中使用时，this 指的是它所在的对象。例如，

const person = {
    name : 'Jack',
    age: 25,

    // this inside method
    // this refers to the object itself
    greet() {
        console.log(this);
        console.log(this.name);
    }
}

person.greet();

    输出

{name: "Jack", age: 25, greet: ƒ}
Jack

    在上面的例子中，this 指的是 person 对象。

5. 内部函数中的 this

    当您访问内部函数（在方法内部）中的 this时，this指的是全局对象。例如，

const person = {
    name : 'Jack',
    age: 25,

    // this inside method
    // this refers to the object itself
    greet() {
        console.log(this);        // {name: "Jack", age ...}
        console.log(this.age);  // 25

        // inner function
        function innerFunc() {
        
            // this refers to the global object
            console.log(this);       // Window { ... }
            console.log(this.age);    // undefined
            
        }

        innerFunc();

    }
}

person.greet();

    输出

{name: "Jack", age: 25, greet: ƒ}
25
Window { …}
undefined

    这里，在 innerFunc() 里的 this 代表全局对象，因为 innerFunc() 位于方法内部。
    然而，innerFunc() 外部的 this.age 代表 person 对象。

6. 箭头函数中的 this

    在箭头函数内部，this 指的是父作用域。例如，

const greet = () => {
    console.log(this);
}
greet(); // Window {...}

    箭头函数没有自己的 this。当 this 在箭头函数内部使用时，this 指的是它的父作用域对象。例如，

const greet = {
    name: 'Jack',

    // method
    sayHi () {
        let hi = () => console.log(this.name);
        hi();
    }
}

greet.sayHi(); // Jack

    在这里，hi() 函数内部的 this.name 指的是 greet 对象。
    您还可以使用箭头函数来解决在方法中使用函数时的 undefined 问题（如示例5所示）。例如，

const person = {
    name : 'Jack',
    age: 25,

    // this inside method
    // this refers to the object itself
    greet() {
        console.log(this);
        console.log(this.age);

        // inner function
        let innerFunc = () => {
        
            // this refers to the global object
            console.log(this);
            console.log(this.age);
            
        }

        innerFunc();

    }
}

person.greet();

    输出

{name: "Jack", age: 25, greet: ƒ}
25
{name: "Jack", age: 25, greet: ƒ}
25

    在这里，innerFunc() 是由箭头函数定义的。this 取自其父作用域。因此，this.age 给出 25。
    当箭头函数与 this 一起使用时，它指的是外部作用域。

7. 严格模式函数中的 this

    在具有严格模式的函数中使用 this 时，this 是 undefined。例如，

'use strict';
this.name = 'Jack';
function greet() {

    // this refers to undefined
    console.log(this);
}
greet(); // undefined

    注意：在严格模式的函数内部使用 this 时，可以使用JavaScript Function call()。
    示例，

'use strict';
this.name = 'Jack';

function greet() {
    console.log(this.name);
}

greet.call(this); // Jack

    当你用 call() 函数传递 this 时，greet() 被视为 this 对象（在这种情况下是全局对象）的方法。

    上一教程 ：JS Closure                                          下一教程 ：JS use-strict

参考文档

[1] Parewa Labs Pvt. Ltd. (2022, January 1). Getting Started With JavaScript, from Parewa Labs Pvt. Ltd: https://www.programiz.com/javascript/this