箭头函数用法

最新推荐文章于 2024-09-28 19:02:04 发布

weixin_62788356

最新推荐文章于 2024-09-28 19:02:04 发布

阅读量40

点赞数

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

本文链接：https://blog.csdn.net/weixin_62788356/article/details/131543642

版权

文章介绍了ES6中的箭头函数，包括其作为函数简写的形式，如何处理this以及arguments对象，以及在不同情况下的使用示例。箭头函数没有自己的this，它会继承所在环境的this，也没有arguments对象。文章还对比了箭头函数与普通函数的区别。

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

    <script>
        // 箭头函数
        // == 箭头函数是es6语法中针对函数表单式的一种简写
        // == 函数定义有两种方法
        // == 声明式 -无法用箭头函数简写
        // == 赋值式 -可以用箭头函数简写
        // 语法：(形参)=>{要执行的代码}
        // == 调用形式 函数名()
        // == 箭头函数没有自己的this，它的this就是所处环境的this
        // == 箭头函数里面没有arguments对象，普通函数有

        // 1 声明式函数
        // function fn(){
        //     console.log('我不能被改写成箭头函数')
        // }
        // fn()

        // 2 赋值式函数
        // var fun = function(a,b){
        //     console.log(a,b,'我能被改写成箭头函数')
        // }
        // fun(1,2)
        // 改成箭头函数
        // var fun =(a,b)=>{
        //     console.log(a, b, '我是箭头函数')
        // }
        // fun(1,2)

        // 箭头函数
        // var obj = {
        //     name: 'wang',
        //     sayHello: (a) => { console.log(a) }
        // }
        // obj.sayHello(111)

        // 形参只有一个的时候，可以继续简写
        // var obj = {
        //     name: 'wang',
        //     sayHello: a => { console.log(a) }
        // }
        // obj.sayHello(222)

        // 箭头函数
        // var fun1 = a => { return a - 1 }
        // console.log(fun1(333))
        // 当箭头函数的函数执行空间只有return的时候，可以简写
        // var fun1 = a =>  a - 1 
        // console.log(fun1(333))

        // document.onclick = function () {
        //     console.log(this)
        // }

        // document.onclick = () => {
        //     console.log(this)
        // }

        // 普通函数
        function fn() {
            console.log(arguments)
        }
        fn('hello', 123, [1, 2])
        // 箭头函数
        var fn = () => { console.log(arguments) }
        fn('hello', 123, [1, 2])

    </script>