ES6箭头函数中的this指向

2024-09-02 15:48

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

1箭头函数中的this

  • (1)箭头函数没有this : 这意味着 call() apply() bind() 无法修改箭头函数中的this
  • (2)箭头函数中的this指向 :访问上一个作用域的this
    • 说人话:函数在哪个作用域声明,this就是谁 (本质是通过作用域链访问上一个作用域中的this)
  • (3)箭头函数与function函数this区别
    • function函数 : 谁调用我,我就指向谁,与声明无关
    • 箭头函数 : 谁声明我,我就指向谁 ,与调用无关
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><script>/*ES6箭头函数中的this(1)箭头函数中没有this : 这意味着 call() apply() bind() 无法修改箭头函数中的this(2)箭头函数中的this指向 :访问上一个作用域的this说人话:函数在哪个作用域声明,this就是谁 (本质是通过作用域链访问上一个作用域中的this)*///1.全局函数 : windowlet fn = () => {console.log(this);//window};fn();//windowfn.call({ a: 11 });//window   箭头函数中的this无法修改,因为箭头函数没有this//2.对象方法: window  (因为对象无法开辟作用域,obj所在作用域还是window)//0级链: this指向windowlet obj = {sayHi: () => {console.log('学习使我快乐');//1级链 :  sayHi是一个箭头函数,所以this访问的是上一级作用域(0级链)中的thisconsole.log(this);//window}};obj.sayHi();//window//3.局部函数var person = {play: function () {console.log('play中的this');//1级链 : play是一个function函数,this指向调用这个方法的对象(person)console.log(this);//person//在局部作用域声明一个箭头函数let fn2 = () => {console.log('fn2在一级链中被声明,我的this就是一级链中的this');//2级链 : fn2是一个箭头函数, 所以this访问的是上一级作用域(1级链)中的thisconsole.log(this);//person};fn2();}};person.play();</script>
</body></html>

这篇关于ES6箭头函数中的this指向的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



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

相关文章

全面解析HTML5中Checkbox标签

《全面解析HTML5中Checkbox标签》Checkbox是HTML5中非常重要的表单元素之一,通过合理使用其属性和样式自定义方法,可以为用户提供丰富多样的交互体验,这篇文章给大家介绍HTML5中C... 在html5中,Checkbox(复选框)是一种常用的表单元素,允许用户在一组选项中选择多个项目。本

HTML5 搜索框Search Box详解

《HTML5搜索框SearchBox详解》HTML5的搜索框是一个强大的工具,能够有效提升用户体验,通过结合自动补全功能和适当的样式,可以创建出既美观又实用的搜索界面,这篇文章给大家介绍HTML5... html5 搜索框(Search Box)详解搜索框是一个用于输入查询内容的控件,通常用于网站或应用程

Python中help()和dir()函数的使用

《Python中help()和dir()函数的使用》我们经常需要查看某个对象(如模块、类、函数等)的属性和方法,Python提供了两个内置函数help()和dir(),它们可以帮助我们快速了解代... 目录1. 引言2. help() 函数2.1 作用2.2 使用方法2.3 示例(1) 查看内置函数的帮助(

C++ 函数 strftime 和时间格式示例详解

《C++函数strftime和时间格式示例详解》strftime是C/C++标准库中用于格式化日期和时间的函数,定义在ctime头文件中,它将tm结构体中的时间信息转换为指定格式的字符串,是处理... 目录C++ 函数 strftipythonme 详解一、函数原型二、功能描述三、格式字符串说明四、返回值五

CSS3中的字体及相关属性详解

《CSS3中的字体及相关属性详解》:本文主要介绍了CSS3中的字体及相关属性,详细内容请阅读本文,希望能对你有所帮助... 字体网页字体的三个来源:用户机器上安装的字体,放心使用。保存在第三方网站上的字体,例如Typekit和Google,可以link标签链接到你的页面上。保存在你自己Web服务器上的字

html 滚动条滚动过快会留下边框线的解决方案

《html滚动条滚动过快会留下边框线的解决方案》:本文主要介绍了html滚动条滚动过快会留下边框线的解决方案,解决方法很简单,详细内容请阅读本文,希望能对你有所帮助... 滚动条滚动过快时,会留下边框线但其实大部分时候是这样的,没有多出边框线的滚动条滚动过快时留下边框线的问题通常与滚动条样式和滚动行

Python中bisect_left 函数实现高效插入与有序列表管理

《Python中bisect_left函数实现高效插入与有序列表管理》Python的bisect_left函数通过二分查找高效定位有序列表插入位置,与bisect_right的区别在于处理重复元素时... 目录一、bisect_left 基本介绍1.1 函数定义1.2 核心功能二、bisect_left 与

java中BigDecimal里面的subtract函数介绍及实现方法

《java中BigDecimal里面的subtract函数介绍及实现方法》在Java中实现减法操作需要根据数据类型选择不同方法,主要分为数值型减法和字符串减法两种场景,本文给大家介绍java中BigD... 目录Java中BigDecimal里面的subtract函数的意思?一、数值型减法(高精度计算)1.

使用vscode搭建pywebview集成vue项目实践

《使用vscode搭建pywebview集成vue项目实践》:本文主要介绍使用vscode搭建pywebview集成vue项目实践,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录环境准备项目源码下载项目说明调试与生成可执行文件核心代码说明总结本节我们使用pythonpywebv

C++/类与对象/默认成员函数@构造函数的用法

《C++/类与对象/默认成员函数@构造函数的用法》:本文主要介绍C++/类与对象/默认成员函数@构造函数的用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录名词概念默认成员函数构造函数概念函数特征显示构造函数隐式构造函数总结名词概念默认构造函数:不用传参就可以