ES6 箭头函数

最新推荐文章于 2024-10-18 00:00:00 发布

咸鱼妹妹

最新推荐文章于 2024-10-18 00:00:00 发布

阅读量83

点赞数 1

分类专栏： ES6

本文链接：https://blog.csdn.net/weixin_45884202/article/details/110524239

版权

ES6 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

ES6 箭头函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>箭头函数</title>
</head>
<body>
    <script>
        // 声明一个函数 => 省略了function函数

        // let fn = function(){
        //     return x;
        // }

        // 有形参（一个形参）
        let fn = x => x;
        console.log(fn(666)); //666

        // 没有形参
        let fn1 = () => 10;

        // 多个形参
        let fn2 = (x,y) => x*y;

        // 大段的代码
        let fn3 = (x,y) => {
            // 代码
        }

        // 函数嵌套
        // es5写法
        // let fn4 = function(){
        //     return function(){

        //     }
        // }

        // es6写法
        // 等同于上面的嵌套函数
        // 在箭头函数里，没有argument对象
        let fn4 = () => () => {

        }

        // this指向
        /* 
           在箭头函数之前接触的this指向：

           1.在函数内：指向当前函数的调用者；
           2.在函数外：指向window；
           3.在自执行函数：指向window；
           4.在对象里：指这个对象的本身；
           5.在构造函数：如果new了，就指向每一个实例化的对象，没有new，指向window；
           6.箭头函数：指向上下文环境，如果没有上下文，那就指向window；
        */

        /*
           箭头函数的特点：

           1.用=>声明函数
           2.有形参时，可以直接写形参；没有形参时，直接写（）；有多个形参，将形参用逗号（,）隔开，依次写入括号里；
           3.在箭头函数里没有arguments对象
           4.箭头函数的this，指向上下文环境，如果没有上下文环境的对象，就指向Windows；
           5.箭头函数，不能用作构造函数，不能使用new来调用箭头函数。
        */
      

        {
            let fn = () => {}           //箭头函数，块级（受块级作用域的限制）
            let fn2 = function(){}     //块级
            const fn6 = ()=>{}         //块级
            const fn7 = function(){}  //块级

            var fn3 = () => {}       //箭头函数，非块级（不受块级作用域的限制）
            function fn4(){}         //非块级
            // fn5:function(){}
        }
    </script>
</body>
</html>