DEV Community
·
我在JavaScript中对`this`的探索：从困惑到清晰
💡
原文英文，约1100词，阅读约需4分钟。
📝
内容提要
在JavaScript中，'this'的值取决于函数的调用方式，主要有四种绑定规则：默认绑定、隐式绑定、显式绑定和new绑定。箭头函数不拥有自己的'this'，而是从外部作用域继承。理解'这'的关键在于识别函数的调用位置，实践有助于掌握其用法。
🎯
关键要点
- 在JavaScript中，'this'的值取决于函数的调用方式。
- JavaScript的'this'是动态的，可以根据函数的调用方式而改变。
- 执行上下文是JavaScript运行代码时创建的环境，主要有三种类型：全局上下文、函数上下文和eval上下文。
- 四种主要的'this'绑定规则：默认绑定、隐式绑定、显式绑定和new绑定。
- 默认绑定：在非严格模式下，'this'指向全局对象；在严格模式下，'this'为undefined。
- 隐式绑定：当函数作为对象的方法调用时，'this'指向该对象。
- 显式绑定：使用call、apply和bind方法手动控制'this'的值。
- new绑定：使用new关键字调用函数时，'this'指向新创建的对象。
- 箭头函数不拥有自己的'this'，而是从外部作用域继承。
- 在回调函数中，'this'可能会丢失，可以使用箭头函数或保存上下文来解决。
- 理解'this'的关键在于识别函数的调用位置，实践有助于掌握其用法。
❓
延伸问答
JavaScript中的'this'是如何确定的？
'this'的值取决于函数的调用方式，主要由调用位置决定。
JavaScript中有哪些主要的'this'绑定规则？
主要有四种绑定规则：默认绑定、隐式绑定、显式绑定和new绑定。
什么是隐式绑定？
隐式绑定是指当函数作为对象的方法调用时，'this'指向该对象。
如何解决回调函数中'this'丢失的问题？
可以使用箭头函数或保存上下文来解决'this'丢失的问题。
箭头函数与普通函数在'this'的处理上有什么不同？
箭头函数不拥有自己的'this'，而是从外部作用域继承'this'。
在严格模式下，默认绑定的'this'是什么？
在严格模式下，默认绑定的'this'为undefined。
➡️
