ES6 _箭头函数及声明特点

最新推荐文章于 2024-05-28 13:40:16 发布

_洋

最新推荐文章于 2024-05-28 13:40:16 发布

阅读量224

点赞数

分类专栏： ES6 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/mantou_riji/article/details/124778362

版权

ES6 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

文章目录

ES6允许使用箭头（=>）定义函数

箭头函数定义

格式：

   (参数)=>{
       函数体
   }

等价于：

  function (参数){
     函数体
  }

箭头函数的使用

        let fn = (a,b)=>{
            return a+b
        }
        let result = fn(2,3)
        console.log(result)

输出： 5

箭头函数的特性

this是静态的
即没有自己的this，this始终指向函数声明时所在作用域下的 this的值。
普通函数的this是：谁调用该函数，this就是谁。

eg：

        function getName (){
           console.log(this.name)  
        }
        
        let getName2 = ()=>{
            console.log(this.name)
        }
        window.name = 'yang'
        const sun = {
            name:'孙悟空'
        }

        // 直接调用
        getName()//this指向windows
        getName2()//this指向windows

        // call调用
        getName.call(sun)//this指向sun
        getName2.call(sun)//this指向windows

输出：
在这里插入图片描述

箭头函数不能作为构造函数实例化对象

        let Person = function (name,age){
            this.name = name;
            this.age = age;
        }

        let Person2 = (name,age)=>{
            this.name = name;
            this.age = age;
        }

        let sun1 = new Person('孙悟空',18)
        console.log(sun)
        let sun2 = new Person2('孙悟空',18)
        console.log(sun2)

输出：
在这里插入图片描述

箭头函数不能使用arguments

        let fun = ()=>{
            console.log(arguments)
        }
        fun()

在这里插入图片描述

箭头函数的简写

省略小括号：当形参有且只有一个时可以省略小括号

        let add = n=>{
            return n*2
        }
        console.log(add(3))

输出：6

省略花括号：当代码体只有一条语句的时候，可以省略花括号，此时return语句也要省略掉
eg：

        let pow = n=>n*n
       /*等价于：
        let pow = (n)=>{
            return n*n
        }*/
        console.log(pow(9))

输出：81

箭头函数的实践

eg1：点击div 2s后颜色变成『粉色』

不使用箭头函数时应该这样写：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #ad{
            width: 200px;
            height: 200px;
            background-color: #58a;
        }
    </style>
</head>
<body>
    <div id='ad'></div>
    <script>
        // 点击div 2s后颜色变成『粉色』
        let ad =document.getElementById('ad')
        ad.addEventListener("click",function (){
            // this是ad
            let _this = this
           setTimeout(function (){
            //    注意定时器中的this是windows
            // 定时器是window的方法，执行的时候由windows调用
                _this.style.background = 'pink'
           },2000)
        })

    </script>
</body>
</html>

使用箭头函数时，由于箭头函数的this始终指向函数声明时所在作用域下的 this的值。
所以可以直接在setTimeout中使用箭头函数，此时箭头函数的this就指向click的function的this 即 ad：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #ad{
            width: 200px;
            height: 200px;
            background-color: #58a;
        }
    </style>
</head>
<body>
    <div id='ad'></div>
    <script>
        // 点击div 2s后颜色变成『粉色』
        let ad =document.getElementById('ad')
        ad.addEventListener("click",function (){
            // this是ad
           setTimeout(()=>{
               this.style.background='pink'
           },2000)
        })

    </script>
</body>
</html>

eg2：从数组中返回偶数的元素

使用普通函数实现：

        const arr = [1,6,9,20,100,25]
        const result = arr.filter(function (item){
            if(item%2===0){
                return true
            }else{
                return false
            }  
        })
        console.log(result)

输出：
在这里插入图片描述
使用箭头函数实现：

        const arr = [1,6,9,20,100,25]
        const result = arr.filter(item=>item%2===0)
        // 代表如果为偶数就返回true
        console.log(result)

箭头函数的适用场景

箭头函数适合与this 无关的回调：定时器、数组的方法
回调箭头函数不适合与 this有关的回调：DOM事件回调、对象的方法

_洋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6 _箭头函数及声明特点

文章目录箭头函数定义箭头函数的使用箭头函数的特性箭头函数的简写箭头函数的实践eg1：点击div 2s后颜色变成『粉色』eg2：从数组中返回偶数的元素箭头函数的适用场景ES6允许使用箭头（=>）定义函数箭头函数定义格式： (参数)=>{ 函数体 }等价于： function (参数){ 函数体 }箭头函数的使用 let fn = (a,b)=>{ return a+b }
复制链接

扫一扫