javascript箭头函数浅谈

最新推荐文章于 2025-01-05 10:27:59 发布

原创最新推荐文章于 2025-01-05 10:27:59 发布 · 439 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

js 专栏收录该内容

50 篇文章

订阅专栏

本文深入探讨了JavaScript中的箭头函数，包括其简洁的语法形式，如普通函数与箭头函数的对比，以及参数简化。此外，重点讨论了箭头函数中this关键字的行为，通过实例展示了在事件监听中的不同表现。文章适合JavaScript初学者和进阶者阅读，以加深对箭头函数的理解。

js箭头函数

以下对箭头函数的简单性质进行阐释，后续会补充加深内容

一：使用形式

html部分：

    <p id="demo1"></p>
    <p id="demo2"></p>
    <p id="demo3"></p>

js部分：

    /*
    普通函数：function(){}
    箭头函数: () => {}
    */

    let yc = ['fat','English','stupid'];

    // 普通函数
    var yc_quality = yc.map(function(value){
        return value += ' ';
    });
    document.getElementById("demo1").innerHTML = yc_quality;

    // 箭头函数 1 ：箭头函数是匿名的，用完就扔
    var yc_quality = yc.map((value) =>{
        return value += ' ';
    });
    document.getElementById("demo2").innerHTML = yc_quality;

    // 箭头函数 2 ：当传入参数只有一个时，括号可以省略，表达式同理
    var yc_quality = yc.map(value => value += ' ');  //这里不应该有return，只有一个表达式时会自动返回箭头后的结果
    document.getElementById("demo3").innerHTML = yc_quality;

运行结果：

this的探讨

html部分：

    <button>普通函数按钮</button>
    <p id="demo4"></p>
    <button>箭头函数按钮</button>
    <p id="demo5"></p>

js部分：

 //箭头函数：this相关
    var normalButton = document.getElementsByTagName('button')[0]; //获取DOM
    var arrowButton = document.getElementsByTagName('button')[1];
    var normalP = document.getElementById('demo4');
    var arrowP = document.getElementById('demo5');
    let normalFun = function(){  // 定义函数，找到this的对象
        normalP.innerHTML = '普通函数：' + this;
    }
    let arrowFun = function(){
        arrowP.innerHTML = '箭头函数：' + this;
    }
    normalButton.addEventListener('click',normalFun,false);  //给按钮添加监听
    arrowButton.addEventListener('click',arrowFun,false);

运行结果

完整代码

<!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>Document</title>
</head>

<body>
    <p id="demo1"></p>
    <p id="demo2"></p>
    <p id="demo3"></p>
    <button>普通函数按钮</button>
    <p id="demo4"></p>
    <button>箭头函数按钮</button>
    <p id="demo5"></p>
</body>
<script>
    /*
    普通函数：function(){}
    箭头函数: () => {}
    */

    let yc = ['fat', 'English', 'stupid'];

    // 普通函数
    var yc_quality = yc.map(function (value) {
        return value += ' ';
    });
    document.getElementById("demo1").innerHTML = yc_quality;

    // 箭头函数 1 ：箭头函数是匿名的，用完就扔
    var yc_quality = yc.map((value) => {
        return value += ' ';
    });
    document.getElementById("demo2").innerHTML = yc_quality;

    // 箭头函数 2 ：当传入参数只有一个时，括号可以省略，表达式同理
    var yc_quality = yc.map(value => value += ' '); //这里不应该有return，只有一个表达式时会自动返回箭头后的结果
    document.getElementById("demo3").innerHTML = yc_quality;

    //箭头函数：this相关
    var normalButton = document.getElementsByTagName('button')[0]; //获取DOM
    var arrowButton = document.getElementsByTagName('button')[1];
    var normalP = document.getElementById('demo4');
    var arrowP = document.getElementById('demo5');
    let normalFun = function () { // 定义函数，找到this的对象
        normalP.innerHTML = '普通函数：' + this;
    }
    let arrowFun = () => {
        arrowP.innerHTML = '箭头函数：' + this;
    }
    normalButton.addEventListener('click', normalFun, false); //给按钮添加监听
    arrowButton.addEventListener('click', arrowFun, false);
</script>

</html>