es6学习 深入学习箭头函数this指向及call原理

最新推荐文章于 2023-01-11 10:53:08 发布
最新推荐文章于 2023-01-11 10:53:08 发布
阅读量458 收藏
点赞数 2
分类专栏： JavaScript 文章标签： es6 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45915554/article/details/120534359
版权

学习箭头函数的过程中遇到了问题 解决之后记录一下
参考资料:阮一峰 es6标准入门

箭头函数

箭头函数是一种写作方式十分简洁高效的函数 但对比其他函数有几点不同,比如箭头函数不能用作构造函数.
这恰恰是因为箭头函数的this指向问题,实际上箭头函数是没有this指针的,所以不能用作构造函数.在调用箭头函数的this时,导致内部的this就是外层代码块的this. (还有一点尤为重要 就是箭头函数的this指向是不可变的)
所以说箭头函数体内的this对象就是定义时所在的对象,而不是使用时所在的对象

验证程序

下面是我在学习过程中用作验证的程序
程序1:
请添加图片描述
①可以看到test为箭头函数 test2为普通函数 其外部代码块都为函数foo
根据上面所说 此时test的this即为foo的this 而因为函数提升 foo的this指向全局 所以直接执行foo函数 test函数打印为全局的变量id=21,而test2函数因为函数提升this也指向全局打印21
②使用call改变foo的this指向 此时test的this指向call传入的{id:0},打印0.test2仍然指向全局打印21.

③写出这个函数之后的思考中 一直想不明白为什么直接执行foo函数的话 test函数不打印0 其实是因为混淆了执行上下文和this对象 foo函数中的var id = 0 对本文理解this 对象没有作用

程序2:
请添加图片描述
当外部代码块为对象foo时,test此时this对象为全局(foo的this)
执行foo.test()和foo.test2时的实际步骤为test.call(foo),test2.call(foo)
但因为箭头函数this指针不允许被改变,所以test打印21,test2打印0

后半部分单独把函数体赋值给test3 和采用立即执行函数 均是为了验证foo.test2()的执行过程.

前端小白 欢迎提问与指正~

