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

相关文章

Android Kotlin 高阶函数详解及其在协程中的应用小结

《AndroidKotlin高阶函数详解及其在协程中的应用小结》高阶函数是Kotlin中的一个重要特性,它能够将函数作为一等公民(First-ClassCitizen),使得代码更加简洁、灵活和可... 目录1. 引言2. 什么是高阶函数?3. 高阶函数的基础用法3.1 传递函数作为参数3.2 Lambda

C++中::SHCreateDirectoryEx函数使用方法

《C++中::SHCreateDirectoryEx函数使用方法》::SHCreateDirectoryEx用于创建多级目录,类似于mkdir-p命令,本文主要介绍了C++中::SHCreateDir... 目录1. 函数原型与依赖项2. 基本使用示例示例 1:创建单层目录示例 2:创建多级目录3. 关键注

C++中函数模板与类模板的简单使用及区别介绍

《C++中函数模板与类模板的简单使用及区别介绍》这篇文章介绍了C++中的模板机制,包括函数模板和类模板的概念、语法和实际应用,函数模板通过类型参数实现泛型操作,而类模板允许创建可处理多种数据类型的类,... 目录一、函数模板定义语法真实示例二、类模板三、关键区别四、注意事项 ‌在C++中,模板是实现泛型编程

kotlin的函数forEach示例详解

《kotlin的函数forEach示例详解》在Kotlin中,forEach是一个高阶函数,用于遍历集合中的每个元素并对其执行指定的操作,它的核心特点是简洁、函数式,适用于需要遍历集合且无需返回值的场... 目录一、基本用法1️⃣ 遍历集合2️⃣ 遍历数组3️⃣ 遍历 Map二、与 for 循环的区别三、高

C语言字符函数和字符串函数示例详解

《C语言字符函数和字符串函数示例详解》本文详细介绍了C语言中字符分类函数、字符转换函数及字符串操作函数的使用方法,并通过示例代码展示了如何实现这些功能,通过这些内容,读者可以深入理解并掌握C语言中的字... 目录一、字符分类函数二、字符转换函数三、strlen的使用和模拟实现3.1strlen函数3.2st

MySQL中COALESCE函数示例详解

《MySQL中COALESCE函数示例详解》COALESCE是一个功能强大且常用的SQL函数,主要用来处理NULL值和实现灵活的值选择策略,能够使查询逻辑更清晰、简洁,:本文主要介绍MySQL中C... 目录语法示例1. 替换 NULL 值2. 用于字段默认值3. 多列优先级4. 结合聚合函数注意事项总结C

Java8需要知道的4个函数式接口简单教程

《Java8需要知道的4个函数式接口简单教程》:本文主要介绍Java8中引入的函数式接口,包括Consumer、Supplier、Predicate和Function,以及它们的用法和特点,文中... 目录什么是函数是接口?Consumer接口定义核心特点注意事项常见用法1.基本用法2.结合andThen链

MySQL 日期时间格式化函数 DATE_FORMAT() 的使用示例详解

《MySQL日期时间格式化函数DATE_FORMAT()的使用示例详解》`DATE_FORMAT()`是MySQL中用于格式化日期时间的函数,本文详细介绍了其语法、格式化字符串的含义以及常见日期... 目录一、DATE_FORMAT()语法二、格式化字符串详解三、常见日期时间格式组合四、业务场景五、总结一、

golang panic 函数用法示例详解

《golangpanic函数用法示例详解》在Go语言中,panic用于触发不可恢复的错误,终止函数执行并逐层向上触发defer,最终若未被recover捕获,程序会崩溃,recover用于在def... 目录1. panic 的作用2. 基本用法3. recover 的使用规则4. 错误处理建议5. 常见错

Node.js net模块的使用示例

《Node.jsnet模块的使用示例》本文主要介绍了Node.jsnet模块的使用示例,net模块支持TCP通信,处理TCP连接和数据传输,具有一定的参考价值,感兴趣的可以了解一下... 目录简介引入 net 模块核心概念TCP (传输控制协议)Socket服务器TCP 服务器创建基本服务器服务器配置选项服