[JavaScript知识库]ES6箭头函数的this指向问题

ES6箭头函数的this指向问题

今天依旧给大家带来的是一道前端的面试题，有关的是ES6中箭头函数的this指向问题，以及它能否被call，apply或者bind方法来改变。

箭头函数的this特性

正式解决问题前，我们需要先来了解下箭头函数的this特性：

1. 箭头函数没有自己的this对象。这里说的没有指的是箭头函数本身无法有效的使用this，它指向的永远是自己的父作用域；
2. 箭头函数的this永远指向其父作用域。在没有规划父级作用域的情况下，执行代码中最高级别的，也就是window；
3. 任何方法都改变不了this，包括call，apply，bind。

到这里问题的答案貌似已经给出来，但是简单的一句话是无法让人信服的，这时候就要代码来佐证。

var num = 1;
var obj = {
    num:2
 };

 var fun = () =>{
     console.log(this.num);
 }
 fun();

在代码中，我定义了一个全局的num，值为1；又在对象obj中定义了一个num属性，值为2；并在箭头函数fun中输出"this.num"。
此时的输出结果毫无疑问：

因为此时调用箭头函数fun，它的指向为window。我们试着使用call方法来改变它的指向：

fun.call(obj);

因为call方法的作用，此时我们期望的结果应该是fun的this指向应该改为obj对象，输出的结果应该为2。

但实际上并不会。在介绍箭头函数的this特性时就已经提到，任何方法都无法改变箭头函数的this指向。

这里就需要再介绍下箭头函数的this了：

1. 箭头函数内部的this是【词法作用域】，由上下文确定；
2. 箭头函数中的this是在“定义函数”的时候绑定，而不是在”执行函数“的时候绑定。

词法作用域：指的是在书写代码时就已经决定了变量的作用域，因此当词法分析器处理代码时会保持作用域不变，JavaScript使用的就是词法作用域

由此可知，无论使用什么方法，只要是在全局中定义的箭头函数，它的this指向只会，也只能是window。
所以刚才的输出代码完全可以看作：

 console.log(window.num);
 window.fun.call(window.obj);

输出的结果只能为1。

完整演示代码：

留下完整演示代码，有需要的小伙伴可以复制下来自己佐证。

<script>
    var num = 1;
    var obj = {
        num: 2
    };

    var fun = () => {
        // console.log(this.num);
        console.log(window.num);
    }
    fun();

    // fun.call(obj);
    window.fun.call(window.obj);
</script>

这里是万物之恋，我们下次再见了！