万树IT:5个JavaScript面试问题

　　在IT界，需要大量的JavaScript开发者。如果你的能力能够胜任这一角色，那么你将获得许多换工作和提高薪水的机会。但是在你被公司录取之前，你需要展现你的技术，以便通过面试环节。在这篇文章中，我会为你展示前端面试会被问到的5个典型问题及相关解决方法，这5个问题常被用来测试面试者的JavaScript技能。它们很有意思！

  问题1:范围（Scope）

 

　　思考以下代码：

　　(function(){

 

　　vara=b=5;

 

　　})();

 

　　console.log(b);

 

　　console-复制代码

 

　　控制台（console）会打印出什么？

   解答1：

 

　　答案

 

　　上述代码会打印出5。
 

 

　　这个问题的陷阱就是，在立即执行函数表达式（IIFE）中，有两个命名，但是其中变量是通过关键词var来声明的。这就意味

 

　　着a是这个函数的局部变量。与此相反，b是在全局作用域下的。
 

 

　　这个问题另一个陷阱就是，在函数中他没有使用"严格模式"('usestrict';)。如果严格模式开启，那么代码就会报出未捕

 

　　获引用错误（UncaughtReferenceError）：b没有定义。记住，严格模式要求你在需要使用全局变量时，明确地引用该变量。

 

　　因此，你需要像下面这么写：

 

　　(function(){

 

　　'usestrict';

 

　　vara=window.b=5;

 

　　})();

 

　　console.log(b);

 

　　console-复制代码

 

问题2:创建“原生（native）”方法

 

　　在String对象上定义一个repeatify函数。这个函数接受一个整数参数，来明确字符串需要重复几次。这个函数要求字符串重

 

　　复指定的次数。举个例子：

 

　　console.log('hello'.repeatify(3));
 

 

　　console-复制代码

 

　　应该打印出hellohellohello.

解答2:

 

　　答案

 

　　一种可能的实现如下所示：

 

　　String.prototype.repeatify=String.prototype.repeatify||function(times){

 

　　varstr='';

 

　　for(vari=0;i<times;i++){

 

　　str+=this;

 

　　}

 

　　returnstr;

 

　　};

 

　　console-复制代码

 

　　这个问题测试了开发人员对于javascript中继承的掌握，以及prototype这个属性。这也验证了开发人员是否有能力扩展原生

 

　　数据类型的功能（虽然不应该这么做）。

 

　　这个问题的另一个重点是验证你是否意识到并知道如何避免覆盖已经存在的函数。这可以通过在自定义函数之前判断该函数是

 

　　否存在来做到。

 

　　String.prototype.repeatify=String.prototype.repeatify||function(times){/*codehere*/};

 

　　console-复制代码

 

　　当你需要为旧浏览器实现向后兼容的函数时，这一技巧十分有用。

 

 

问题3:变量提升（Hoisting）

 

　　执行以下代码会有什么结果？为什么？

 

　　functiontest(){

 

　　console.log(a);

 

　　console.log(foo());

 

　　vara=1;

 

　　functionfoo(){

 

　　return2;

 

　　}

 

　　}

 

　　test();

 

　　console.复制代码

解答3：

 

　　答案

 

　　这段代码的执行结果是undefined和2。

 

　　这个结果的原因是，变量和函数都被提升了（hoisted）。因此，在a被打印的时候，它已经在函数作用域中存在（即它已经被

 

　　声明了），但是它的值依然是undefined。换言之，上述代码和以下代码是等价的。

 

　　functiontest(){

 

　　vara;

 

　　functionfoo(){

 

　　return2;

 

　　}

 

　　console.log(a);

 

　　console.log(foo());

 

　　a=1;

 

　　}

 

　　test();

 

　　console-复制代码

 

问题4:this在javascript中是如何工作的

 

　　以下代码的结果是什么？请解释你的答案。

 

　　varfullname='JohnDoe';

 

　　varobj={

 

　　fullname:'ColinIhrig',

 

　　prop:{

 

　　fullname:'AurelioDeRosa',

 

　　getFullname:function(){

 

　　returnthis.fullname;

 

　　}

 

　　}

 

　　};

 

　　console.log(obj.prop.getFullname());

 

　　vartest=obj.prop.getFullname;

 

　　console.log(test());

 

　    console-复制代码


解答4：

 

　　答案

 

　　上面的代码打印出AurelioDeRosa和JohnDoe。原因是在JavaScript中，一个函数的上下文环境，也就是this关键词所引

 

　　用对象，是依赖于函数是如何被调用的，而不是依赖于函数如何b被定义的。

 

　　在第一个console.log()调用中，getFullname()是作为obj.prop的函数被调用的。因此，这里的上下文环境指向后者并且函

 

　　数返回this对象的fullname属性。相反，当getFullname()被赋为test变量的值时，那个语境指向全局对象(window)。这是

 

　　因为，test被隐式设置为全局对象的属性。因此，函数调用返回window的fullname属性值，在此段代码中，这个值是通过第一

 

　　行赋值语句设置的。

 

问题5:call()和apply()

 

　　修复上一个问题，让最后一个console.log()打印出AurelioDeRosa。

 

　　答案

解答5:

 

　　要解决这个问题，可以通过为函数call()或者apply()强制函数调用的上下文环境。如果你不知道call()和apply()之间的区别

 

　　，我推荐阅读文章function.call和function.apply之间有和区别?。在以下代码中，我会用call()，但是在这里，用apply()

 

　　也可以获得相同的结果：

 

　　console.log(test.call(obj.prop));

 

　　console-复制代码

 

　　结论

 

　　在这篇文章中，我们讨论了JavaScript面试者在面试中常被问到的5个典型问题。在实际面试中，真实的问题可能会有所

 

　　不同，但涉及的概念和涵盖的话题通常是非常类似的。我希望你觉得前面那些测试很有趣。如果你不知道其中一些答案，也别

 

　　担心：随着不断学习和经验积累，你就能解决那些问题。