this——面试通关秘籍

前端

2024-01-11 00:29:49

浅析this的奥秘——掌握规律，驾驭面试利器

在面试的舞台上，this 无疑是最闪耀的考点之一。它就像一把双刃剑，掌握得当，便能斩断面试官的刁钻发问；运用不当，则可能失之交臂，与心仪的职位擦肩而过。想要驾驭这把利器，了解其规律必不可少。

规律一：this 指向函数执行上下文

如同舞台上演员的定位，this 指针始终指向函数执行时所在的上下文环境。在 JavaScript 中，有两种常见的执行上下文：

全局上下文：代码运行在全局作用域时，this 指向 window 对象（浏览器环境）或 global 对象（Node.js 环境）。
函数上下文：代码运行在函数作用域时，this 指向函数本身。

规律二：箭头函数的this与父级一致

箭头函数不同于普通函数，其 this 指针始终指向其父级作用域的 this。这一特性使箭头函数在某些场景下非常便捷，如避免函数嵌套时 this 指针的混乱。

规律三：bind()、call() 和 apply() 的影响

bind()、call() 和 apply() 方法可以改变函数的执行上下文，从而修改 this 指针指向的目标。bind() 方法返回一个新的函数，该函数的 this 指针绑定到指定的 this 值；call() 和 apply() 方法立即执行函数，并强制 this 指针指向指定的 this 值。

规律四：事件处理函数中的this

在事件处理函数中，this 指向触发事件的元素。这一特性使我们能够直接操作事件源，如按钮、输入框等。

规律五：构造函数中的this

在构造函数中，this 指向新创建的对象。这一特性是面向对象编程的基础，使我们能够为新对象初始化属性和方法。

实例详解：

让我们通过一个实例来加深对 these 规律的理解：

const obj = {
  name: 'this 指针',
  printName: function() {
    console.log(this.name);
  }
};

// 全局上下文
console.log(this); // window

// 函数上下文
obj.printName(); // this 指针

// 箭头函数
const arrowFunction = () => {
  console.log(this); // window
};

// bind() 改变this 指针
const boundFunction = obj.printName.bind({ name: 'Bound This' });
boundFunction(); // Bound This