JS中【普通函数中的this】vs【箭头函数中的this】

2024-09-05 07:28
文章标签 函数 js vs 普通 箭头

本文主要是介绍JS中【普通函数中的this】vs【箭头函数中的this】,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在 JavaScript 中,this 关键字是一个非常重要的概念,它通常指向函数执行时的上下文对象。然而,箭头函数(arrow functions)中的 this 行为与普通函数不同,它的 this 是在函数定义时绑定的,并且无法通过调用方式或其他方式改变。下面将详细解释这一概念。

1. 普通函数中的 this

首先,了解普通函数中的 this 是如何工作的。

1.1 全局上下文中的 this

在全局执行环境(例如在浏览器中,直接在脚本或函数外部定义的函数),this 通常指向全局对象。在浏览器中,this 指向 window 对象。

function normalFunction() {console.log(this);
}normalFunction(); // 在浏览器中,输出 window 对象
1.2 对象方法中的 this

当函数作为对象的方法调用时,this 指向调用该方法的对象。

const obj = {name: 'Alice',greet: function() {console.log(this.name);}
};obj.greet(); // 输出: Alice

在这个例子中,greet 方法中的 this 指向 obj 对象。

1.3 构造函数中的 this

当函数作为构造函数使用时(通过 new 关键字调用),this 指向新创建的实例对象。

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

在构造函数 Person 中,this 指向新创建的对象 person1

2. 箭头函数中的 this

与普通函数不同,箭头函数不会创建自己的 this 上下文。相反,箭头函数中的 this 是在定义时根据其外部词法环境绑定的,并且不会再改变。这种行为被称为“词法绑定”或“词法作用域中的 this”。

2.1 词法作用域中的 this

词法作用域意味着箭头函数中的 this 是由函数定义时所在的外层作用域决定的,而不是由函数如何调用决定的。

const obj = {name: 'Alice',greet: () => {console.log(this.name);}
};obj.greet(); // 输出: undefined

在上面的代码中,greet 是一个箭头函数。由于箭头函数不创建自己的 this,它继承自定义时的上下文。在这个例子中,greet 函数的 thisobj 定义时所在的外层作用域——全局作用域中的 this(在浏览器中为 window 对象)。而全局对象中并没有 name 属性,因此输出 undefined

2.2 在对象方法中使用箭头函数

因为箭头函数的 this 是在定义时确定的,所以当它们作为对象方法使用时,this 也不会指向对象本身。

const obj = {name: 'Alice',greet: function() {const arrowFunc = () => {console.log(this.name);};arrowFunc();}
};obj.greet(); // 输出: Alice

在这个例子中,arrowFunc 是一个箭头函数,它定义在 greet 方法内部。arrowFuncthis 是在 greet 函数定义时确定的,因此它继承了 greet 方法中的 this,即 obj 对象。所以,这里 arrowFunc 能够正确地访问 obj.name

2.3 在回调函数中使用箭头函数

箭头函数在回调函数中使用非常方便,因为它们避免了 this 丢失的常见问题。

const obj = {name: 'Alice',greet: function() {setTimeout(() => {console.log(this.name);}, 1000);}
};obj.greet(); // 一秒后输出: Alice

在上面的代码中,setTimeout 是在 greet 方法内调用的,回调函数使用了箭头函数。由于箭头函数的 this 是从 greet 方法继承的,因此在 setTimeout 触发后,this 仍然指向 obj 对象,而不是 window 对象。

3. this 的不可改变性

由于箭头函数的 this 是在定义时确定的,因此无法通过常见的方法(如 bindcallapply)来改变箭头函数的 this

const obj1 = {name: 'Alice',
};const obj2 = {name: 'Bob',
};const arrowFunc = () => {console.log(this.name);
};arrowFunc.call(obj1); // 输出: undefined
arrowFunc.apply(obj2); // 输出: undefined

在这个例子中,尽管我们使用了 callapply 方法试图改变 arrowFunc 中的 this,但结果都是 undefined。这是因为 arrowFuncthis 是在定义时就绑定的,并且无法再改变。

