ES6箭头函数技巧

最新推荐文章于 2024-06-27 20:56:38 发布

2年工作经验的小胡歌

最新推荐文章于 2024-06-27 20:56:38 发布

阅读量398

点赞数 2

分类专栏： ES6 文章标签： javascript js es6

本文链接：https://blog.csdn.net/m0_46822534/article/details/110876231

版权

ES6 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细介绍了ES6中的箭头函数，包括其省略写法、this的指向、不能作为构造函数及不支持arguments对象。重点讨论了箭头函数在回调函数、定时器和数组方法中的适用场景，强调了它在处理this关键字时的特殊行为，并给出了适合和不适合使用箭头函数的实例。

摘要由CSDN通过智能技术生成

关于ES6箭头函数用法

箭头函数的省略写法
关于箭头函数中的this
不能作为构造函数实例化对象
不能使用arguments对象
箭头函数的使用场景

1、箭头函数的省略写法
箭头函数(放置形参的地方)=>{函数体},箭头函数没有名字,
通常将箭头函数赋值给一个变量,变量名字就是函数名字,通过变量名字调用函数就可以了

// 箭头函数(放置形参的地方)=>{函数体},箭头函数没有名字,
// 通常将箭头函数赋值给一个变量,变量名字就是函数名字,
// 通过变量名字调用函数就可以了
         const fn = () => {
             console.log("我是箭头函数")
         }
         fn()

如果形参只有一个，可以省略小括号，如果函数体中只有一条语句，可以省略花括号，且return必须省略

 let arr = [1, 2, 3, 4, 5, 6];
 //es5之前
        var result = arr.filter(function(item) {
            if (item % 2 == 0) {return true} 
            else { return false}
         }) 
//使用箭头函数
        var result = arr.filter(item => item % 2 === 0)
        console.log(result);

2、关于箭头函数中的this
箭头函数不绑定this关键字，箭头函数没有自己的this关键字如果在箭头函数中使用this,this关键字将指向箭头函数定义位置中的this,指向的是函数定义位置的上下文(windows)this

  		function getName() {
            console.log(this.name);
        }
        var getName2 = () => {
            console.log(this.name);
        }
        window.name = 'davis'
        const person = {
            name: 'lebron'
        }
        getName.call(person); //输出lebron
        getName2.call(person); //输出davis

3、不能作为构造函数实例化对象

  var Student = (sname, sage) => {
            this.sname = sname;
            this.sage = sage
        }
 let me = new Student('小明', 19);

在这里插入图片描述
4、不能使用arguments对象

    var fn1 = () => {
            console.log(arguments);
        }
    fn1(1, 2, 3, 4, 5);

在这里插入图片描述
5、箭头函数的使用场景
5.1 适合场景
适合与this无关的回调，定时器，数组的方法回调

<h2 id="content">点我</h2>
<body>
    <script>
        var item = document.getElementById('content')
        item.addEventListener('click', function() {
            console.log(this); //输出<h2 id="content">点我</h2>
            setTimeout(function() {
                console.log(this); //输出window对象
                this.style.backgroundColor = 'pink'
            }, 2000)
//17行提示错误，原因在这this在这里指向window,
//如果要使用，必须保留this,即that=this
           //使用箭头函数没有问题
            // setTimeout(() => {
            //     this.style.backgroundColor = 'pink'
            //     console.log(this);
            //输出<h2 id="content">点我</h2>
            // }, 2000);
        }, true)
    </script>
</body>

5.1 不适合场景
不适合与this有关的回调,DOM元素的事件回调(如果使用的话就指向外层作用域this的值)，对象的方法

2年工作经验的小胡歌

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
ES6箭头函数技巧

关于ES6箭头函数用法箭头函数的省略写法关于箭头函数中的this不能作为构造函数实例化对象不能使用arguments对象箭头函数的使用场景1、箭头函数的省略写法箭头函数(放置形参的地方)=>{函数体},箭头函数没有名字,通常将箭头函数赋值给一个变量,变量名字就是函数名字,通过变量名字调用函数就可以了// 箭头函数(放置形参的地方)=>{函数体},箭头函数没有名字,// 通常将箭头函数赋值给一个变量,变量名字就是函数名字,// 通过变量名字调用函数就可以了
复制链接

扫一扫