一个小小的JavaScript题目

zzbo 发布于2019-08-21 11:27 / 294人阅读

摘要：先解释一下第三个，这个也很简单，因为用了所以实际匹配了显示绑定，所以当前绑定了那么输出的肯定是。可见你不知道的这本书说的很对，之所以会在出现箭头函数，实质就像用词法作用域代替因为这个真的特别特别容易误用和让人误解。

　今天前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的类型：

默认绑定

隐式绑定

显示绑定

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 ?

海外云主机 GPU服务器一个小小贪心算法的题目 html5的题目一个Javascript

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86725.html

一道小小的题目引发对javascript支持正则表达式相关方法的探讨

摘要：返回值返回值根据传入的参数类型和规则的不同，返回的内容不同，但总体来说，它是返回一个对象，而不是索引，如果没匹配到任何符合条件的字符串，则返回。本文发布在我的博客一道小小的题目引发对javascript支持正则表达式相关方法的探讨许可协议: 署名-非商业性使用-禁止演绎 4.0 国际转载请保留原文链接及作者。以前对于正则是非常惧怕的，因为看不懂和学不会。但最近项目中频繁的...

Scholer 2019-08-21 17:46 评论0 收藏0
从一道面试题谈谈函数柯里化(Currying)

摘要：忍者秘籍一书中，对于柯里化的定义如下在一个函数中首先填充几个参数然后再返回一个新函数的技术称为柯里化。回到我们的题目本身，其实根据测试用例我们可以发现，函数的要求就是接受单一函数，例如但是与柯里化不同之处在于，柯里化返回的一个新函数。　　欢迎大家再一次来到我的文章专栏:从面试题中我们能学到什么，各位同行小伙伴是否已经开始了悠闲的春节假期呢?在这里提前祝大家鸡年大吉吧~哈哈，之前有人说...

cppprimer 2019-08-20 13:55 评论0 收藏0
前端经典文章

摘要：上周末看这篇文章时，偶有灵光，所以，分享出来给大家一起看看前端面试四月二十家前端面试题分享请各位读者添加一下作者的微信公众号，以后有新的文章，将在微信公众号直接推送给各位，非常感谢。前端切图神器 avocode 有了这个神器，切图再也腰不酸，腿不疼了。这一次，彻底弄懂 JavaScript 执行机制本文的目的就是要保证你彻底弄懂javascript的执行机制，如果读完本文还不懂，...

lowett 2019-08-22 13:58 评论0 收藏0
前端系列——查找字符串B的字符任意一种组合是否是字符串A的子串

摘要：例如，，则的其中一种组合是的子串，然后返回。如果从题目给出的例子来穷举，一共种组合，很容易穷举出来，但是字符串长度非常大的时候，怎么办呢所以，穷举的办法被我排除了。题目要求这道算法题在前端面试中可能遇到，据说某条出过这题。查找字符串B的字符任意一种组合是否是字符串A的子串。例如 A=abc123，B=cba，则B的其中一种组合abc是A的子串，然后返回true。算法思路题目的...

zengdongbao 2019-08-23 12:08 评论0 收藏0