【js】箭头函数和普通函数在this指向的区别

在JavaScript中,箭头函数(Arrow Functions)和普通函数(Function Declarations/Expressions)在this的指向上有显著的不同:

普通函数:

  • 函数定义时this的值在函数被调用时才会确定,它取决于函数是如何被调用的。
  • 独立调用 :如果函数是直接调用的(而不是作为对象的方法),在非严格模式下this指向全局对象(在浏览器中通常是window),在严格模式下thisundefined
  • 作为对象方法调用 :如果函数作为对象的方法被调用,this指向该对象。
  • 构造函数调用 :如果函数前面有new关键字,this指向新创建的对象。
  • callapplybind方法 :可以使用这些方法显式地设置函数调用时this的值。

箭头函数:

  • 没有自己的this :箭头函数不绑定自己的this,它会捕获其所在上下文的this值作为自己的this值。
  • 定义时的上下文this的值在箭头函数创建时就已经确定了,它继承自外围作用域。
  • 不可改变 :由于箭头函数的this是继承来的,所以使用callapplybind方法也不能改变this的值。
  • 不能用作构造函数 :箭头函数没有[[Construct]]方法,因此不能用作构造函数来使用new关键字。

示例比较:

普通函数:
javascript 复制代码
function Person() {
  this.age = 0;
  setInterval(function growUp() {
    // 在非严格模式下,这里的`this`指向全局对象,而不是Person实例
    this.age++;
  }, 1000);
}
var p = new Person();
箭头函数:
javascript 复制代码
function Person() {
  this.age = 0;
  setInterval(() => {
    // 这里的`this`正确地指向Person实例
    this.age++;
  }, 1000);
}
var p = new Person();

在第一个例子中,growUp函数是一个普通函数,在setInterval回调中它的this不会指向Person实例,而是指向全局对象或undefined(取决于是否为严格模式)。在第二个例子中,箭头函数在Person的上下文中创建,所以它的this指向Person实例。

因此,箭头函数在处理this时提供了更简洁和可预测的行为,特别是在事件处理和回调函数中,它们避免了this指向错误的问题。然而,这也意味着箭头函数不能用作对象方法,特别是那些需要有自己的this上下文的方法。

当函数作为对象的方法被调用时,this关键字通常指向调用该方法的对象。以下是一些具体情况:

普通函数作为对象方法:

javascript 复制代码
const obj = {
  myMethod: function() {
    // 这里的`this`指向`obj`对象
    console.log(this);
  }
};
obj.myMethod(); // 输出:obj

在上面的例子中,当myMethod被调用时,this指向obj对象。

箭头函数作为对象方法:

javascript 复制代码
const obj = {
  myMethod: () => {
    // 这里的`this`不会指向`obj`对象
    // 而是继承自外围作用域的`this`
    console.log(this);
  }
};
obj.myMethod(); // 输出:Window(或全局对象,取决于调用环境)

在这个例子中,箭头函数myMethod中的this不会指向obj对象,而是继承了它定义时的外围作用域的this值。如果在全局作用域中定义箭头函数,那么this通常指向全局对象(在浏览器中通常是Window)。

注意事项:

  • 如果在严格模式下执行代码,普通函数中的this如果是独立调用的(不是作为对象的方法),则this会是undefined,而不是全局对象。
  • 如果使用了callapplybind方法来调用函数,this的值将被显式设置,无论函数是普通函数还是箭头函数(尽管对箭头函数来说,bind不会起作用,因为箭头函数的this不能被改变)。

因此,当函数作为对象的方法调用时,普通函数的this指向调用它的对象,而箭头函数的this指向它定义时的外围作用域的this值。

相关推荐
安之若素^9 分钟前
启用不安全的HTTP方法
java·开发语言
一个天蝎座 白勺 程序猿26 分钟前
Python(28)Python循环语句指南:从语法糖到CPython字节码的底层探秘
开发语言·python
持梦远方1 小时前
C 语言基础入门:基本数据类型与运算符详解
c语言·开发语言·c++
abigale031 小时前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
zzywxc7871 小时前
AI 正在深度重构软件开发的底层逻辑和全生命周期,从技术演进、流程重构和未来趋势三个维度进行系统性分析
java·大数据·开发语言·人工智能·spring
专注API从业者1 小时前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile1 小时前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_416639971 小时前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊1 小时前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge
灵性花火1 小时前
Qt的前端和后端过于耦合(0/7)
开发语言·前端·qt