ES6新特性箭头函数什么是箭头函数？箭头函数的特点？

最新推荐文章于 2024-07-31 16:33:32 发布

倾城857

最新推荐文章于 2024-07-31 16:33:32 发布

阅读量471

点赞数 2

文章标签： JavaScript 箭头函数回调函数 this指向形参默认值

本文链接：https://blog.csdn.net/qq_64389035/article/details/121730958

版权

1.语法： (形参1,形参2...) => {函数体}

箭头函数的用途：

箭头函数一般用于回调函数，而回调函数通常是匿名函数。

2. 箭头函数的特点

1)、箭头函数不同于一般函数：

(1)、一般函数可以先调用后定义，而箭头函数只能先定义后调用；

(2)、一般函数有arguments，而箭头函数没有arguments、但可以使用剩余参数；

(3)、一般函数可以当作构造函数，而箭头函数不能当作构造函数，因为箭头函数没有自己的this;

 <script>
        //一般函数：
        // demo(1, 3, 5);

        function demo() {
            console.log(arguments, 333);
        }

        let obj = new demo();

        //箭头函数：

        // test();
        let test = (...y) => {
            console.log(y);
            // console.log(arguments); // arguments is not defined
            console.log('test()函数');
        }

        test(5, 6, 7);

        //箭头函数不能当作构造函数
        //let obj2 = new test(); //test is not a constructor
    </script>

2)、箭头函数的简写形式：

(1)、当箭头函数只有一个形参时可以省略圆括号；

(2)、当箭头函数体只有一条语句并且该语句会作为返回值返回时，可以省略花括号及return关键词；

   <script>
        // let fn = (num) => {
        let fn = num => {
            console.log(num * 9);
        }

        fn(12);

        // let test = (m, n) => {
        //     return m * n;
        // }
        let test = (m, n) => m * n;


        let y = test(8, 9);
        console.log(y);
    </script>

3)、箭头函数的this指向依赖外层函数中的this指向，箭头函数中的this指向不绑定当前调用者，箭头函数中的this指向定义时所在函数中的this指向，与当前调用者没有关系；

 <script>
        function mydemo() {
            // console.log(this, 11);
            setTimeout(function() {
                console.log(this, 222);
            }, 2000);

            setTimeout(() => {
                console.log(this, 3333);
            }, 3000);
        }

        // mydemo(); //window  window
        // new mydemo(); // window  {}


        var brand = "苹果";
        //  let brand = "苹果";
        var obj = {
            brand: "梨",
            fn: function() {
                console.log(this, 111);
                setTimeout(function() {
                    console.log(this.brand, this, 222);
                }, 2000);

                setTimeout(() => {
                    console.log(this.brand, 333);
                }, 3000);
            }
        };

        // obj.fn(); //苹果  梨

        var goods = '华为笔记本';
        var obj2 = {
            goods: '联想电脑',
            demo: () => {
                setTimeout(function() {
                    console.log(this.goods, this, 222);
                }, 2000);

                setTimeout(() => {
                    console.log(this.goods, this, 333);
                }, 3000);
            }
        };

        //  obj2.demo(); //华为笔记本  华为笔记本

        var fn = () => {
            setTimeout(() => {
                console.log(this);
            }, 2000);
        }

        // fn(); //window
        //  fn.call(new Object); //window

        function fn2() {
            // console.log(this, 11);
            setTimeout(() => {
                console.log(this);
            }, 2000);
        }

        fn2.call(new Object); //{}
    </script>

3. 箭头函数不适用的场景

1)、对象中的方法不能使用箭头函数；

2)、给某个DOM对象绑定方法时不能使用箭头函数；

<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>
    <script>
        var obj = {
            "uname": "张三",
            // demo: function() {
            demo: () => {
                console.log(this);
                console.log(this.uname, 999); // undefined
            }
        };

        obj.demo();
    </script>
</head>

<body>
    <!-- <form action="/yesok.html"> -->
    <button>测试按钮</button>
    <!-- </form> -->
    <script>
        let btns = document.getElementsByTagName('button')[0];
        // btns.addEventListener('click', function() {
        btns.addEventListener('click', () => {
            console.log(this);
        });
    </script>
</body>

4.函数形参默认值

注意：设置了默认值的形参要放在所有形参的最右边

 <script>
        // jsq(8, 6, '*');
        console.log(jsq(8, 6));

        //需求：实现一个简单的计算器功能
        //注意：设置了默认值的形参要放在所有形参的最右边
        function jsq(m, n, flg = '+') {
            // function jsq(m, flg = '+', n) {
            let total = 0;
            switch (flg) {
                case '+':
                    total = m + n;
                    break;
                case '-':
                    total = m - n;
                    break;
                case '*':
                    total = m * n;
                    break;
                case '/':
                    total = m / n;
                    break;
            }
            return total;
        }
    </script>