4. 注意事项与最佳实践

  • 避免在需要动态 this 的场景中使用箭头函数:由于箭头函数的 this 是固定的,因此在需要动态绑定 this 的场景中(例如事件处理函数、回调函数中)要慎重使用。

  • 使用箭头函数处理回调问题:箭头函数在回调函数中非常有用,尤其是当回调函数嵌套在对象方法中时,能够避免 this 丢失的问题。

  • 在类的方法中慎用箭头函数:在 JavaScript 类的实例方法中使用箭头函数时需要小心,因为这可能导致 this 无法正确绑定到实例对象。

5. 总结

箭头函数中的 this 是在定义时确定的,并且会继承自外层词法作用域,而不是像普通函数那样在调用时确定。这个特性使得箭头函数在某些场景下非常有用,尤其是在处理回调函数时。然而,由于 this 的不可改变性,也需要注意避免在需要动态上下文的场景中使用箭头函数。了解并掌握箭头函数中 this 的行为能够帮助你写出更简洁、更健壮的 JavaScript 代码。

这篇关于JS中【普通函数中的this】vs【箭头函数中的this】的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1138316

相关文章

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

Node.js 数据库 CRUD 项目示例详解(完美解决方案)

《Node.js数据库CRUD项目示例详解(完美解决方案)》:本文主要介绍Node.js数据库CRUD项目示例详解(完美解决方案),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考... 目录项目结构1. 初始化项目2. 配置数据库连接 (config/db.js)3. 创建模型 (models/

shell编程之函数与数组的使用详解

《shell编程之函数与数组的使用详解》:本文主要介绍shell编程之函数与数组的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录shell函数函数的用法俩个数求和系统资源监控并报警函数函数变量的作用范围函数的参数递归函数shell数组获取数组的长度读取某下的

使用Node.js制作图片上传服务的详细教程

《使用Node.js制作图片上传服务的详细教程》在现代Web应用开发中,图片上传是一项常见且重要的功能,借助Node.js强大的生态系统,我们可以轻松搭建高效的图片上传服务,本文将深入探讨如何使用No... 目录准备工作搭建 Express 服务器配置 multer 进行图片上传处理图片上传请求完整代码示例

MySQL高级查询之JOIN、子查询、窗口函数实际案例

《MySQL高级查询之JOIN、子查询、窗口函数实际案例》:本文主要介绍MySQL高级查询之JOIN、子查询、窗口函数实际案例的相关资料,JOIN用于多表关联查询,子查询用于数据筛选和过滤,窗口函... 目录前言1. JOIN(连接查询)1.1 内连接(INNER JOIN)1.2 左连接(LEFT JOI

MySQL中FIND_IN_SET函数与INSTR函数用法解析

《MySQL中FIND_IN_SET函数与INSTR函数用法解析》:本文主要介绍MySQL中FIND_IN_SET函数与INSTR函数用法解析,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一... 目录一、功能定义与语法1、FIND_IN_SET函数2、INSTR函数二、本质区别对比三、实际场景案例分

C++ Sort函数使用场景分析

《C++Sort函数使用场景分析》sort函数是algorithm库下的一个函数,sort函数是不稳定的,即大小相同的元素在排序后相对顺序可能发生改变,如果某些场景需要保持相同元素间的相对顺序,可使... 目录C++ Sort函数详解一、sort函数调用的两种方式二、sort函数使用场景三、sort函数排序

C语言函数递归实际应用举例详解

《C语言函数递归实际应用举例详解》程序调用自身的编程技巧称为递归,递归做为一种算法在程序设计语言中广泛应用,:本文主要介绍C语言函数递归实际应用举例的相关资料,文中通过代码介绍的非常详细,需要的朋... 目录前言一、递归的概念与思想二、递归的限制条件 三、递归的实际应用举例(一)求 n 的阶乘(二)顺序打印

C/C++错误信息处理的常见方法及函数

《C/C++错误信息处理的常见方法及函数》C/C++是两种广泛使用的编程语言,特别是在系统编程、嵌入式开发以及高性能计算领域,:本文主要介绍C/C++错误信息处理的常见方法及函数,文中通过代码介绍... 目录前言1. errno 和 perror()示例:2. strerror()示例:3. perror(

Kotlin 作用域函数apply、let、run、with、also使用指南

《Kotlin作用域函数apply、let、run、with、also使用指南》在Kotlin开发中,作用域函数(ScopeFunctions)是一组能让代码更简洁、更函数式的高阶函数,本文将... 目录一、引言:为什么需要作用域函数?二、作用域函China编程数详解1. apply:对象配置的 “流式构建器”最