首页 > 网络编程 > JavaScript > javascript技巧 > JavaScript this场景使用

JavaScript this的多种场景使用

2025-09-05 08:55:29 作者：啦工作呢

this是JavaScript语言的一个关键字,代表函数运行时自动生成的内部对象,仅能在函数内部使用, 下面就来介绍一下JavaScript this的多种场景使用,感兴趣的可以了解一下

什么是 this

this 是 JavaScript 语言的一个关键字，代表函数运行时自动生成的内部对象，仅能在函数内部使用。其值会随函数使用场合不同而变化，但核心原则是：this 指向调用函数的那个对象。

this 的多种指向场景

1. 全局范围内的 this

在全局作用域中，this 指向全局对象（浏览器环境中为 window）：

var name = 'name1';
console.log(name);               // "name1"
this.name = 'name2';
console.log(name);               // "name2"
console.log(this.name);          // "name2"
window.name = 'name3';
console.log(name);               // "name3"
console.log(this.name);          // "name3"
console.log(window.name);        // "name3"

2. 纯粹的函数调用

函数在全局范围内调用时，this 指向全局对象：

// 案例1
function test() {
  this.x = 1;
  alert(this.x);  // 1
}
test();
 
// 案例2
var x = 1;
function test() {
  alert(this.x);  // 1
}
test();
 
// 案例3
var x = 1;
function test() {
  this.x = 0;
}
test();
alert(x);  // 0

3. 事件处理中的 this

在事件处理函数中，this 指向触发事件的元素：

var btn = document.getElementById("btn");
btn.onclick = function() {
  this.value = "按钮";  // this 指向 btn 元素
}

4. HTML 结构中的 this

在 HTML 标签的事件属性中，this 指向绑定事件的元素本身：

<button onclick="fun(this)">点击</button>
<script>
function fun(_this) {
  console.log(_this);  // 输出当前点击的 button 元素
}
</script>

5. 对象方法中的 this

对象字面量中的方法，this 指向该对象本身：

var obj = {
  name: 'jack',
  say: function() {
    console.log('obj中的this', this.name);  // this 指向 obj
  }
}
obj.say();  // "obj中的this jack"

6. 定时器中的 this

定时器（setTimeout/setInterval）中的回调函数，this 默认指向 window：

// 问题示例
box1.onclick = function() {
  var num = 0;
  setInterval(function() {
    num++;
    this.innerHTML = str.substring(0, num);  // this 指向 window，无法正常工作
  }, 100);
}
 
// 解决方案一：使用变量保存 this
box1.onclick = function() {
  var _this = this;  // 保存当前 this 指向
  var num = 0;
  setInterval(function() {
    num++;
    _this.innerHTML = str.substring(0, num);  // 使用保存的 this
  }, 100);
}
 
// 解决方案二：使用箭头函数
box1.onclick = function() {
  var num = 0;
  setInterval(() => {  // 箭头函数继承外部 this
    num++;
    this.innerHTML = str.substring(0, num);  // this 指向 box1
  }, 100);
}

7. 箭头函数中的 this

箭头函数没有自己的 this，它捕获定义时所在上下文的 this 作为自己的 this
任何方法（call ()、apply ()、bind ()）都无法改变箭头函数的 this 指向

var obj = {
  name: "jack",
  say: () => {
    console.log(this.name);  // this 指向全局对象，而非 obj
  }
};

8. call ()、apply ()、bind () 中的 this

这三个方法用于改变函数中 this 的指向，是函数对象的方法。

8.1 call () 方法

语法：fun.call(thisArg, arg1, arg2, ...)

立即调用函数
第一个参数指定 this 指向
后续参数以逗号分隔传递

function fun2(a, b) {
  console.log(a + b);  // 30
  console.log(this);   // 指向 box1 元素
}
 
box1.onclick = function() {
  fun2.call(this, 10, 20);  // 改变 this 指向为当前元素
}

8.2 apply () 方法

语法：fun.apply(thisArg, [argsArray])

与 call () 类似，但参数通过数组传递
立即调用函数

function fun2(a, b) {
  console.log(a + b);  // 30
  console.log(this);   // 指向 box1 元素
}
 
box1.onclick = function() {
  fun2.apply(this, [10, 20]);  // 参数以数组形式传递
}

实用案例：获取数组最大值

var arr = [56, 76, 45, 34, 87, 98];
var max = Math.max.apply(null, arr);  // 98
// 等价于 ES6 的扩展运算符
var max = Math.max(...arr);  // 98

8.3 bind () 方法

语法：fun.bind(thisArg, arg1, arg2, ...)

不会立即调用函数，而是返回一个新函数
新函数中的 this 被永久绑定到 bind () 的第一个参数

function fun() {
  console.log(this);  // 指向 box1 元素
}
 
box1.onclick = function() {
  var newFun = fun.bind(this);  // 绑定 this 指向
  newFun();  // 手动调用新函数
}

call、apply、bind 的区别

调用方式：
- call () 和 apply () 会立即调用函数
- bind () 不会立即调用，而是返回一个新函数
参数传递：
- call () 接收参数列表：func.call(this, arg1, arg2)
- apply () 接收参数数组：func.apply(this, [arg1, arg2])
- bind () 接收参数列表：func.bind(this, arg1, arg2)
this 指向：
- 三者都能改变函数内部 this 指向
- 若第一个参数为 null 或 undefined，this 指向 window（非严格模式）

到此这篇关于JavaScript this的多种场景使用的文章就介绍到这了,更多相关JavaScript this场景使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！