一个小小的JavaScript题目

发布时间:2019-08-20 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了一个小小的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绑定到对象;显示绑定就是通过applycall调用的方式;new绑定就是通过new操作符时将this绑定到当前新创建的对象中,它们的匹配有限是是从小到大的。
  那么现在来解释一下:

obj.method(fn, 1);

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

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

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

脚本宝典总结

以上是脚本宝典为你收集整理的一个小小的JavaScript题目全部内容,希望文章能够帮你解决一个小小的JavaScript题目所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。