JavaScript 箭头函数

软件技术NINI

于 2024-08-20 09:46:35 发布

阅读量206

点赞数

分类专栏： js 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/2301_78133614/article/details/141347738

版权

js 专栏收录该内容

59 篇文章 0 订阅

订阅专栏

箭头函数允许我们编写更短的函数：

语法

<!DOCTYPE html>
<html lang="en">

<body>
    <P id="demo"></P>
    <script>
        let myFunction = (a, b) => a * b;
        document.getElementById("demo").innerHTML = myFunction(4, 5);
    </script>
</body>

</html>
//20

用之前：

<!DOCTYPE html>
<html lang="en">

<body>
    <P id="demo"></P>
    <script>
        var hello;
        hello = function () {
            return "Hello World";
        }
        document.getElementById("demo").innerHTML = hello();
    </script>
</body>

</html>
//Hello World

用了箭头函数之后：

<!DOCTYPE html>
<html lang="en">

<body>
    <P id="demo"></P>
    <script>
        var hello;
        hello = () => {
            return "Hello World"
        }
        document.getElementById("demo").innerHTML = hello();
    </script>
</body>

</html>
//Hello World

确实变短了！如果函数只有一个语句，并且该语句返回一个值，则可以去掉括号和 return 关键字：

箭头函数默认返回值

<!DOCTYPE html>
<html lang="en">

<body>
    <P id="demo"></P>
    <script>
        var hello;
        hello = () => {
            return "Hello World"
        }
        document.getElementById("demo").innerHTML = hello();
    </script>
</body>

</html>
//Hello World

注释：这仅在函数只有一条语句时才有效。

如果您有参数，则将它们传递到括号内：

带参数的箭头函数：

<!DOCTYPE html>
<html lang="en">

<body>
    <P id="demo"></P>
    <script>
        var hello;
        hello = (val) => "Hello " + val;
        document.getElementById("demo").innerHTML = hello("Rose");
    </script>
</body>

</html>
//Hello Rose

事实上，如果只有一个参数，您也可以略过括号：

不带括号的箭头函数

<!DOCTYPE html>
<html lang="en">

<body>
    <P id="demo"></P>
    <script>
        var hello;
        hello = val => "Hello " + val;
        document.getElementById("demo").innerHTML = hello("Rose");
    </script>
</body>

</html>
//Hello Rose

`this` 怎么办？

与常规函数相比，箭头函数对 this 的处理也有所不同。

简而言之，使用箭头函数没有对 this 的绑定。

在常规函数中，关键字 this 表示调用该函数的对象，可以是窗口、文档、按钮或其他任何东西。

对于箭头函数，this 关键字始终表示定义箭头函数的对象。

让我们看两个例子来理解其中的差异。

这两个例子都调用了两次方法，第一次是在页面加载时，第二次是在用户单击按钮时。

第一个例子使用常规函数，第二个例子使用箭头函数。

结果显示第一个例子返回两个不同的对象（window 和 button），第二个例子返回两次 window 对象，因为 window 对象是函数的“所有者”。

实例

对于常规函数，this 表示调用该函数的对象

<!DOCTYPE html>
<html lang="en">

<body>
    <button id="btn">点击我</button>
    <P id="demo"></P>
    <script>
        var hello;
        hello = function () {
            document.getElementById("demo").innerHTML += this;
        }
        //window 对象调用函数
        window.addEventListener("load", hello);
        //button 对象调用函数
        document.getElementById("btn").addEventListener("click", hello);
    </script>
</body>

</html>

点击前：

点击后：

实例

用了箭头函数，则 this 表示函数的拥有者：

<!DOCTYPE html>
<html lang="en">

<body>
    <button id="btn">点击我</button>
    <P id="demo"></P>
    <script>
        var hello;
        hello =()=>{
            document .getElementById("demo").innerHTML+=this;
        }
        window.addEventListener("load",hello);
        document.getElementById("btn").addEventListener("click",hello)
    </script>
</body>

</html>

点击前：

点击后：

软件技术NINI

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 箭头函数

结果显示第一个例子返回两个不同的对象（window 和 button），第二个例子返回两次 window 对象，因为 window 对象是函数的“所有者”。这两个例子都调用了两次方法，第一次是在页面加载时，第二次是在用户单击按钮时。如果函数只有一个语句，并且该语句返回一个值，则可以去掉括号和。表示调用该函数的对象，可以是窗口、文档、按钮或其他任何东西。第一个例子使用常规函数，第二个例子使用箭头函数。对于常规函数，this 表示调用该函数的对象。关键字始终表示定义箭头函数的对象。与常规函数相比，箭头函数对。
复制链接

扫一扫