【JavaScript高级】关于箭头函数和箭头函数里面的this

最新推荐文章于 2024-04-03 22:06:54 发布

阿山同学.

最新推荐文章于 2024-04-03 22:06:54 发布

阅读量77

点赞数

文章标签：后端前端 javascript

本文链接：https://blog.csdn.net/weixin_50112395/article/details/124590922

版权

本文详细介绍了JavaScript中的箭头函数，包括其基本语法、语法糖以及实际应用。通过实例展示了如何使用箭头函数进行参数简化和函数体简写。同时，探讨了箭头函数中的this关键字，说明了它与普通函数中this的不同，特别是在对象上下文中如何保持作用域的一致性。文章还提供了相关练习，帮助读者巩固理解。

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

老规矩上才艺

1，关于箭头函数

<!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>
    <style>

    </style>
</head>

<body>
    <script>
        // ES6 2015年提供的新语法-箭头函数

        // function (){}
        // 旧的
        // function() {}) {};   //不注释代码会报错
        // 新的（箭头函数）
        (() => {})();
        // -------------分割线------------
        // 语法糖1：箭头函数只有一个参数，（）可以省略
        var a = (name) => {
            console.log(name, '666')
        };
        // 简化
        var a = name => {
            console.log(name, '666');
        };
        a('beibei');
        a('dondon');
        // -------------分割线-------------
        // 语法糖2:函数体只有一行代码时，可以省略，{return ...}
        var a = (n) => {
            return 14000 * n
        };
        // 简化
        var a = n => {
            14000 * n
        };
        console.log(a(12));
        // -------------分割线-------------
        // 练习：
        // 1
        var b = (x, y) => {
            return x + y
        };
        // 2
        var c = (y) => {
            return 12 * y
        };
        // 3
        var d = () => {
            return 666 * 888
        };
        // 4
        var e = (name, age) => {
            return {
                name: name,
                age: age
            }
        };
        // -------------分割线-------------
        // d答案
        var b = (x, y) => {
            x + y
        };
        var c = y => {
            12 * y
        };
        var d = () => {
            666 * 888
        };
        // 坑(可以算的上面试题吧)
        var e = (name, age) => {
            // 返回值是对象类型，带有括号（），会被识别为函数体的{}
            // 用小括号包裹才会识别成普通的对象类型
            ({
                name,
                age
            })
        };
    </script>
</body>

</html>

输出：

2，关于箭头函数里面的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> </title>
    <style>

    </style>
</head>

<body>
    <script>
        // function :this指向运行时所在的对象
        // 箭头函数：：this指向声明是所在的作用域的this

        // 类似：测试发现了bug
        // function : 项目经理.扣工资（） 项目经理以这个理由来扣工资
        // function : 项目经理.扣工资（） 发现bug的式测试--不会改变
        console.log(this);
        // 全局中打印this就是window
        function 扣工资() {
            console.log(this, "马上扣工资！")
        }
        // 箭头函数
        var 扣工资 = () => {
            console.log(this, "马上扣工资！")
        }

        var emp = {
            uname: '项目经理'
        }
        emp.x = 扣工资
        emp.x();
        // -------------分割线-------------
        // 把箭头函数放在emp里面
        emo.y = 扣工资
        emp.y()
    </script>
</body>

</html>

输出：