frida416
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
call是如何改变this指向的？
丰柏林的博客
02-27 2465
// this call // call能改变函数里面的this指向 let obj = { num : 234; } function test() { let num = 123; console.log(this.num); function a() {} } test.call(obj); /*当调用call方法时...
JS-箭头函数及其this的指向和改变this指向（call apply bind）
DcTbnk的博客
04-09 4472
一.箭头函数 <div>我是div</div> 所谓的箭头函数 是函数的另一种语法形式 const fun = function(){} 普通函数 const fun = ()=>{} 箭头函数 将匿名函数的部分,从 function(){} 写成 ()=>{} 的形式 如果函数只有一个参数,可以不写() const fun = ...
箭头函数与this指向问题
qq_50748038的博客
09-15 328
箭头函数内部this指向运行结果为undefined。因为箭头函数实际上是没有this的，函数内部的this指向外部声明箭头函数时的this。1.全局的 var 变量其实仅仅是为 global 对象添加了一条属性。2.var声明的变量会提升，可以重复声明，具有函数作用域只能在对应代码块中使用4.const声明的变量在声明的时候就需要赋值，并且只能赋值一次，不能修改。1.用 let 和 const 声明的全局变量并没有在全局对象中，只是一个块级作用域（Script）中。
改变this指向问题(call、apply、bind)
老电影故事的博客
10-08 795
普通函数： 谁调用，this就指向谁，如果没有调用者，this默认指向window箭头函数(es6)：箭头函数的this是父级作用域的(精解：箭头函数外如果还有一个函数包裹，那么这个this指向的就是外包裹函数。如果箭头函数外没有外包裹函数，那么this就指向window)//window我们直接在控制台打印this，会发现打印出来的是window对象，默认情况下，this指向window对象。
js this的指向，call ，apply，bind改变this的指向
jililin123的博客
01-11 592
js this的指向，call，apply，bind改变this的指向
ES6对象方法声明对象时，箭头函数this的指向问题
01-08
没有this、super、arguments 和 new.target 绑定 不能通过 new 关键字调用 没有 prototype 不可以绑定this 的绑定 不支持argument 不支持重复命名参数 疑问 // 第一种 用 var 定义 value var value = '小明' ...
关于ES6箭头函数中的this问题
08-27
ES6中新增了箭头函数这种语法,箭头函数以其简洁性和方便获取this的特性,接下来通过本文给大家分享ES6箭头函数中的this，感兴趣的朋友一起看看吧
深入理解Javascript箭头函数中的this
10-20
ES6标准新增了一种新的函数：Arrow Function（箭头函数）。那么下面这篇文章主要给大家介绍了箭头函数中this的相关资料，有需要的朋友可以参考借鉴，下面来一起看看吧。
ES6中的箭头函数实例详解
08-30
主要介绍了ES6中的箭头函数,结合实例形式详细分析了ES6中箭头函数的基本语法、特性、使用方法与相关注意事项,需要的朋友可以参考下
JavaScript 进阶第六章（this与函数的调用模式 ）
m0_56344602的博客
08-30 593
根据函数内部this的指向不同，可以将函数的调用模式分成4种 函数调用模式 方法调用模式 构造函数调用模式 上下文调用模式（借用方法模式） 函数调用模式 如果一个函数不是一个对象的属性时，就是被当做一个函数来进行调用的。此时this指向了window function fn(){ console.log(this); // 指向window } fn(); 方法调用模式 当一个函数被保存为对象的一个属性时，我们称之为一个方法。当一个方法被调用时...
ES6指针函数this指向
weixin_43971228的博客
05-05 583
ES6指针函数this指向 =>this指向的是定义时this指向的对象，不会改变 function()声明函数时的this指向会指向使用时所在的对象 箭头函数和普通函数的区别 普通函数：根据调用我的人（谁调用我，我的this就指向谁） 箭头函数：根据所在的环境（我再哪个环境中，this就指向谁） 一个简单的例子 //1 document.onclick = function...
es6的箭头函数，function* , yeild详解
hnhygkx的博客
09-21 8436
var f = v => v*2;  借鉴思路与java8的lamada 表达式类似 ,写匿名函数。 // 等价于 var f = function(v){   return v*2; } // 判断偶数 var isEven = n => n % 2 == 0; // 需要加 return var = (a, b) => {   if(a >= b)     return a
ES6(ECMAScript 6 ) 箭头函数以及js中的this
fengzijinliang的专栏
08-10 7446
箭头函数定义一个箭头函数很简单，基本语法是： JS([param] [, param]) => { statements }param => expression param 是参数，根据参数个数不同，分这几种情况： () => { ... } // 零个参数用 () 表示； x => { ... } // 一个参数可以省略 ()； (x, y) => { ... } // 多参数不能省略
浅谈ES6中的箭头函数
qs8lk88的博客
01-15 482
ES6中提出了一个新的概念，叫做箭头函数。我们可以把这个概念，理解成一个“简化版”的函数。之所以说箭头函数是所谓的“简化版”，主要原因有二，其一是箭头函数的写法比较简单，其二是箭头函数缺少Function所具备的一些“配套设施”，它们包括：this、super、arguments对象和new.target。今天我们就来着重地讨论一下箭头函数。   基本用法      首先看一段代码： //
ES6-箭头函数
liujun2son
12-28 1141
1.es5普通函数 function sum1(a,b) { return a+b; } 2.es5匿名函数 var sum2=function (a,b) { return a+b; } 3.ES6箭头函数 把匿名的函数去掉 function 函数 , 同时添...
ES6学习——新的语法：Arrow Functions
Challenge Next Challenge
01-04 2817
Arrow Functions并不是什么新鲜玩意了，在Java 8和Apple Swift语言中也都有这种写法，只不过有的语言用单箭头（->），JS中用双箭头（=>），大同小异，单箭头更像C或者C++中的指针语法。ES6中描述Arrow Functions的章节在14.2，有兴趣的可以自己去看。 下面先看个简单的例子，然后在介绍其他特征： let arr = [1, 2, 3]; le
【ES6】箭头函数
qq_45677671的博客
05-08 1043
箭头函数 箭头函数是ES6里面有个简写函数的语法方式 重点：箭头函数只能简写函数表达式，不能简写声明式函数 function fn(){}; //不能简写 const fun = function(){}; //可以简写 let obj = { fn :function(){}; //可以简写 } 语法：(函数的形参) => {函数体内要执行的代码} const fn = function(a,b){ console.log(a); console.log(b); } //可以使用箭
JS-箭头函数中的this的指向
BigKongfuPanda的博客
04-24 9289
一直对于ES6中箭头函数在使用的时候有些疑虑，其中一项就是this的指向问题。跟之前我所熟悉掌握的函数内部this的指向是有些地方不同的，但是在箭头函数中this到底指向谁，我模模糊糊的。所以为了搞清楚这个问题，就特意查阅了相关的资料，现总结下来。在JavaScript语言里面，this的用途很广泛。在这里，对this的含义以及原理就不做解释和说明，因为本文的目的是阐明this的指向问题。一般的，t
请描述ES6的箭头函数中this与普通函数中this的区分。
最新发布
06-12
在ES6的箭头函数中，this的指向与普通函数中的this有所不同。在普通函数中，this的指向是在函数被调用时动态确定的，它取决于函数的调用方式。而在箭头函数中，this的指向是在定义函数时确定的，它取决于函数定义时...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值