js 从两道面试题加深理解闭包与箭头函数中的this

 壹 ❀ 引

在本文之前我已经花了两个篇幅专门介绍了JavaScript中的闭包与this，正好今早地铁上看到了两道面试题，试着做了下发现挺有意思，所以想单独写一篇文章来记录解析过程。若你对于闭包与this有所了解，不妨先看自己的理解是否正确，若你对于这部分知识欠缺，还是建议先阅读我前面的两篇文章，链接在下：

一篇文章看懂JS闭包，都要2020年了，你怎么能还不懂闭包？

js 五种绑定彻底弄懂this，默认绑定、隐式绑定、显式绑定、new绑定、箭头函数绑定详解

那么本文开始。

 贰 ❀ 题一

/*非严格模式*/

var name = 'window'

var obj1 = {
    name: '听风是风',
    fn1: function () {
        console.log(this.name)
    },
    fn2: () => console.log(this.name),
    fn3: function () {
        return function () {
            console.log(this.name)
        }
    },
    fn4: function () {
        return () => console.log(this.name)
    }
}
var obj2 = {
    name: '行星飞行'
};

obj1.fn1();//?
obj1.fn1.call(obj2);//?

obj1.fn2();//?
obj1.fn2.call(obj2);//?

obj1.fn3()();//?
obj1.fn3().call(obj2);//?
obj1.fn3.call(obj2)();//?

obj1.fn4()();//?
obj1.fn4().call(obj2);//?
obj1.fn4.call(obj2)();//?

答案就不统一贴了，大家可以自己输出，这里直接开始解析：

第一个输出听风是风，fn1调用前有一个obj1，this为隐式绑定指向obj1，因此读取到obj1的name属性。

第二个输出行星飞行，在介绍this的文章中已经提到，显式绑定优先级高于隐式绑定，所以此时的this指向obj2，读取了obj2的name属性。

第三个输出window，在介绍this一文中我们已经知道箭头函数并没有自己的this，它的this指向由上层执行上下文中的this决定，那为什么上层执行上下文是window呢？

我在介绍JavaScript执行上下文的文章中已经提到，JavaScript中的上下文分为全局执行上下文，函数执行上下文与eval执行上下文（eval不作考虑）。而不管是全局上下文或函数上下文的创建，大致都包含了确认this指向，创建词法环境，创建变量环境三步。

也就是说，this属于上下文中的一部分，很明显对象obj1并不是一个函数，它并没有权利创建自己的上下文，所以没有自己的this，那么它的外层是谁呢？当然是全局window啦，所以这里的this指向window。

第四个输出window，在this介绍一文中已经提到，箭头函数的this由外部环境决定，且一旦绑定无法通过call，apply或者bind再次改变箭头函数的this，所以这里虽然使用了call方法但依旧无法修改，所以this还是指向window。

第五个输出window，这个在闭包一文中已经提到了这个例子，obj1.fn3()()其实可以改写成这样：

var fn = obj1.fn3();
fn();

先执行了fn3方法，返回了一个闭包fn，而fn执行时本质上等同于window.fn()，属于this默认绑定，所以this指向全局对象。

第六个输出行星飞行，同样是先执行fn3返回一个闭包，但闭包执行时使用了call方法修改了this，此时指向obj2，这行代码等同于：

var fn = obj1.fn3();
fn.call(obj2);//显式绑定

第七个输出window，obj1.fn3.call(obj2)()修改一下其实是这样，fn被调用时本质上还是被window调用：

var fn = obj1.fn3.call(obj2);
window.fn();//默认绑定

第八个输出听风是风，fn4同样是返回一个闭包，只是这个闭包是一个箭头函数，所以箭头函数的this参考fn4的this即可，很明显此次调用fn4的this指向obj1。

var fn = obj1.fn4();
window.fn();//无法改变箭头函数this

第九个输出听风是风，改写代码其实是这样，显式绑定依旧无法改变箭头函数this：

var fn = obj1.fn4();
fn.call(obj2);//显式绑定依旧无法改变this

第十个输出行星飞行，前文已经说了，虽然无法直接改变箭头函数的this，但可以通过修改上层上下文的this达到间接修改箭头函数this的目的：

var fn = obj1.fn4.call(obj2);//fn4的this此时指向obj2
window.fn();//隐式绑定无法改变箭头函数this，this与fn4一样

OK，题目一解析完毕，我们接着看题目二，其实没有太大区别，只是两个对象是以构造函数创建罢了。

 叁 ❀ 题二

