ES6箭头函数

最新推荐文章于 2024-08-15 21:19:47 发布
最新推荐文章于 2024-08-15 21:19:47 发布
阅读量2.8k 收藏 5
点赞数
分类专栏： 其它
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/smlljet/article/details/90902604
版权

ES6 允许使用箭头（=>）箭头函数对于使用function关键字创建的函数有以下区别

1–箭头函数没有arguments（建议使用更好的语法，剩余运算符替代）
2–箭头函数没有prototype属性，不能用作构造函数（不能用new关键字调用）
3–箭头函数没有自己this，它的this是词法的，引用的是上下文的this，即在你写这行代码的时候就箭头函数的this就已经和外层执行上下文的this绑定了(这里个人认为并不代表完全是静态的,因为外层的上下文仍是动态的可以使用call,apply,bind修改,这里只是说明了箭头函数的this始终等于它上层上下文中的this)
在这里插入图片描述
因为setTimeout会将一个匿名的回调函数推入异步队列，而回调函数是具有全局性的，即在非严格模式下this会指向window，就会存在丢失变量a的问题，而如果使用箭头函数，在书写的时候就已经确定它的this等于它的上下文（这里是makeRequest的函数执行上下文，相当于将箭头函数中的this绑定了makeRequest函数执行上下文中的this）因为是controller对象调用的makeRequest函数，所以this就指向了controller对象中的a变量

箭头函数的this指向即使使用call,apply,bind也无法改变（这里也验证了为什么ECMAScript规定不能使用箭头函数作为构造函数，因为它的this已经确定好了无法改变）

ES5写法
在这里插入图片描述
ES6箭头函数
在这里插入图片描述
注意下面
在这里插入图片描述
makeRequest后面的function不能使用箭头函数，因为这样它就会再使用上层的this，而再上层是全局的执行上下文，它的this的值会指向window,所以找不到变量a返回undefined

