JavaScript - js进阶 - 箭头函数

最新推荐文章于 2023-08-11 19:53:31 发布

Henry_ww

最新推荐文章于 2023-08-11 19:53:31 发布

阅读量181

点赞数

分类专栏： JavaScript 文章标签： javascript js

本文链接：https://blog.csdn.net/Henry_ID/article/details/119876202

版权

JavaScript 专栏收录该内容

47 篇文章 2 订阅

订阅专栏

箭头函数

<!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>箭头函数</title>
    </head>
    <body></body>
    <script>
        // 箭头函数:用箭头 => 代表 function 关键字

        // 普通函数

        function fn1() {}
        const fn2 = function () {};

        // 箭头函数:代替匿名函数
        // () => {}
        const fn3 = () => {};
        console.log(fn3);

        // 箭头函数的特性

        // 1.() 的优化:如果形参只有一个,可以省略 ()
        const fn4 = (a) => {
            // 一个形参,名字叫a
            console.log(a);
        };
        fn4("hello");

        // 2.{} 的优化:如果函数体只有一行代码,可以省略 {}
        const fn5 = (a) => console.log(a); // 一个形参,一行函数体
        fn5("word");

        // 3. {}的优化: 隐藏点, 如果要修改返回值, 没有{} 自带return( 🔔 不能额外使用return:  只要有return 一定有{})
        const fn6 = (a) => a * a;
        let res = fn6(5);
        console.log(res);

        // 总结: 箭头函数一般用于做回调函数
    </script>
</html>

箭头函数没有 this

<!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>箭头函数 - 没有this</title>
    </head>
    <body></body>
    <script>
        // 箭头函数: 用 => 代替了function: 只有function会产生this, 箭头函数不产生this
        // 箭头函数可以使用this: this找上级要(作用域)

        const fn1 = () => {
            console.log(this); // 一定指向window对象(且改变不了)
        };
        fn1();

        const obj1 = {
            fn2: () => {
                console.log(this); // window对象: 指向了全局: 先指向obj1{}对象: 里面没有this, 再向上找到全局
            },
        };

        obj1.fn2();

        // 高级的
        const obj2 = {
            fn3: function () {
                // 有this: 指向obj2

                return () => {
                    console.log("fn3返回的箭头函数", this);
                };
            },
        };

        let fn4 = obj2.fn3();
        // console.log(fn4)
        fn4();

        // 骨灰级的: 借调改变this指向
        let ds = { name: "屌丝" };

        obj2.fn3().call(ds); // this依然指向 obj2: 借调失败
        // 箭头函数没有this: 借调是无法修改的

        // 如果非要修改? 曲线救国, 借调上级fn3 改变
        obj2.fn3.call(ds)();

        // 总结
        // 箭头函数自己没有: 找上级

        // 扩展
        let arr = [1, 2, 3];

        arr.forEach((item, index) => {
            console.log(item, index);

            console.log(this); // this指向window
        });
        // 回调函数里面的this指向: 一般都是指向window对象(外部)
        // 用了箭头函数之后: this一定指向window

        function f(fn) {
            // 普通回调调用
            fn(); // 相当于window在调用, 回调的this指向window

            // 借调回调函数
            fn.call(this); // 主函数f的this, 回调的this指向f的this

            // 如果回调函数fn是箭头函数: 无法借调, 里面this无法改变: 一定指向window
        }

        // 箭头函数使用this的目的: 防止别人修改里面的this
    </script>
</html>

Henry_ww

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript - js进阶 - 箭头函数

箭头函数<!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"
复制链接

扫一扫