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

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

this的指向规则 📌

1. 默认绑定：独立函数调用时，this指向全局对象（在非严格模式下）或undefined（在严格模式下）。

   function foo() {console.log(this); // 非严格模式：window 或 global；严格模式：undefined
   }
   foo();
   

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

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

3. 显式绑定：通过call、apply或bind方法可以明确地设置函数执行时的this指向。

   function foo() {console.log(this);
   }
   var obj = {};
   foo.call(obj); // this指向obj
   

4. new绑定：使用new关键字调用构造函数时，this指向新创建的对象。

   function Foo() {this.bar = 'bar';
   }
   var baz = new Foo();
   console.log(baz.bar); // 输出 'bar'
   

改变this指向的方法 🔄

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

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

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

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

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

   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}
   

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

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

总结 📝

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

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