【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值。

相关推荐
爱吃烤鸡翅的酸菜鱼6 分钟前
IDEA高效开发:Database Navigator插件安装与核心使用指南
java·开发语言·数据库·编辑器·intellij-idea·database
然我15 分钟前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子20 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹24 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器30 分钟前
指定阿里镜像原理
前端
枷锁—sha35 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha36 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
心情好的小球藻44 分钟前
Python应用进阶DAY9--类型注解Type Hinting
开发语言·python
群联云防护小杜1 小时前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
惜.己1 小时前
使用python读取json数据,简单的处理成元组数组
开发语言·python·测试工具·json