在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

lydiahallie/javascript-questions

菜单

函数与 this 上下文

相关源文件

本页提供了JavaScript函数和this关键字的技术解释，探讨了它们在不同上下文中的行为。这些概念是JavaScript的基础，并且在技术面试中经常被考察。

JavaScript函数简介

JavaScript函数是第一类对象，可以被赋值给变量、作为参数传递、从其他函数返回，并且拥有属性和方法。这赋予了JavaScript强大的函数式编程能力。

来源： README.md57-64 README.md356-393 README.md1039-1062

函数类型

函数声明与函数表达式

函数声明会被完全提升，而函数表达式则像变量一样被提升（只提升声明，不提升定义）。

箭头函数

ES6引入了箭头函数，它与常规函数有显著差异，尤其是在处理this上下文方面。

来源： README.md118-146

仓库中的第3题说明了这一关键区别

在这个例子中，diameter()是一个常规函数，其中this指向shape对象。但perimeter()是一个箭头函数，其中this继承自其周围的词法上下文（可能是window/全局），导致this.radius为undefined。

立即执行函数表达式 (IIFE)

IIFE在定义时立即执行，创建了一个私有作用域

来源： README.md1039-1062

构造函数

构造函数与new关键字一起使用来创建对象实例

来源： README.md398-445 README.md1607-1627

this 关键字

this关键字是JavaScript中最强大但也最令人困惑的特性之一。它的值会根据函数的调用方式而变化。

来源： README.md118-146 README.md1007-1033

全局上下文

在全局上下文或在全局上下文中调用的函数内部，this指向全局对象

对象方法上下文

当函数作为对象的方法被调用时，this指向该对象

来源： README.md118-146

构造函数上下文

当函数与new关键字一起作为构造函数使用时，this指向新创建的实例

来源： README.md398-445

箭头函数上下文

箭头函数没有自己的this绑定。相反，它们从封闭的词法上下文继承this。

仓库中的第3题清晰地阐述了这一概念，其中作为对象方法使用的箭头函数无法通过this访问对象的属性。

来源： README.md118-146

控制this的方法

JavaScript提供了三种明确控制this指向的方法：call()、apply()和bind()。

来源： README.md1007-1033

第33题展示了call()和bind()的区别

这里，call()立即执行函数，并将person作为this；而bind()则返回一个新函数，其this永久绑定到person。

常见陷阱

失去this上下文

当你从对象中提取一个方法并独立调用它时，它会失去其上下文

没有new的构造函数

如果你在调用构造函数时忘记使用new关键字，this将指向全局对象而不是新的实例。

这在仓库的第12题中有所体现。

来源： README.md398-445

静态方法与实例方法

静态方法属于类/构造函数本身，而实例方法属于原型，并可用于实例。

第11题清晰地展示了这种区别。

来源： README.md356-393 README.md398-445 README.md1007-1033 README.md1039-1062

最佳实践

  1. 使用箭头函数：当你想保留词法this上下文时。
  2. 使用方法简写语法：对于对象方法，使用{ method() {} }而不是{ method: function() {} }。
  3. 使用bind()：当将方法作为回调函数传递时，以保持正确的this上下文。
  4. 谨慎使用构造函数：并始终使用new关键字。
  5. 考虑使用类语法：以获得更清晰的构造函数和原型定义。

表格：函数类型与this行为

函数类型this绑定提升 (Hoisting)示例
函数声明动态完整版function name() {}
函数表达式动态可变const name = function() {}
箭头函数词法（继承）可变const name = () => {}
方法定义对象无object = { method() {} }
构造函数新实例完整版function Name() {}
IIFE动态无(function() {})()

来源： README.md118-146 README.md356-393 README.md398-445 README.md1007-1033 README.md1039-1062

总结

JavaScript函数是多功能的、第一类对象，具有各种形式。this关键字在常规函数中是动态作用域的，但在箭头函数中是词法作用域的。理解this在不同上下文中的行为对于JavaScript开发者至关重要，并且是技术面试中常见的问题领域。

有关对象原型和继承的更多信息，请参阅关于对象和原型的3.3节。