一个小小的JavaScript题目

今天前Leader在下班前发给我一道JavaScript的题目，看到感觉很不错，而且我开始的时候确实也理解错了，觉得有必要拿出来讲讲，并且为此我也坐错了地铁，哈哈哈~ 　　题目是这样的：

var length = 10;
function fn() {
    console.log(this.length)
};
var obj = {
    length: 5, 
    method: function (fn) {
        fn();
        arguments[0]();
        fn.call(obj, 12);
    }
};
obj.method(fn, 1);

　　请问输出是什么，当时那手机看的时候给出了答案

10 10 5

　　实际上并不是如此，答案是：

10 2 5

　　仔细分析了一下才知道原因，首先介绍一下四种this的类型：

1. 默认绑定
2. 隐式绑定
3. 显示绑定
4. new绑定

其中，默认绑定就是什么都匹配不到的情况下，非严格模式this绑定到全局对象window或者global,严格模式绑定到undefined;隐式绑定就是函数作为对象的属性，通过对象属性的方式调用，这个时候this绑定到对象;显示绑定就是通过apply和call调用的方式;new绑定就是通过new操作符时将this绑定到当前新创建的对象中，它们的匹配有限是是从小到大的。 　　那么现在来解释一下：

obj.method(fn, 1);

　　上述执行其实对应的是下面三条语句：

fn(); 
arguments[0]();
fn.call(obj, 12);

　　通过将函数赋值给函数参数(fn)，然后调用fn,这个时候能匹配到的this类型就是第一条默认绑定，因为实在非严格模式下，所以this绑定的是window，当然首先输出的是10。 　　先解释一下第三个，这个也很简单，因为用了call,所以实际匹配了显示绑定，所以当前this绑定了obj,那么输出的肯定是2。 　　下面着重解释一下第二个，这个我当时理解成和第一次完全一样，但实际并不是的，其实在JavaScript中数组算是一种特殊的对象（关于JavaScript对象的部分，我现在还在写，下一篇就会出的），arguments[0]其实就是通过对象的属性去调用（数组的默认属性类型是数值而普通对象的属性类型是字符串），那么现在其实运用的是规则2，this被绑定到arguments上，而arguments确实存在一个length属性，并且值为2（这个别告诉我你看不出来），所以输出的肯定就是2啦。 　　可见《你不知道的JavaScript》这本书说的很对，之所以会在ES6出现箭头函数，实质就像用词法作用域代替this,因为这个真的特别特别容易误用和让人误解。 　欢迎大家到我的个人博客看看，https://mrerhu.github.io 😄