微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

5个典型的JavaScript面试题(上)

2014-12-06 19:55 前端大全

IT 行业对JavaScript开发者有着很大的需求。如果你具备这种角色所需的知识结构,那么你就有很多的机会来影响你的公司,提高你的工资。但是在你被一家公司雇佣之前,你需要展示自己的技能以便通过它们的面试。在这篇文章中,我将列出5个典型的常用于测试候选人的JavaScript技能的问题。


问题1:作用域


考虑如下代码:

(function() {


var a = b = 5;


})();


console.log(b);


请问控制台上会输出什么?


答案


输出:5


这一题的陷阱是,在函数表达式中有两个赋值,但a是用关键字var 来声明的,这意味着a是局部变量,而b则被赋予为全局变量。


另一个陷阱是,它并没有使用严格模式(use strict)。在函数里面,如果启用了严格模式,代码就会报错:“Uncaught ReferenceError: b is not defined”。请记住,严格模式需要你显式地引用全局作用域,代码应该写成:


(function() {


'use strict';


var a = window.b = 5;


})();


console.log(b);


问题2:创建“内置”方法


给String对象定义一个repeatify方法。该方法接收一个整数参数,作为字符串重复的次数,最后返回重复指定次数的字符串。例如:


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


输出应该是


hellohellohello.


答案


一个可行的做法如下:


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


var str = '';


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


str += this;


}


return str;


};


这题测试开发者对Javascript的继承及原型属性的知识,它同时也检验了开发者是否能扩展内置数据类型的方法。


这里的另一个关键点是,看你怎样避免重写可能已经定义了的方法。这可以通过在定义自己的方法之前,检测方法是否已经存在。


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


当你被问起去扩展一个Javascript方法时,这个技术非常有用。


问题3 :声明提前


下面这段代码的结果是什么?为什么?


function test() {


console.log(a);


console.log(foo());


var a = 1;


function foo() {


return 2;


}}


test();


答案


代码的运行结果:undefined和 2


理由是,变量和函数的声明都被提前至函数体的顶部,而同时变量并没有被赋值。因此,当打印变量a时,它虽存在于函数体(因为a已经被声明),但仍然是undefined。换句话说,上面的代码等同于下面的代码:


function test() {


var a;


function foo() {


return 2;


}


console.log(a);


console.log(foo());


a = 1;


}


test();


问题4:JavaScript中的this


下面代码的运行结果是什么并做解释。


var fullname = 'John Doe';


var obj = {


fullname: 'Colin Ihrig',


prop: {


fullname: 'Aurelio De Rosa',


getFullname: function() {


return this.fullname;


}}};


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


var test = obj.prop.getFullname;


console.log(test());


答案


代码输出:Aurelio De Rosa 和 John Doe


理由是,Javascript中关键字this所指代的函数上下文,取决于函数是怎样被调用的,而不是怎样被定义的。


在第一个console.log(),getFullname()被作为obj.prop对象被调用。因此,当前的上下文指代后者,函数返回这个对象的fullname属性。相反,当getFullname()被赋予test变量,当前的上下文指代全局对象window,这是因为test被隐式地作为全局对象的属性。基于这一点,函数返回window的fullname,在本例中即为代码的第一行。


问题5:call()和apply()


修复前一个问题,让最后一个console.log() 打印输出Aurelio De Rosa.


答案


这个问题可以通过运用call()或者apply()方法强制转换上下文环境。如果你不了解这两个方法及它们的区别,我建议你看看这篇文章What’s the difference between function.call and function.apply?. 下面的代码中我用了call(),但apply()也能产生同样的结果:


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


小结


本文我们讨论了5个在对Javascript开发者面试中常问起的典型问题。实际中的问题会因面试的不同而不同,但是所涉及的概念和主题通常很类似。我希望你在检测自己的知识中获得乐趣。如果你不知道其中一些问题的答案,不要担心:没有什么是学习和试错不能够弥补的。如果你曾在面试中被问过其他的一些有趣的问题,不要犹豫,跟我们分享吧,它会帮助很多的开发者。


英文出处:Aurelio De Rosa。

译文出处:伯乐在线 - XfLoops


/////////////////

1. 『前端大全』分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯,欢迎关注。微信号:FrontDev

2. 点击“阅读原文”,查看本文的网页版。

 
前端大全 更多文章 前端工程师是怎样一种职业 详解Javascript中的Object对象 结合个人经历总结的前端入门方法 前端不为人知的一面–前端冷知识集锦 一份优秀的前端开发工程师简历是怎么样的?
猜您喜欢 达内发掘网络营销潜质 培训学员9K入职百度 Never Stop Hacking! App项目实战之路(三):原型篇 TWITTER设计主管写给初级设计师的一封信 时势 | 把握时代脉搏:顺势为王,让创新转型【势在必得】