/*非严格模式*/
var name = 'window'

function Person(name) {
  this.name = name;
  this.fn1 = function () {
    console.log(this.name);
  };
  this.fn2 = () => console.log(this.name);
  this.fn3 = function () {
    return function () {
      console.log(this.name)
    };
  };
  this.fn4 = function () {
    return () => console.log(this.name);
  };
};

var obj1 = new Person('听风是风');
console.dir(obj1);
var obj2 = new Person('行星飞行');

obj1.fn1();
obj1.fn1.call(obj2);

obj1.fn2();
obj1.fn2.call(obj2);

obj1.fn3()();
obj1.fn3().call(obj2);
obj1.fn3.call(obj2)();

obj1.fn4()();
obj1.fn4().call(obj2);
obj1.fn4.call(obj2)();

我们开始解析第二题：

第一个输出听风是风，与第一题一样，这里同样是隐式绑定，this指向new出来的对象obj1。

第二个输出行星飞行，显式绑定，this指向obj2。

第三个你是不是觉得是window，很遗憾，这里的箭头函数指向了obj1，输出听风是风。

哎？不对啊，第一题同样是访问对象中的箭头函数，由于对象没有上下文，所以指向全局window，怎么到这里就不是全局了，new 出来的obj1与我们直接创建的对象有何区别？这就得从new一个函数发生了什么与闭包概念说起，我们先来看个简单的例子1：

function Fn(){
    var name = '听风是风';
    this.sayName = function () {
        console.log(name);
    };
};
var obj = new Fn();
obj.sayName();//？

请问obj.sayName能否访问到构造函数中的name属性？答案是能，这里的sayName方法其实就是一个闭包，它访问了外层函数Fn中的自由变量name，并在new过程中由构造函数Fn返回，我们可以尝试打印obj并查看sayName方法：

可以看到在scopes字段中保存了一个closure闭包，因为它的存在，返回的闭包obj.sayName才能继续访问此变量。

而我们知道new一个构造函数时，其实可以理解为就是新建了一个对象，并将构造器属性以及构造函数原型都赋予给了此对象，并最终返回，我们简单模拟其实是这样，例子2：

function Fn(){
    var name = '听风是风';
    var obj = {};
    obj.sayName = function () {
        console.log(name);
    };
    return obj;
};
var obj = Fn();

同样是打印返回的obj查看sayName方法，可以看到也存在闭包：

那我们回顾到上面的箭头函数，是不是用闭包就能解释通，返回的箭头函数同样保存了构造函数的上下文，而箭头函数的this指向由上层上下文中的this决定，构造函数在new的过程中this指向了obj1，于是箭头函数的this同样也指向了obj1。

让我们回顾一遍什么是闭包？闭包是使用了外层作用域自由变量的函数，很遗憾，JavaScript似乎并未将构造器属性归为自由变量，所以这里并不能用闭包解释，看这个例子3：

function Fn(){
    this.name = '听风是风';
    this.sayName = function () {
        console.log(this.name);
    };
};
var obj = new Fn();
console.log(obj);

我们打印obj对象并查看sayName方法，可以看到并不是一个闭包：

不知道大家有没有理解我想表达的观点，在上面展示的例子1例子2中，返回的函数如果是访问name这样的变量就构成了闭包，但例子3中访问this.name这类构造器属性却不构成闭包。

即便如此，我们通过前面三个小例子已经证明了new操作返回的对象有权访问构造函数内部作用域，同理，对象中的箭头函数一样可访问，这种关系类似于闭包却又不是闭包，希望大家多多体会。（若大家无法理解这一段，可以看下评论区的解释）

花了比较大的篇幅解释第三个，第三个说清楚了后面的都好展开了。

那么第四个输出听风是风，我们改写代码其实是这样：

var arrowFn = obj1.fn2;//箭头函数this指向obj1
arrowFn.call(obj2);//箭头函数this无法直接改变

第五个输出window，与题一相同，返回闭包本质上被window调用，this被修改。

第六个输出行星飞行，返回闭包后利用call方法显式绑定指向obj2。

第七个输出window，返回闭包还是被window调用。

第八个输出听风是风，返回闭包是箭头函数，this同样会指向obj1，虽然返回后也是window调用，但箭头函数无法被直接修改，还是指向obj1。

第九个输出听风是风，箭头函数无法被直接修改。

第十个输出行星飞行，箭头函数可通过修改外层作用域this指向从而达到间接修改的目的。