JavaScript中this的指向和改变this指向的方法 - 2024最新版前端秋招面试短期突击面试题【100道】

JavaScript中this的指向和改变this指向的方法 - 2024最新版前端秋招面试短期突击面试题【100道】 🔍

在JavaScript中，this关键字是一个非常重要的概念，它指向函数执行时的上下文对象。理解this的指向规则和改变this指向的方法，将帮助你更好地编写 JavaScript 代码。以下是关于this的详细讲解。

this的指向规则 📌

默认绑定 ：独立函数调用时，this指向全局对象（在非严格模式下）或undefined（在严格模式下）。
javascript 复制代码
```
function foo() {
    console.log(this); // 非严格模式：window 或 global；严格模式：undefined
}
foo();
```

隐式绑定 ：当函数作为对象的方法被调用时，this指向该对象。

javascript 复制代码

var obj = {
    method: function() {
        console.log(this); // 指向obj对象
    }
};
obj.method();

显式绑定 ：通过call、apply或bind方法可以明确地设置函数执行时的this指向。
javascript 复制代码
```
function foo() {
    console.log(this);
}
var obj = {};
foo.call(obj); // this指向obj
```
new绑定 ：使用new关键字调用构造函数时，this指向新创建的对象。
javascript 复制代码
```
function Foo() {
    this.bar = 'bar';
}
var baz = new Foo();
console.log(baz.bar); // 输出 'bar'
```

改变this指向的方法 🔄

call方法 ：调用一个函数并指定this的值和参数。

javascript 复制代码

function foo(a, b) {
    console.log(this, a, b);
}
foo.call({x: 1}, 'arg1', 'arg2'); // this指向{x: 1}，参数为'arg1'和'arg2'

apply方法 ：与call类似，但参数以数组的形式传递。

javascript 复制代码

function foo(a, b) {
    console.log(this, a, b);
}
foo.apply({x: 1}, ['arg1', 'arg2']); // this指向{x: 1}，参数为数组['arg1', 'arg2']

bind方法 ：创建一个新的函数，并预设this的值，但不立即调用。

javascript 复制代码

function foo(a, b) {
    console.log(this, a, b);
}
var bar = foo.bind({x: 1}); // 创建新函数bar，预设this为{x: 1}
bar('arg1', 'arg2'); // 调用bar时，this指向{x: 1}

箭头函数 ：箭头函数不绑定自己的this，它捕获其所在上下文的this值。

javascript 复制代码

var obj = {
    method: function() {
        setTimeout(() => {
            console.log(this); // this指向obj对象
        }, 1000);
    }
};
obj.method();

总结 📝

了解this的工作原理是掌握JavaScript的关键之一，特别是在编写复杂的应用程序时。正确使用this可以避免许多常见的问题和错误。在实际开发中，合理选择不同的绑定方法，可以让你的代码更加灵活和易于维护。

掌握这些this的知识点将帮助你在前端面试中脱颖而出！祝你顺利上岸！