javascript 中的 this 指向由函数调用方式决定，而非定义位置。1. 默认绑定：普通函数调用时，this 指向全局对象（浏览器中为 window），严格模式下为 undefined；2. 隐式绑定：作为对象方法调用时，this 指向调用该方法的对象，但方法被提取后单独调用会丢失绑定，退回到默认绑定；3. 显式绑定：通过 call、apply 或 bind 方法可显式指定 this 指向；4. new 绑定：使用 new 调用构造函数时，this 指向新创建的实例对象；5. 箭头函数的词法绑定：箭头函数没有自己的 this，其 this 由外层作用域决定，调用方式不影响其指向，从而简化了 this 的管理，尤其在回调函数中避免了上下文丢失问题。理解 this 的核心在于分析函数调用时的执行上下文，掌握这五种绑定规则是解决 this 相关问题的关键，最终 this 的值在运行时根据调用位置动态确定，这一机制体现了 javascript 的灵活性与动态性。
JavaScript 中的
this
关键字，它指向的不是函数定义的位置，而是函数被调用时的“执行上下文”。简单来说，
this
的值在运行时动态确定，完全取决于函数是如何被调用的。理解它，是掌握 JS 核心的关键一步。
要真正掌握
this
，我们需要深入理解它在不同调用模式下的绑定规则。这就像是
this
有一套自己的“行为准则”。
默认绑定 (Default Binding): 当函数作为普通函数独立调用时，
this
通常指向全局对象（在浏览器中是
window
，在 Node.js 中是
global
）。但如果处于严格模式 (
'use strict'
) 下，
this
会是
undefined
。这是最容易让人困惑的地方，因为你可能觉得它应该指向某个特定的东西，结果却指向了全局。
function showThis() { console.log(this);}showThis(); // 在浏览器中输出 Window 对象，在严格模式下输出 undefined'use strict';function strictShowThis() { console.log(this);}strictShowThis(); // 输出 undefined
隐式绑定 (Implicit Binding): 当函数作为对象的一个方法被调用时，
this
会指向调用该方法的对象。这是我们最常用也最符合直觉的场景。
const person = { name: '张三', greet: function() { console.log(`你好，我是 ${this.name}`); }};person.greet(); // 输出：你好，我是 张三 (this 指向 person 对象)
但要注意，如果这个方法被“提取”出来单独调用，隐式绑定就会失效，转而使用默认绑定。
const anotherGreet = person.greet;anotherGreet(); // 输出：你好，我是 undefined (或在浏览器中是 "你好，我是 Window")
显式绑定 (Explicit Binding): 通过
call()
,
apply()
, 或
bind()
方法，你可以强制指定
this
的值。这给了我们极大的灵活性去控制函数的执行上下文。
function introduce(age, city) { console.log(`我是 ${this.name}，${age} 岁，来自 ${city}`);}const person2 = { name: '李四' };introduce.call(person2, 30, '北京'); // 输出：我是 李四，30 岁，来自 北京introduce.apply(person2, [25, '上海']); // 输出：我是 李四，25 岁，来自 上海const boundIntroduce = introduce.bind(person2, 40);boundIntroduce('广州'); // 输出：我是 李四，40 岁，来自 广州
new 绑定 (New Binding): 当使用
new
关键字调用一个构造函数时，会创建一个新的对象，并将这个新对象绑定到构造函数中的
this
。
function Car(make, model) { this.make = make; this.model = model; console.log(this); // 这里的 this 就是新创建的 Car 实例}const myCar = new Car('Honda', 'CRV'); // 输出 Car { make: 'Honda', model: 'CRV' }
箭头函数 (Arrow Functions) 的词法绑定: 箭头函数没有自己的
this
绑定。它的
this
值是在其定义时，由外层（词法）作用域的
this
决定的。它不会受函数调用方式的影响。这让它在处理回调函数时特别方便。
const user = { name: '王五', logName: function() { // 这里的 this 指向 user 对象 setTimeout(function() { console.log(this.name); // 这里的 this 指向全局对象 (或 undefined) }, 100); }, logNameArrow: function() { // 这里的 this 指向 user 对象 setTimeout(() => { console.log(this.name); // 这里的 this 依然指向 user 对象 }, 100); }};user.logName(); // 输出 undefined (或 Window)user.logNameArrow(); // 输出 王五
为什么JavaScript的this行为如此多变且难以捉摸？
在我看来，
this
行为多变的核心原因在于 JavaScript 的设计哲学：它是一种非常灵活的语言，函数是“一等公民”，可以被当作值传递，也可以作为对象的方法调用。这种灵活性导致了
this
的值必须在运行时根据“函数是如何被调用”来动态决定，而不是像一些静态语言那样在编译时就确定。这无疑增加了学习曲线，但一旦理解了其背后的绑定规则，你就会发现这种动态性其实非常强大。
我们常常会遇到这样的情况：一个函数在某个上下文中工作得好好的，但当它作为回调函数被传递出去后，
this
突然就“跑偏”了。这正是因为调用上下文变了。比如，在事件监听器中，回调函数里的
this
默认会指向触发事件的 DOM 元素，而不是你期望的某个组件实例。这种切换，正是
this
动态绑定的体现。
理解这些规则，尤其是“调用位置决定
this
”这个核心思想，是解开
this
谜团的钥匙。当你调试
this
问题时，第一步永远是去观察函数被调用的那一刻，它前面有没有点 (
.
)，有没有
new
，有没有
call
/
apply
/
bind
，或者它是不是一个箭头函数。这就像是侦探破案，找到“案发现场”才能找到真相。
箭头函数如何简化this的管理？
箭头函数是 ES6 引入的一个非常棒的特性，它在
this
的处理上与传统函数有着本质的区别。正如前面提到的，箭头函数没有自己的
this
绑定，它会捕获其定义时所处的“词法作用域”的
this
值。这意味着，无论箭头函数如何被调用，它的
this
都会保持不变，始终指向其外层非箭头函数的
this
。
这在处理回调函数，尤其是异步操作的回调时，简直是“救星”。在 ES6 之前，我们为了在
setTimeout
或事件处理函数中保持
this
的指向，不得不使用
var self = this;
这样的模式，或者使用
bind
方法。比如：
// ES5 时代常见的 this 陷阱与解决方案function Timer() { this.seconds = 0; // var self = this; // 方案一：保存 this setInterval(function() { // console.log(self.seconds++); // 使用保存的 self // 或者 // console.log(this.seconds++); // 这里的 this 指向 window/undefined }.bind(this),
以上就是JS的this关键字怎么用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1516448.html
微信扫一扫 
支付宝扫一扫 
