ES6箭头函数和普通函数中this的区别

最新推荐文章于 2024-08-28 18:35:36 发布
最新推荐文章于 2024-08-28 18:35:36 发布
阅读量419 收藏
点赞数
分类专栏： # Js 前端 文章标签： js es6 this 箭头函数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lycz_tpself/article/details/115284426
版权
本文探讨了ES6中箭头函数与普通函数在this指向上的区别。普通函数的this取决于调用方式，而在箭头函数中，this始终指向定义时的作用域。详细解析了不同场景下两者的this行为，包括作为对象方法、构造函数、以及使用call、apply、bind的情况。
摘要由CSDN通过智能技术生成

定义上的区别

引用自：ES6中箭头函数VS普通函数的this指向

  • 普通函数中的this
    • 默认情况下，函数时定义在window上的，this指向window
    • 严格模式下（设置了’use strict’），this为undefined
  • 如果函数是某个对象的属性，此时称这个函数是这个对象的方法
    • 方法中的this指向这个对象
    • ES6中，类的构造函数中的this指向该类的实例（不同于方法中的this只指向某一个实例，这个this指向此类所有的实例）
    • 当使用call，apply，bind（ES5新增）绑定的，this指向绑定对象
  • 箭头函数中的this
    • 默认指向定义它时，所处上下文的对象的this指向（这里值得是整个箭头函数处在的那个上下文）。
    • 即使是call，apply，bind等方法也不能改变箭头函数this的指向

其实定义在全局上下文中的函数是window的属性，所以指向window，也属于第二种情况，这里只是单独拿出来强调下

代码示例

定义四个对象如下：

