JavaScript箭头函数

最新推荐文章于 2024-10-02 05:39:15 发布

专心搞技术

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量47

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_59837456/article/details/132677760

版权

ES6中引入了箭头函数。

箭头函数可以缩短代码量，更少的代码就可以实现函数的功能。

语法：

let myFunction = (a, b) => a*b;

函数名 =（形参）=> 函数体；

之前正常写函数是:

hello = function(){

return "Hello World!";

}

用箭头函数是：

hello = () =>{

return "Hello World!";

}

如果函数只有一条语句，并且该语句返回一个值，则可以去掉花括号和return关键字

hello = () => "Hello World!";

有参数时，可将参数传递到括号内：

hello = (val) => "Hello " + val;

如果只有一个参数，参数外的括号是可以省略的：

hello = val => "Hello " + val;

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

使用箭头函数没有对 this 的绑定。

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

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

实例一

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

<!DOCTYPE html>
<html>
<body>

    <h2>JavaScript "this"</h2>

    <p>此例演示在常规函数中，“this”关键字代表不同的对象，具体取决于函数的调用方式。</p>

    <p>点击按钮再次执行“hello”函数，你会看到这次“this”代表的是 button 对象。</p>

    <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>
<body>

    <h2>JavaScript "this"</h2>

    <p>此例演示在箭头函数中，“this”关键字表示拥有该函数的对象，无论是谁调用该函数。</p>

    <p>点击按钮再次执行“hello”函数，你会看到“this”仍然代表 window 对象。</p>

    <button id="btn">点击我！</button>

    <p id="demo"></p>

<script>
    var hello;

    hello = () => {
      document.getElementById("demo").innerHTML += this;
    }

    //window 对象调用函数：
    window.addEventListener("load", hello);

    //button 对象调用函数：
    document.getElementById("btn").addEventListener("click", hello);
</script>

</body>
</html>

结果：