ES6箭头函数的理解

最新推荐文章于 2024-07-10 21:57:23 发布

Lemom199

最新推荐文章于 2024-07-10 21:57:23 发布

阅读量27

点赞数 1

分类专栏： js ES6 文章标签： es6 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_69375569/article/details/132515203

版权

js 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

ES6

4 篇文章 0 订阅

订阅专栏

ES6中允许使用()=>{}来定义函数。箭头函数可以简化匿名函数写法，并简化了函数定义
1.如果箭头函数的函数体只有一句执行代码，简单返回某个变量或者返回一个简单的js表达式，可以省去函数体花括号{ }和return
箭头函数的简写
let num =a=> a*10;
num()
特点：
1.箭头函数没有prototype(原型),箭头函数没有自己的this,继承的是外层代码块的this
2.不可以当做构造函数，也就是说不可以使用new命令，否则会报错的。
3.不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
4.不可以使用yield命令，因此箭头函数不能用作 Generator（生成器）函数。
5.因为没有this,所以不能使用call、bind、apply来改变this的指向。
举例子1：

let fun = function () {
          console.log('一场游戏一场梦');
    }
    fun()
    
    let fun1 = ()=>{
         console.log('我是箭头函数');
    }
    fun1()

例子2：
//箭头函数没有prototype也没有自己的this指向并且不可以使用arguments。

let abc = (a)=>{
console.log(arguments);
}
abc(3)

控制台会报错
在这里插入图片描述
箭头函数的实际应用

 const arr = ['hello', 'moring', 'gogo', 'killy'];
 console.log(arr.map((value) => value.length));   
  // 控制台输出Array [8, 6, 7, 9]；

 // 2.点击事件
 <body>
 <button id="btn">你干嘛点击我</button>
 </body>
 let btn =document.querySelector('#btn')
  btn.onclick = (e)=>{
     console.log(e);
     console.log(e.target);
  }

控制台输出
在这里插入图片描述

Lemom199

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6箭头函数的理解

1.如果箭头函数的函数体只有一句执行代码，简单返回某个变量或者返回一个简单的js表达式，可以省去函数体花括号{ }和return。1.箭头函数没有prototype(原型),箭头函数没有自己的this,继承的是外层代码块的this。//箭头函数没有prototype也没有自己的this指向并且不可以使用arguments。4.不可以使用yield命令，因此箭头函数不能用作 Generator（生成器）函数。2.不可以当做构造函数，也就是说不可以使用new命令，否则会报错的。
复制链接

扫一扫