let A1 = {
   
   sayHello: function(
最低0.47元/天 解锁文章
星潮汐
关注
专栏目录
ES6的箭头函数和普通函数相比有什么不同？
祈澈菇凉
11-06 225
箭头函数适用于简单的函数定义和回调函数，对于需要使用 this 或 arguments 对象的情况，传统函数仍然更适合使用。箭头函数没有自己的 arguments 对象，无法通过 arguments 访问传入的参数列表。箭头函数没有自己的 this 值，它的 this 值继承自外部的词法作用域。这意味着在箭头函数内部，无法通过 this 访问到函数自身的上下文，而是使用外部作用域的 this 值。箭头函数使用箭头（=>）来定义函数，语法更加简洁明了，省略了传统函数中的 function 关键字和大括号。
【ES6】es6箭头函数的this指向
余浩的博客
03-19 849
对于普通函数来说，内部的`this`指向函数运行时所在的对象，但是这一点对箭头函数不成立。 箭头函数没有自己的`this`对象，内部的`this`就是定义时上层作用域中的`this`。 也就是说，箭头函数内部的`this`指向是固定的，相比之下，普通函数的this指向是可变的。 **总之，箭头函数根本没有自己的`this`，导致内部的`this`就是它所在的外层父级函数代码块的`this`。正是因为它没有`this`，所以也就不能用作构造函数。**
箭头函数中的this
weixin_49655243的博客
03-22 230
//箭头函数的this是在函数定义的时候绑定，this是继承自父执行上下文中的this var x = 11; var obj = { x: 22, say: () => { console.log(this.x); //这里的箭头函数本身与say平级，本身所在对象为obj，而obj的父执行上下文就是window }, }; obj.say(); //11 var obj = { birth: 1990, getAge: function () { va
ES6中箭头函数与普通函数this的区别
qq_38719039的博客
07-05 1306
普通函数中的this:1. this总是代表它的直接调用者, 例如 obj.func ,那么func中的this就是obj2.在默认情况，没找到直接调用者, 则this指的是 window3.在严格模式下,没有直接调用者的函数中的this是 undefined4.使用call,apply, bind(ES5新增)绑定的, this指的是 绑定的对象箭头函数中的this默认指向在定义时作用域, 它所...
【js】箭头函数和普通函数在this指向的区别
最新发布
m0_74574927的博客
08-28 620
在JavaScript中，箭头函数（Arrow Functions）和普通函数（Function Declarations/Expressions）在this。
箭头函数与普通函数区别-箭头函数的this详解
qq_41490913的博客
07-11 205
箭头函数与普通函数区别-箭头函数的this详解
普通函数与箭头函数的this指向的区别
Amelian的博客
12-12 524
直接上一个简单的下配demo来说明问题 1.使用普通函数 需求：实现点击id为box的盒子，让其变色 方式1—使用普通哈函数 可以发现当你没有在外层保留this的指向时，此时setTimeout定时器中的箭头函数的指向时指向window的，那么此时this.style.background====>window.style.background,因此找不到windowd.style，所以报上面的错误 当我在外层保留this的指向时，然后我在定时器内函数使用外层保留的this即self，此时打印出
ES6箭头函数、箭头函数与普通函数的区别
d_agege的博客
03-26 823
一、基本语法 ES6中允许使用箭头=>来定义箭头函数，具体语法，我们来看一个简单的例子： // 箭头函数 let fun = (name) => { // 函数体 return `Hello ${name} !`; }; // 等同于 let fun = function (name) { // 函数体 return `Hello ${name} !`; }; 可以看出，定义箭头函在数语法上要比普通函数简洁得多。箭头函数省去了function关键字，采
关于ES6箭头函数中的this问题
11-26
在JavaScript的ES6标准中，箭头函数引入了一个新的特性，即`this`的处理方式与传统的函数有所不同。本文将详细解析箭头函数中的`this`问题，帮助开发者更好地理解和运用这一新特性。 通常，`this`在JavaScript中的...
ES6中的箭头函数实例详解
08-30
这意味着，箭头函数不会像普通函数那样在各种上下文中改变`this`的指向，例如在事件处理函数或`setTimeout`中。 示例： ```javascript var o = { x: 1, func: function() { console.log(this.x); }, test: ...
普通函数和箭头函数this的区别
luo1914_的博客
04-18 1568
普通函数的this指向跟函数的调用有关 主动调用： 函数名（） ===> this指向window 事件驱动调用： ele.on + 事件类型 = 函数名 ====>this指向ele元素 this是函数中的一个关键字，只有函数才有的一个关键字，谁调用这个函数，那么函数的thi就指向谁 <input type="button" id="btn" valu...
箭头函数与普通函数的区别
女神修炼日记
05-08 1221
首先知道一下什么是箭头函数，箭头函数就是没有function关键字，而是一个类似箭头的函数：var a = ()=&gt;{ return 1; } 相当于function a(){ return 1; } 那么就来看一下他们的区别箭头函数作为匿名函数,是不能作为构造函数的,不能使用newvar B = ()=&gt;{ value:1; } var b = new B(); //T...
箭头函数与普通函数中的this指向
qq_45874984的博客
09-06 419
//function定义的函数中 1.在普通函数中（在全局中直接定义的函数），this指向window 2.在全局中this指向window 3.在对象的方法中指向此对象 4.在构造函数中指向空对象 5.在事件函数中指向事件源 6.定时器的回调函数中指向window //箭头函数的this指向 1.在定时器的回调函数中指向window 2.与其所处的作用域有关（注意对象的大括号并不是作用域），箭头函数的this总是是指向外层作用域的this,除第一条外 箭头函数不适用的场景 1.事件函
普通函数和箭头函数的this
小瑾沐晚风的博客
02-11 5269
普通函数的this 1. this总是代表它的直接调用者, 例如 obj.func ,那么func中的this就是obj 2. 调用的时候，没有任何前缀，则指向window，new的时候，指向new出来的对象。 3.在默认情况(非严格模式下,未使用 'use strict'),没找到直接调用者,则this指的是 window 4.在严格模式下,没有直接调用者的函数中的this是 unde...
箭头函数的this、箭头函数与普通函数的区别
TylerYue的博客
09-22 434
1、箭头函数的this与普通函数不一样2、箭头函数不可用作构造函数（箭头函数没有自己的this）3、箭头函数没有prototype属性4、箭头函数不能使用arguments、super、new.target方法和属性。
ES6箭头函数定义与其在react中的使用场景
ganyuyu37的博客
04-15 474
1、ES6中的箭头函数是ES5匿名函数的语法糖（本身没有添加新功能，但是对人类更甜蜜的语法） var tt = function (){ return 3+4 } 等价于 var tt=()=>{3+4} 1.1 箭头函数继承父作用域的this，普通函数的this是全局变量global 1.2 与匿名函数的使用区别：要不要带当前作用域的this 2、react中箭头函数的用处...
ES6中的箭头函数详细梳理
m0_67392126的博客
08-01 270
ES6中允许使用=>来定义函数。箭头函数相当于匿名函数，并简化了函数定义。箭头函数没有自己的this指向，它会捕获自己定义所处的外层执行环境，并且继承这个this值。箭头函数的this指向在被定义的时候就确定了，之后永远都不会改变。（！永远）（1）箭头函数语法更简洁清晰，快捷。（2）箭头函数没有原型prototype，并不会自己创建this，并且this不能被修改，call等都不能修改到。只能间接修改被继承的this（3）箭头函数的this在定义时就定了，继承外一层的普通函数httpshttps。...
es6箭头函数和普通函数区别
lzfengquan的博客
07-07 608
箭头函数和普通函数 1箭头函数是匿名函数，不能作为构造函数，不能使用new 2 箭头函数不能绑定arguments,取而代之用rest参数…解决 3 箭头函数没有原型prototype属性 4 箭头函数的this永远指向其上下文的this,没有办法改变其指向 普通函数的this指向调用它的对象 5 箭头函数不绑定this，会捕获其所在的上下文的this值，作为自己的this值 ...
箭头函数与普通函数中的this
xxxxhcy的博客
10-27 84
1.普通函数： ①没有宿主调用时，指向window 注意严格模式下为undefined var a=function(){ console.log(this) } a()//window ②当通过对象（宿主）调用时 this为此对象 注意严格模式下也指向此对象 var a=20 obj={ a:10; b:function() { console.log(this.a) setTimeOut(function(){console.log(this.a)},0) } obj.b() //10 //20
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值