JS的this关键字怎么用-js教程-PHP中文网

JS的this关键字怎么用

星降

发布： 2025-08-20 09:14:01

原创

177人浏览过

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 的灵活性与动态性。

JS的this关键字怎么用

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
```
登录后复制
。

阿里云-虚拟数字人
阿里云-虚拟数字人是什么？ ...

2

查看详情
```
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关键字怎么用的详细内容，更多请关注php中文网其它相关文章！