来说一下箭头函数的this

已于 2023-09-09 18:32:33 修改
阅读量44 收藏
点赞数
文章标签： javascript js
于 2023-09-09 18:31:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_72653774/article/details/132780605
版权

当面试官文,来说一下箭头函数的this,我猜很多人都会说箭头函数中的this指向于创建他的环境

当在细问时,或者在细说是就没有了

接下来我们来详细说一下关于箭头函数的this为什么指向于创建他的环境

我们来看下面这么一段代码

当我们调用函数Fn()时,会看到输出的是1,那为什么是输出1呢,因为有闭包,所以输出的是1

那么们要在箭头函数中使用this时

他就会基于闭包从外层去寻找this,由于闭包是处于词法作用域,词法作用域是在编译时态的时候确定的

由于我们js没有编译,我们js只有预编译,所以不用等到编译时态就确定了,在预编译的时候就已经确定了this,所以这就是为什么箭头函数的指向取决于创建他的环境

m0_72653774
关注
深入理解Javascript箭头函数中的this
10-20
总的来说，箭头函数是JavaScript中解决`this`指向问题的一种强大工具，它使得代码更简洁，但也要求开发者更加注意`this`的使用场景。在编写JavaScript代码时，理解并正确使用箭头函数对于提高代码质量和可维护性至关...
JavaScript高级-this绑定规则+箭头函数
10-21
总结来说，理解JavaScript中的`this`绑定规则对于编写复杂的JavaScript代码至关重要。正确地处理`this`可以帮助我们编写更加清晰和健壮的代码。同时，箭头函数的出现提供了一种更简洁的函数定义方式，但同时也需要...
ES6中箭头函数的this指向
weixin_43739375的博客
03-16 2830
一直以来对于ES6中箭头函数有些疑虑，其中一项就是this的指向问题，所以不敢放手去使用。因为跟之前我所熟悉掌握的函数内部this的指向是有些地方不同的，但是在箭头函数中this到底指向谁，这块儿模模糊糊的。所以为了搞清楚这个问题，就特意查阅了相关的资料，现总结下来。 在JavaScript语言里面，this的用途很广泛。在这里，对this的含义以及原理就不做解释和说明，因为本文的目的是阐明箭头函...
箭头函数与this指向详解
web$-小白
07-16 3738
箭头函数以及箭头函数中this的指向问题
箭头函数为什么没有this指向
m0_56693499的博客
01-25 676
普通函数即可以被用来创建实例(1)，又可以被调用执行一段指令序列(2)，我们看到一个普通函数也不确定这个函数到底是用来来创建实例还是用来执行一段指令，所以箭头函数设计的初衷就是为了解决函数的二义性（创建实例，执行序列)，为了解决这一问题，ES6引入了Class和箭头函数的概念，Class只能用过new关键字来创建实例，而普通函数只能执行一段指令序列，故箭头函数设计的初衷就是不应被创建实例的，因此它内部不存在this指向。js中一开始函数的设计是有缺陷的，因为一个普通函数可以有两种作用，
箭头函数的this指向
angry_rooster的博客
06-04 7598
箭头函数的this指向 箭头函数 箭头函数为以下形式的函数 const func = (paramList) => { // 函数体 } 按照习惯，将箭头函数作为单独一个函数来使用的情况并不多，往往是当要传入的参数是函数时才使用箭头函数 // 比如 elem.addEventListener("click", () => { // 函数体 }) this在函数中的指向 我们常用函数关键字function来声明一个函数，在一个function()中，this总是指向调用这个函数
基础一：箭头函数和普通函数的this区别
weixin_62305533的博客
03-15 942
1、全局作用域: 在全局作用域中定义的普通函数中， 指向 对象： 2、事件处理函数: 当事件处理函数直接作为 HTML 元素的属性值时， 指向触发事件的元素。但是如果将事件处理函数作为普通函数传递给 时， 将指向 。 3、未使用严格模式的匿名函数: 在未使用严格模式的匿名函数中， 指向 。 4、构造函数中未使用 关键字: 当一个构造函数被调用但没有使用 关键字时， 指向 。 5、定时器函数: 在定时器函数中， 指向 。 在 JavaScript 中，当使用 关键字调用构造函数时
箭头函数没有绑定this
龙旗飘扬的舰队
01-30 1422
箭头函数没有绑定this 不要把【箭头函数】和【箭头函数的定义函数】弄混淆 ecma262规范中明确规定，箭头函数根本没有自身的this绑定 在函数执行前绑定this的时候，传入的thisArgument会被直接忽略 也就是说箭头函数本身没法修改this，所以对this访问永远是它继承外部上下的this按照babel的实现来说，在箭头函数内部没有this引用的时候，默认编译成这样 var f ...
1分钟搞懂箭头函数this指向问题
Mencre的博客
03-23 816
在网上看到很多关于箭头函数this指向的博客和问题解答，但是基本写的都不准确，有的甚至是错误的，在其他博客网站得到的答案基本就是“箭头函数在定义时this指向谁那么之后就一直指向谁”，这句话虽然不错，但是这不还是没说清楚到底是指向了谁嘛。实在看不下去了，今天在这里详细写一写箭头函数的this到底指向谁？ 在这里首先看一看MDN对于箭头函数的介绍： 箭头函数表达式的语法比函数表达式更简洁，并且没有...
vue2知识点：箭头函数和普通函数的this指向问题
刘大猫
06-24 4319
vue2知识点：箭头函数和普通函数的this指向问题
JavaScript--箭头函数对this的影响
Run_youngman的博客
01-23 671
除了之前介绍的call,apply和bind等会对this的指向产生影响，箭头函数也会产生影响。 箭头函数作为bind使用的替代者，不仅仅是让代码更简洁，而且可以改变this的指向，让失去this的方法重新找回和this的绑定。 废话不多说，来看个例子 var obj = { count: 0, cool: function(){ console.log(
【JavaScript】普通函数与箭头函数中的 this 详解
lph159的博客
09-16 1266
this是 JavaScript 中的一个特殊关键字，通常用来引用函数执行时的上下文（context）。这个上下文指的是当前代码执行时，this所指向的对象。不同的执行环境和调用方式会导致this指向不同的对象，因此this具有动态绑定的特点。普通函数和箭头函数在 JavaScript 中的this处理方式有着显著差异。普通函数的this依赖于调用方式，并在不同上下文中表现出不同的绑定行为；而箭头函数则是根据定义时的词法作用域来绑定this。理解这些差异不仅可以帮助你避免常见的this。
关于ES6箭头函数中的this问题
11-26
总结来说，箭头函数改变了`this`的常规行为，使其在定义时就已确定，并且继承自父执行上下文。在使用箭头函数时，开发者需要注意这一点，避免因`this`指向的改变而产生的错误。对于那些依赖于`this`动态绑定的场景，...
JavaScript基础之this和箭头函数详析
10-16
总的来说，理解`this`和箭头函数的工作原理对于编写JavaScript代码至关重要。箭头函数提供了一种更简洁的语法，同时也带来了不同的`this`行为，需要开发者在使用时特别注意。通过深入理解和实践，你可以更好地掌握...
CesiumJS 案例 P12：添加指定长宽的图片图层并居中显示（圆点分别为图片图层的中心点、左上角顶点、右上角顶点、左下角顶点、右下角顶点）
weixin_52173250的博客
10-30 1151
CesiumJS 案例 P12：添加指定长宽的图片图层并居中显示（圆点分别为图片图层的中心点、左上角顶点、右上角顶点、左下角顶点、右下角顶点）
JavaScript 生成二维码
qq_30049249的博客
11-02 214
我试过了，这一款js库支持中英文混合。进入网站后，可以直接点击运行哟～
Vue2+3
最新发布
m0_73557953的博客
11-04 65
创建Vue实例 Vue指令
JavaScript-数组
weixin_64689713的博客
11-04 641
/ 定义一个长度为 4 的数组，但是这 4 项都是 undefined两种定义方法根据实际需求选择即可，两者的底层都是同样的实现逻辑。推荐：方括号定义法！
echarts 遍历多个图表，并添加resize缩放
licongmingli的博客
10-30 242
遍历echarst多个图表，并添加独立的缩放函数
详细说明一下箭头函数
09-18
箭头函数（Arrow Function）是一种简洁的 JavaScript 函数语法，由 ES6 引入，主要用于提升代码的可读性和简洁性。它们相对于传统函数有以下几个特点： 1. **更短的形式**：箭头函数的主体部分可以省略花括号 `{}` 和 `return` 关键字，当函数体只有一条语句时，直接将表达式放在末尾即可。例如： ```javascript // 传统写法 function add(a, b) { return a + b; } // 箭头函数写法 const add = (a, b) => a + b; ``` 2. **this绑定**：箭头函数的 `this` 关键字绑定在其创建时上下文的位置，而不是运行时。这意味着它不会像普通函数那样随作用域改变而变化，这对于处理回调函数时尤其有用。 3. **没有arguments对象**：箭头函数没有自己的 arguments 对象，你可以直接通过参数列表访问所有传入的参数。 4. **不能用作构造函数**：由于 `new` 关键字会隐式地改变 `this` 的指向，所以箭头函数不能用作构造函数来生成新的实例。 5. **无原型链**：当箭头函数被当作对象的方法时，它不会有自己的 prototype 属性，因此无法添加额外的方法到原型链上。 箭头函数常用于需要简化代码、不需要动态 this 或者不想创建新上下文的情况。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值