【JS】ES6-箭头函数 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<script>
    /*
    * 箭头函数
    * */
    var fn1 = function () {
        console.log("我是f1函数")
    }
    fn1()
    var fn2 = () => {
        console.log("我是f2函数")
    }
    fn2()

    /*
    * 箭头函数特殊之处
    * 1.箭头函数某些时候可以省略()
    * =>当你的形参只有一个的时候，可以省略
    * 2.箭头函数某些时候可以省略{}
    * =>当你的代码只有一句话的时候，可以省略
    * =>并且会自动返回结果
    * 3.箭头函数没有arguments
    * =>arguments 是一个对应于传递给函数的参数的类数组对象。
    * 4.箭头函数没有this
    * =>箭头函数内的this就是外部作用域的this
    * */
    var fn3 = () => {
        console.log("我没有形参")
    }
    fn3()

    var fn4 = a => {
        console.log("我有一个形参", a)
    }
    fn4(100)

    var fn5=(a,b)=>a+b
    console.log(fn5(10,20))

    var fn6 = function (){
        console.log(arguments)
    }
    fn6(100,200,300)
    // var fn6 = () => {
    //     console.log(arguments)
    // }
    // fn6(100,200,300)


    var obj={
        fn:function () {
            console.log(this)
        },
        fn2:()=>{
            console.log(this)
        }
    }
    obj.fn()//因为fn被obj调用所以this是 obj
    obj.fn2()//因为是箭头函数，内部没有this,就是外部作用域的this
</script>
</body>
</html>

 

posted @ 2022-07-21 10:11  木子欢儿  阅读(32)  评论(0)  编辑  收藏  举报