ES6 箭头函数及this指向详解

快来打我* 2021-12-05 15:13 306阅读 0赞

箭头函数相当于匿名函数，箭头函数简化了函数的定义，比函数表达式更简洁，并且没有自己的[this][]，[arguments][]。。。

##### 基础语法 #####

`(参数1, 参数2, …) => { 函数体 }`

*  最简单的箭头函数（没有形参、函数体语句单一）
    
        let fn = () => console.log('最简写的箭头函数')
        fn() // 最简写的箭头函数
    
    相当于：
    
        var fn = function () { 
            return console.log('最简写的箭头函数')
        }
 *  形参只有一个时 “()” 可以省略；没有参数或多个参数时不能省略
    
        let fn = x => x*x
        console.log(fn(6)) // 36
 *  函数体语句单一 （只有一条语句或者表达式）时可以省略 “\{\}” 否则不能省略
    
        let fn = (x, y, z) => x*y+z
        console.log(fn(9, 9, 6)) // 87

##### 高级语法 #####

*  返回一个对象
    
    语法：`参数=> ({foo: bar})`
    
    函数体加 “()” 括号后返回的是对象字面表达式；当对象的属性名与变量名相同时可以直接使用变量名；属性值为匿名函数时可以直接省略 function 关键字。
    
        let uname = "玉环", age = "青娥", gender = "女"
        let fn = () => ({ 
            uname,
            age,
            gender,
            getName() { 
                return this.gender
            }
        })
        console.log(fn())
    
    执行结果：
    
        { uname: "玉环", age: "青娥", gender: "女", getName: ƒ}
 *  参数设置默认值
    
    语法：`(参数1 = 默认值1,参数2 = 默认值2, …) => {函数体}`
    
        let fn = (x, y = 9, z = 7, a, b) => x*y+z
        console.log(fn(9)) // 88

##### 箭头函数的 this #####

箭头函数没有自己的 this，箭头函数的 this 在定义函数的时候绑定，而不是在执行函数的时候绑定。

HTML:

JS:

// 通过id 获取 元素
    let btn1 = document.getElementById('btn1')
    let btn2 = document.getElementById('btn2')
    // 普通函数
    btn1.onclick = function () { 
        console.log(this) // this 指向调用者 btn1
    }
    // 箭头函数
    btn2.onclick = () => console.log(this) // 当前函数的 this 指向 window

执行结果：

<button id="btn1">普通函数 this</button>
    Window { postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}

*箭头函数的 this 看外层是否有普通函数，如果有，外层函数的 this 就是箭头函数的 this ，如果没有则 this 是 window。*

外层为普通函数

let obj = { 
        uname: '箭头函数 this',
        getName: function () { 
            console.log(this.uname)
            // 在普通函数中定义了箭头函数并将箭头函数作为函数返回值返回
            return () => console.log(this.name)
        }
    }
    // 执行结果：箭头函数 this
    obj.getName() // 普通函数中的 this 指向调用该函数的 obj 对象
    // 执行结果也是：箭头函数 this
    obj.getName()() // 由此可见当前的箭头函数中的 this 也指向 obj 对象

外层为箭头函数

let obj = { 
        uname: '箭头函数 this',
        getName: () => { 
            console.log(this)
        	// 在箭头函数中定义了箭头函数并将箭头作为函数返回值返回
        	return () => console.log(this)
        }
    }
    obj.getName()
    obj.getName()()

执行结果：

#指向 window
    Window { postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
    Window { postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
    Window { postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}

[this]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/this
[arguments]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/arguments