有关箭头函数

箭头函数是 ES6 里面一个简写函数的语法方式

重点

箭头函数只能简写 函数表达式, 不能简写声明式函数

语法:

    (函数的形参) => {函数体内要执行的代码}

箭头函数与普通函数有什么区别?

1. 箭头函数内部没有 this, 箭头函数的 this 是书写时所在位置的 this 值

    在箭头函数定义的位置往上数, 这一行是可以打印出 this 的
   
    这个位置的 this 是 window
    
    所以当前案例中 箭头函数内部的 this 就是 window
    console.log(this)
    const obj = {
        name: '我是对象 obj 的 name 属性',
        fn: function () {
            console.log(this)
        },
        // 这个位置是箭头函数的上一行, 但是这个位置不能打印 this
        fn1: () => {
            // 箭头函数内部的 this 是书写箭头函数的上一行一个可以打印出 this 的位置
            console.log(this)
        }
    }
   
    // obj.fn()
    obj.fn1()
   

2. 箭头函数内部没有 arguments 这个参数集合

    function fn () {
        console.log(arguments)  // 当前这个函数 接收到的参数的集合  打印的是一个伪数组
    }
    fn(1, 2, 3)
    const fn1 = () => {
        console.log(arguments)
    }
    fn1(1, 2, 3)
   

3. 如果形参只有一个的时候, 小括号可以不写, 如果有多个形参或者没有形参的时候, 小括号必须写

    fn: () => {
            console.log('没有参数, 必须写小括号')
        },
        fn1: a => {
            console.log('一个参数, 可以不写小括号, 形参的值为: ', a)
        },
        fn2: (a, b) => {
            console.log('多个参数, 必须写小括号, 形参的值分别为: ', a, b)
        },
   

4. 函数体只有一行代码的时候, 可以不写 {}, 并且会自动 return

    fn3: () => {
            return '我是 fn3 的返回值'
        },
        fn4: (a, b) => a + b
    }
    // obj.fn()
    // obj.fn1(100)
    // obj.fn2(1, 2)
   
    var str = obj.fn3()
    console.log(str)    // '我是 fn3 的返回值'
    var num = obj.fn4(100, 200)
    console.log(num)    // 300
   

箭头函数的简化

    function fn() {}    // 不能简写
    const fn = function () {}  // 可以简写
    const obj = {
        fn: function () {}  // 可以简写
    }
    
    

普通函数简化为 箭头函数1

   const fn = function (a, b) {
        console.log(a, b)
    }
    fn(10, 20)
    const fn1 = (a, b) => {
        console.log(a, b)
    }
    fn1(100, 200)

普通函数简化为 箭头函数2

    const obj = {
        fn: function (a, b) {
            console.log(a + b)
        },
        fn1: (a, b) => {
            console.log(a + b)
        }
    }
    obj.fn(2, 3)
    obj.fn1(20, 30)