Hong Jet
关注
专栏目录
深入理解ES6之箭头函数
Allen2zhu的博客
12-05 243
阿里云云服务器双12活动又来了，低至1折 ，真心觉得很划算了，可以点击本条内容直接参与 1 箭头函数的基本用法 const func = value => value 相当于 const func = function(value) { return value } 1.1 基本用法 // 不传参数 const func = () => 'result' // 等同于 cons...
ES6 箭头函数
langmanboy的博客
04-22 353
箭头函数 1. 箭头函数语法 箭头函数是 ES6 新增的特性， 通过使用 => 定义函数的新语法 箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super 或 new.target 箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数 arg1, arg2, ..argN 函数参数 expression 函数返回值 let func = (arg1, arg2, ..., argN) => expression; let func =
详解ES6（五）-箭头函数
我的blog屋
06-08 366
在ES6中，箭头函数是其中最有趣的新增特性。顾名思义，箭头函数是一种使用箭头（=>）定义函数的新语法，但是它与传统的JavaScript函数有些许不同，主要集中在以下方面： 没有this、super、arguments和new.target绑定，其值由外围最近一层非箭头函数决定 不能通过new关键字调用 没有原型 不可以改变this的绑定 不支持arguments对象 不支持重复的命名参数 箭头函数的语法 先来看一个例子： let reflect = value => value; //相当
深入浅出 JavaScript 箭头函数：简洁、灵活、强大的函数表达方式
最新发布
weixin_63490470的博客
08-15 1148
箭头函数是 ES6 中引入的一种新的函数语法，它提供了一种更加简洁、灵活、强大的函数表达方式，可以简化代码，提高代码可读性，并带来一些独特的特性。希望本文能够帮助您更好地理解和应用箭头函数，提升您的 JavaScript 开发效率。
es6箭头函数讲解
coldriversnow的专栏
07-28 431
如上是一个倒计时完之后显示一个hello文本的效果，在setInterval里面，如果我们直接写this的话，这个this是指向window的。除了简洁之外，箭头函数还有另外一个优点，就是函数体内的this的指向始终是指向定义它所在的对象，而不会指向调用它的对象，我们知道es5中的函数是谁执行它，它就指向谁。因为箭头函数的this是由定义它的对象决定的，对象的构造函数是顶层的，它的外层，没有this可以传进去给箭头函数使用。对象，该对象在函数体内不存在。对象，就是定义时所在的对象，而不是使用时所在的对象。.
深入理解ES6中的箭头函数
fuyangsuccessful的博客
01-09 319
ES6箭头函数
ES6箭头函数详细解析
前端卷王小白的博客
04-15 758
箭头函数的语法,箭头函数的定义和用法,箭头函数this的指向
「前端面试题系列5」ES6 中箭头函数的用法
weixin_34221773的博客
02-11 262
前言 年味儿渐散，收拾下心情，继续敲代码吧。 对于即将到来金三银四的求职季，相信不少同学都在默默地做着准备。本系列旨在梳理前端庞杂的知识点，并尽可能通俗易懂地表述出来，也希望能帮到有需要的同学。 这是前端面试题系列的第 5 篇，你可能错过了前面的篇章，可以在这里找到： this 的原理以及用法 伪类与伪元素的区别及实战 如何实现一个圣杯布局？ 今日头条 面试题和思路解析 面试中，我经常会问及 ...
ES6箭头函数、箭头函数与普通函数的区别
d_agege的博客
03-26 777
一、基本语法 ES6中允许使用箭头=>来定义箭头函数，具体语法，我们来看一个简单的例子： // 箭头函数 let fun = (name) => { // 函数体 return `Hello ${name} !`; }; // 等同于 let fun = function (name) { // 函数体 return `Hello ${name} !`; }; 可以看出，定义箭头函在数语法上要比普通函数简洁得多。箭头函数省去了function关键字，采
JavaScript ES6箭头函数使用指南
10-17
JavaScript ES6箭头函数是ECMAScript 2015引入的一个重要特性，它提供了更加简洁的函数定义方式，同时也改变了传统函数中`this`的指向规则。箭头函数的出现，部分原因是受到CoffeeScript的影响，其核心在于简化代码...
es6箭头函数this指向及优缺点
xzbqd的博客
12-17 313
es6箭头函数this指向及优缺点
关于ES6箭头函数中的this问题
08-27
ES6箭头函数中的this问题 ES6中新增了箭头函数这种语法，箭头函数以其简洁性和方便获取this的特性。然而，在箭头函数中this的指向却与一般函数定义的函数不同。箭头函数中的this是在定义函数的时候绑定，而不是在...
[js高手之路] es6系列教程 - 箭头函数详解
weixin_33696822的博客
08-05 177
箭头函数是es6新增的非常有意思的特性，初次写起来，可能会觉得别扭，习惯之后，会发现很精简. 什么是箭头函数? 箭头函数是一种使用箭头( => )定义函数的新语法, 主要有以下特性: 不能通过new关键字调用 没有原型, 因为不能通过new调用，所以没有原型 没有this, super，arguments和new.target绑定, new.target和super关键字是es...
ES6 箭头函数中的 this？你可能想多了（翻译）
dcof99817的博客
10-22 179
箭头函数=>无疑是ES6中最受关注的一个新特性了，通过它可以简写 function 函数表达式，你也可以在各种提及箭头函数的地方看到这样的观点——“=> 就是一个新的 function”。 箭头函数的句法规则甚至早已延伸到各项标准和技术文档中去了，虽然它早已不稀奇，却给我们一种刚刚发现的新鲜感。 粉我的人都知道俺因为某些原因不怎么喜欢 => 的语法，不过别担心，本...
es6箭头函数基本用法
一棵小小白杨的博客
12-16 626
基本用法ES6允许使用“箭头”（=>）定义函数。var f = v => v;上面的箭头函数等同于：var f = function(v) { return v; };如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。var f = () => 5;等同于 var f = function () { return 5 };var sum = (num1, num2) => nu
ES6中的箭头函数详细梳理
热门推荐
weixin_45709829的博客
04-03 2万+
一、箭头函数的介绍 1.1 什么是箭头函数 ES6中允许使用=>来定义函数。箭头函数相当于匿名函数，并简化了函数定义。 1.2 基本语法 // 箭头函数 let fn = (name) => { // 函数体 return `Hello ${name} !`; }; // 等同于 let fn = function (name) { // 函数体 return `Hello ${name} !`; }; 箭头函数在语法上比普通函数简洁多。箭头函数就是采用箭头=
ES6(ECMAScript 6 ) 箭头函数以及js中的this
fengzijinliang的专栏
08-10 7463
箭头函数定义一个箭头函数很简单，基本语法是： JS([param] [, param]) => { statements }param => expression param 是参数，根据参数个数不同，分这几种情况： () => { ... } // 零个参数用 () 表示； x => { ... } // 一个参数可以省略 ()； (x, y) => { ... } // 多参数不能省略
ES6--箭头函数
萧墨的博客
04-13 285
1. 格式：(参数)=>{ 函数体 } 如果参数只有一个，括号可以被省略。 如果花括号中的表达式之间作为返回值的话，花括号也可以省略。 举例：一般我们使用map遍历： var array_1 = [1,2,3,4,5]; var array 2 = array1.map(function(v){ return ++v; }); array_1;//[1,2,3,4,5] ...
ES6中对箭头函数的理解
fangqi20170515的博客
09-02 187
箭头函数内的this是静态的，总是指向定义时所在的对象，而不是调用时，并且this指向是不可改变的；
es6 箭头函数
05-25
ES6 中的箭头函数是一种更简洁的函数语法，它可以更方便地定义匿名函数。箭头函数的形式如下： ``` (param1, param2, ...) => {statements} ``` 其中，`(param1, param2, ...)` 是函数的参数列表，`{statements}` 是函数体。 相比于传统的函数定义方式，箭头函数有以下几个特点： 1. 箭头函数是匿名函数，因此通常需要将其赋值给一个变量或者作为参数传递给其他函数。 2. 如果函数体只有一行语句，可以省略花括号和 `return` 关键字，如下所示： ``` (param1, param2, ...) => expression ``` 3. 如果函数只有一个参数，可以省略括号，如下所示： ``` param => {statements} ``` 4. 箭头函数没有自己的 `this` 值，它会继承外层作用域中的 `this` 值，因此可以避免传统函数中 `this` 指向问题的困扰。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值