深入理解 JavaScript 中的 this 关键字

在 JavaScript 中，this 指向调用该函数的对象，其值是在运行时根据函数的调用方式动态确定的。

• this 动态地指向调用的对象，而不是函数定义的位置。
• 它通常用于访问对象的属性和方法。
• 它能够让我们编写出灵活、可复用且具有上下文感知能力的代码。

const person = {
    name: "GeeksforGeeks",
    greet() {
        return `Welcome To, ${this.name}`;
    }
};
console.log(person.greet());

this 在 JavaScript 中的应用

JavaScript 中的 this 关键字动态地指向执行当前函数的对象。它的值取决于函数被调用的方式和位置，而不是函数被书写的位置。

在方法中使用 this

在对象的方法中，this 关键字指向该对象本身。这使得方法可以在其作用域内访问、交互并修改对象的属性和行为。

• 指向拥有该方法的对象。
• 用于访问和操作对象的属性。
• 实现与对象内部状态的交互。

const person = {
    name: ‘John‘,
    age: 30,
    greet() {
        console.log(‘Hello, my name is ‘ +
            this.name + ‘ and I am ‘
            + this.age +
            ‘ years old.‘);
    }
};

person.greet();

在函数中使用 this

在普通的 JavaScript 函数中，this 关键字的行为取决于函数是如何被调用的。

语法：

function exampleFunction() {  console.log(this); // 指向当前的执行上下文}

function greet() {
    console.log(‘Hello, my name is ‘ + this.name);
}

const person = {
    name: ‘Amit‘,
    sayHello: greet
};
const anotherPerson = {
    name: ‘Jatin‘
};

//Driver Code Starts
greet(); 
person.sayHello(); 
greet.call(anotherPerson); 
//Driver Code Ends

单独使用 this（全局上下文）

当我们在 JavaScript 中单独使用 this，即不在任何特定的上下文中时，它的行为取决于代码是否在严格模式下运行。

console.log(this);

隐式绑定

当我们作为一个对象的方法来调用函数时，this 关键字会指向那个调用它的对象。

const person = {
    name: "Ram",
    age: 22,
    greet: function () {
        return `Hello ${this.name}, you are ${this.age} years old`
    }
}
console.log(person.greet());

在这里，INLINECODEb8a111da 关键字指的是 INLINECODE54dfb493 对象，因此它可以访问 INLINECODEa23dc2cb 和 INLINECODE9993bc28 属性的值。

显式绑定

当我们使用 INLINECODEc1fff075、INLINECODE29c3a55e 或 INLINECODE9a2f112d 方法显式绑定 INLINECODEd7260a33 关键字时，this 的默认引用会被更改为通过上述方法指定的对象。

//Driver Code Starts
function ageVerify() {
    if (this.age > 18) {
        console.log("Yes you can drive");
    } else {
        console.log("No you cannot drive");
    }
}

const per1 = { age: 21 };
const per2 = { age: 16 };
//Driver Code Ends

ageVerify.call(per1);
ageVerify.call(per2);

默认绑定

当 INLINECODE63b91a89 关键字在全局作用域中使用时，它会被设置为全局对象（在浏览器中通常是 INLINECODE41a6c3e4 对象）。

const age = 22;
function verifyAge (){
    return this.age;
}
console.log(verifyAge());

箭头函数绑定

当我们在箭头函数中使用 INLINECODEa130604b 时，它会具有词法作用域。这意味着如果没有常规函数关键字，INLINECODEde6179fe 将无法像我们预期的那样指向外部作用域中的对象（它会继承外层 this 的值）。

const person = {
    name: "ram",
    age: 22,
    greet : () =>{
        return `Hello , you are ${this.age} years old`
    }
}
console.log(person.greet());

使用 this 关键字后的返回情况

• 在对象方法中，this 指向对象本身；而在事件处理程序中，它指向触发该事件的元素。
• 当单独使用或在常规函数内部使用时，this 通常指向全局对象。
• 在严格模式下，函数内部的 INLINECODE5efc9837 会变为 INLINECODEa1dff254。
• 我们可以使用 INLINECODEa8751a9c、INLINECODE1b981a9e 或 INLINECODEd1c7f3fb 显式地更改 INLINECODE5f39961a 的值。

this 关键字的优先级顺序

JavaScript 中 INLINECODEddef1ba4 关键字的优先级遵循一个清晰的顺序：INLINECODE4fe9b05c 拥有最高优先级，其次是 INLINECODEd98ca620 和 INLINECODEd1f914b8，然后是对象方法调用，最后是全局作用域。

• JavaScript INLINECODE8cc2980e 方法：INLINECODEe4829f07 方法创建一个新函数，在调用时将其 this 关键字设置为提供的值。