彻底搞懂this关键字：从面试陷阱到实战高手-优快云博客

彻底搞懂this关键字：从面试陷阱到实战高手

【免费下载链接】javascript-questions lydiahallie/javascript-questions: 是一个JavaScript编程面试题的集合。适合用于准备JavaScript面试的开发者。特点是可以提供丰富的面试题，涵盖JavaScript的核心概念和高级特性，帮助开发者检验和提升自己的JavaScript技能。项目地址: https://gitcode.com/GitHub_Trending/ja/javascript-questions

你是否在JavaScript面试中被this关键字的问题难倒？是否在实际开发中因this指向错误而调试半天？本文将带你系统掌握this的所有场景，结合zh-CN/README-zh_CN.md中的经典面试题，让你从困惑到精通，轻松应对面试与工作中的this难题。

this关键字到底是什么？

this关键字（上下文对象）是JavaScript中最强大也最容易出错的特性之一。它的值取决于函数的调用方式，而非定义位置。理解this的关键在于记住：谁调用函数，this就指向谁。

实战场景一：对象方法中的this

const shape = {
  radius: 10,
  diameter() {
    return this.radius * 2; // this指向shape对象
  },
  perimeter: () => 2 * Math.PI * this.radius // this指向全局对象
};

console.log(shape.diameter()); // 20
console.log(shape.perimeter()); // NaN

代码来源：zh-CN/README-zh_CN.md第3题

关键点：

普通函数作为对象方法调用时，this指向该对象
箭头函数没有自己的this，它继承自外层作用域
因此perimeter()中的this指向全局对象，导致无法访问radius属性

实战场景二：构造函数中的this

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

const member = new Person("Lydia", "Hallie");
console.log(member.firstName); // Lydia

代码来源：zh-CN/README-zh_CN.md第11题

关键点：

使用new关键字调用函数时，会创建一个新对象
this指向这个新创建的对象
如果忘记使用new，this将指向全局对象（非严格模式）

实战场景三：改变this指向的三种方法

call()方法

const person = { name: 'Lydia' };

function sayHi(age) {
  console.log(`${this.name} is ${age}`);
}

sayHi.call(person, 21); // Lydia is 21

apply()方法

sayHi.apply(person, [21]); // Lydia is 21

bind()方法

const boundSayHi = sayHi.bind(person, 21);
boundSayHi(); // Lydia is 21

代码来源：zh-CN/README-zh_CN.md第33题

区别：

call()和apply()立即执行函数
bind()返回一个新函数，需要手动调用
call()接收参数列表，apply()接收参数数组

this指向完整流程图

mermaid

常见面试题解析

面试题1：this与箭头函数

const obj = {
  value: 10,
  getValue: function() {
    const inner = () => {
      console.log(this.value);
    };
    inner();
  }
};

obj.getValue(); // 10

解析：箭头函数没有自己的this，继承自外层作用域，此处继承getValue()方法中的this，即obj对象。

面试题2：this与定时器

const obj = {
  value: 10,
  getValue: function() {
    setTimeout(function() {
      console.log(this.value);
    }, 100);
  }
};

obj.getValue(); // undefined

解决方案：

// 方法1：使用bind
setTimeout(function() {
  console.log(this.value);
}.bind(this), 100);

// 方法2：使用箭头函数
setTimeout(() => {
  console.log(this.value);
}, 100);

代码来源：zh-CN/README-zh_CN.md第3题变形

总结与最佳实践

避免在全局作用域中使用this
对象方法使用普通函数，而非箭头函数
回调函数中谨慎使用this，必要时显式绑定
class中所有方法都应该使用普通函数
使用严格模式('use strict')避免意外的全局绑定

通过本文的学习，你已经掌握了this关键字的所有核心用法。更多JavaScript面试题可以参考项目zh-CN/README-zh_CN.md文件，持续练习提升你的JavaScript技能！

点赞收藏本文，关注作者获取更多JavaScript进阶知识！

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考