箭头函数

2019-07-29  本文已影响0人  你喜欢吃青椒吗_c744

箭头函数的引入有两个方面的作用:一是更简短的函数书写,二是对 this的词法解析

基本语法

let func = value => value;
//相当于:
let func = function (value) {
    return value;
};
//如果需要给函数传入多个参数:
let func = (value, num) => value * num;
//如果函数的代码块需要多条语句:
let func = (value, num) => {
    return value * num
};
//要加{ }
//与变量解构结合:
let func = ({value, num}) => ({total: value * num})

// 使用
var result = func({
    value: 10,
    num: 10
})

console.log(result); // {total: 100}

this

箭头函数没有 this,所以需要通过查找作用域链来确定 this 的值。
这就意味着如果箭头函数被非箭头函数包含,this 绑定的就是最近一层非箭头函数的 this。

    <script>
        let a = function (x) {
            this.x = x
            console.log(this.x);// 1
            let c = () => {
                console.log(this.x); //1
                console.log(this); //window
            }
            c()
        }
        a(1);
    </script>

首先,箭头函数里没有x,我用this.x调用的是a里面的。此时,a里面又的this是作用于全局的。所以在箭头函数里console.log(this)打印出来window

参考文章

深入理解ES6中的箭头函数
ES6 系列之箭头函数
JavaScript初学者必看“箭头函数”

上一篇 下一篇

猜你喜欢

热点阅读