清楚明白之ES6中箭头函数和this关键字

es6中箭头函数和this关键字

es6新语法箭头函数，类似其它语言中的lamda表达式

      形式 (参数) => { exp }

const aaa = (arg) => {console.log(arg)}
// 当只有一个参数的时候也可以取消括号
const bbb = arg1 => {console.log(arg1)}
// 当exp只有一句的时候也可以取消大括号
// 并且此时的箭头函数的返回值就是第一句语句执行的返回值
const ccc = arg2 => console.log(arg2)
const ddd = arg3 => arg3 * arg3 // 箭头函数的返回值就是arg3的平方
// 多行代码的时候,可以通过return关键字返回值
const eee = (arg4, arg5) => {
    var sum = arg4 + arg5
    return sum
}

lamda函数表达式中this和普通的this指向不同

普通函数中this关键字的指向

    普通函数中this关键字的执行是指向函数的调用者，意思就是this的指向是在函数定义的时候不能确定的，在调用的时候才能被明确：

function foo() {
    console.log(this)
}

foo() // 会输出window, 在浏览器里面执行这一句，是window调用的所以会输出// 也可以使用window.foo()调用
window.foo()

    对象内部定义函数然后使用对象调用的时候，this指向对象本身:

var obj = {
    name: 'waxxd'
    foo1: function(){
        console.log(this)
    }
}
obj.foo1() // 会输出o

    那么代码window.obj.foo1()这样调用的时候this会指向谁呢？答案还是obj,不会是window,this在普通函数中被调用的时候指向的是它的上一级对象,自然还是obj

箭头函数中的this关键字

      箭头函数中的this指向的是上级作用域中的this,talk is cheaper, show me the code直接先上代码再解释

const obj = {
    // 1.this -> window
    _this: this         
    aaa() {
        // 2。this ->  obj
        let obj = this
        setTimeout(function() {
            setTimeout(function() {
                // 3.this window
                console.log(this)
            })
            setTimeout(() => {
                // 4.this window
                console.log(this)
            })
        })

        setTimeout(() => {
            setTimeout(function() {
                // 5.this window
                console.info(this)
            })
            setTimeout(() => {
                // 6.this obj
                console.info(this)
            })
        })
    }
}
obj.aaa()

1. this 这个this指向obj无须解释;

2. this 函数作用域中的this指向调用它的对象符合上面讲的普通this的原则;

3. this setTimeout()这个函数里面的回调函数的调用者在浏览器里面本身就是window,不属于我们调用的,所以this指向window;

4. .this 按照前面解释，箭头函数中的this指向上级作用域中的this,而它上级作用域中的this为最外层setTimeout中的this,而这个this指向window所以第四个this也指向window;

5. this 前面说了，setTimeout里面普通的回调函数的调用者就是window；

6. this 最里层的箭头函数的this指向外层的函数作用域中的this,而外层函数依旧是一个箭头函数，所以这个this继续指向更外层的作用域中的this,那自然就是aaa函数中this的指向，就是obj;

   总结一句: 箭头函数的this指向了它外层的作用域中的this,而普通函数中的this指向的是它的调用者