JavaScript 的 this 指向

本文被收录到:

JavaScript 教程

JavaScript 是互联网上最流行的编程语言。使用 JavaScript 可以开发网站、APP、小程序、游戏和服务器端。写这个教程是为了提高自己的 JavaScript 编程水平,而最好的学习方法就是“费曼学习法”,以教代学,以输出倒逼输入。最近日渐成熟的 AI 工具,刚好成为我写这个教程锦上添花。

目录

在JavaScript中,this关键字的指向是一个经常引起混淆的概念,因为它会根据函数的调用方式和上下文环境的不同而变化。以下是决定this值的主要规则:

 

全局上下文或非严格模式下的函数:

在全局执行环境中(不在任何函数内),this指向全局对象。在浏览器中,全局对象是window;在Node.js中,是global。

非严格模式下,普通函数调用中的this也指向全局对象。但在严格模式(use strict)下,它会被设置为undefined。

 

函数调用:

  • 当一个函数作为对象的方法被调用时,this指向该方法所属的对象。
const obj = {
  func: function() {
    console.log(this); // 这里的this指向obj
  }
};
obj.func();
  • 如果函数是独立调用或者通过函数引用调用(非对象方法),this在非严格模式下指向全局对象,在严格模式下是undefined。
function standaloneFunc() {
  console.log(this);
}
standaloneFunc(); // 非严格模式下输出window或global,严格模式下输出undefined

 

构造函数: 使用new关键字调用的函数(即构造函数),this指向新创建的实例对象。

function Person(name) {
  this.name = name;
}
const person = new Person('Alice');
console.log(person.name); // 输出"Alice"

箭头函数: 箭头函数不绑定自己的this,它会捕获其所在上下文的this值,并且不可被修改。这意味着箭头函数中的this总是与其定义时所在的作用域保持一致。

const obj = {
  normalFunc: function() {
    setTimeout(function() {
      console.log(this); // 这里的this不再指向obj,而是全局对象或undefined
    }, 100);
  },
  arrowFunc: function() {
    setTimeout(() => {
      console.log(this); // 这里的this仍指向obj,因为箭头函数不绑定自己的this
    }, 100);
  }
};
obj.normalFunc(); // 输出全局对象或undefined
obj.arrowFunc(); // 输出obj

 

.call(), .apply(), 和 .bind()方法: 这些方法可以显式地设置函数调用时this的值。

function greet() {
  console.log(this.name);
}

const person = { name: 'Bob' };
greet.call(person); // 输出"Bob"

理解this的这些规则对于编写JavaScript代码至关重要,尤其是在处理对象和函数时。

声明:本站所有文章和图片,如无特殊说明,均为原创发布。商业转载请联系作者获得授权,非商业转载请注明出处。
真诚赞赏,手留余香
赞赏
搜神记
763 文章
4 教程
8 项目
随机推荐
Web 组件
JavaScript location对象
使用 svg 作为背景图片
Linux apt 命令
JavaScript EventSource 服务器发送事件 Server-Sent Events(SSE)
CSS3 实现 Switch 开关
Wordpress 使用 tag 标签获取文章列表的方法
WordPress 函数 add_option()、get_option() 和 update_option()