5个经典的前端面试问题

<spanComic Sans MS';">问题<spanComic Sans MS';">1<spanComic Sans MS';">：<spanComic Sans MS';">Scope<spanComic Sans MS';">作用范围

<spanComic Sans MS';">考虑下面的代码：

<spanComic Sans MS';"> (function() {

<spanComic Sans MS';"> var a = b = 5;

<spanComic Sans MS';">})();

<spanComic Sans MS';">

<spanComic Sans MS';">console.log(b);

<spanComic Sans MS';">什么会被打印在控制台上？

<spanComic Sans MS';">回答

<spanComic Sans MS';">上面的代码会打印<spanComic Sans MS';"> 5<spanComic Sans MS';">。

<spanComic Sans MS';">这个问题的诀窍是，这里有两个变量声明，但<spanComic Sans MS';"> a <spanComic Sans MS';">使用关键字<spanComic Sans MS';">var<spanComic Sans MS';">声明的。代表它是一个函数的局部变量。与此相反，<spanComic Sans MS';">b <spanComic Sans MS';">变成了全局变量。

<spanComic Sans MS';">这个问题的另一个诀窍是，它没有使用严格模式<spanComic Sans MS';"> ('use strict';) <spanComic Sans MS';">。如果启用了严格模式，代码就会引发<spanComic Sans MS';">ReferenceError<spanComic Sans MS';">的错误：<spanComic Sans MS';">B<spanComic Sans MS';">没有定义（<spanComic Sans MS';">b is not defined<spanComic Sans MS';">）。请记住，严格模式，则需要明确指定，才能实现全局变量声明。比如，你应该写：

<spanComic Sans MS';"> (function() {

<spanComic Sans MS';"> 'use strict';

<spanComic Sans MS';"> var a = window.b = 5;

<spanComic Sans MS';">})();

<spanComic Sans MS';">

<spanComic Sans MS';">console.log(b);

<spanComic Sans MS';">问题<spanComic Sans MS';">2<spanComic Sans MS';">：创建“原生”（<spanComic Sans MS';">native<spanComic Sans MS';">）方法

<spanComic Sans MS';">给字符串对象定义一个<spanComic Sans MS';">repeatify<spanComic Sans MS';">功能。当传入一个整数<spanComic Sans MS';">n<spanComic Sans MS';">时，它会返回重复<spanComic Sans MS';">n<spanComic Sans MS';">次字符串的结果。例如：

<spanComic Sans MS';">console.log('hello'.repeatify(3));

<spanComic Sans MS';">应打印<spanComic Sans MS';"> hellohellohello<spanComic Sans MS';">。

<spanComic Sans MS';">回答

<spanComic Sans MS';">一个可能的实现如下所示：

<spanComic Sans MS';">String.prototype.repeatify = String.prototype.repeatify || function(times) {

<spanComic Sans MS';"> var str = '';

<spanComic Sans MS';"> for (var i = 0; i < times; i++) {

<spanComic Sans MS';"> str += this;

<spanComic Sans MS';"> }

<spanComic Sans MS';"> return str;

<spanComic Sans MS';">};

<spanComic Sans MS';">现在的问题测试开发者有关<spanComic Sans MS';">JavaScript<spanComic Sans MS';">继承和<spanComic Sans MS';">prototype<spanComic Sans MS';">的知识点。这也验证了开发者是否知道该如果扩展内置对象（尽管这不应该做的）。

<spanComic Sans MS';">这里的另一个要点是，你要知道如何不覆盖可能已经定义的功能。通过测试一下该功能定义之前并不存在：

<spanComic Sans MS';">String.prototype.repeatify = String.prototype.repeatify || function(times) {/* code here */};

<spanComic Sans MS';">当你被要求做好<spanComic Sans MS';">JavaScript<spanComic Sans MS';">函数兼容时这种技术特别有用。

<spanComic Sans MS';">问题<spanComic Sans MS';">3<spanComic Sans MS';">：声明提升（<spanComic Sans MS';">Hoisting<spanComic Sans MS';">）

<spanComic Sans MS';">执行这段代码，输出什么结果。

<spanComic Sans MS';">function test() {

<spanComic Sans MS';"> console.log(a);

<spanComic Sans MS';"> console.log(foo());

<spanComic Sans MS';"> var a = 1;

<spanComic Sans MS';"> function foo() {

<spanComic Sans MS';"> return 2;

<spanComic Sans MS';"> }

<spanComic Sans MS';">}

<spanComic Sans MS';">

<spanComic Sans MS';">test();

<spanComic Sans MS';">回答

<spanComic Sans MS';">这段代码的结果是<spanComic Sans MS';"> undefined <spanComic Sans MS';">和<spanComic Sans MS';"> 2<spanComic Sans MS';">。

<spanComic Sans MS';">原因是，变量和函数的声明都被提前了（移到了函数的顶部），但变量不分配任何值。因此，在打印变量的时候，它在函数中存在（它被声明了），但它仍然是<spanComic Sans MS';"> undefined <spanComic Sans MS';">。表示换句话说，上面的代码等同于以下内容：

<spanComic Sans MS';">function test() {

<spanComic Sans MS';"> var a;

<spanComic Sans MS';"> function foo() {

<spanComic Sans MS';"> return 2;

<spanComic Sans MS';"> }

<spanComic Sans MS';">

<spanComic Sans MS';"> console.log(a);

<spanComic Sans MS';"> console.log(foo());

<spanComic Sans MS';">

<spanComic Sans MS';"> a = 1;

<spanComic Sans MS';">}

<spanComic Sans MS';">test();

<spanComic Sans MS';">问题<spanComic Sans MS';">4<spanComic Sans MS';">：<spanComic Sans MS';">this<spanComic Sans MS';">在<spanComic Sans MS';">JavaScript<spanComic Sans MS';">中如何工作的

<spanComic Sans MS';">下面的代码会输出什么结果？给出你的答案。

<spanComic Sans MS';">var fullname = 'John Doe';

<spanComic Sans MS';">var obj = {

<spanComic Sans MS';"> fullname: 'Colin Ihrig',

<spanComic Sans MS';"> prop: {

<spanComic Sans MS';"> fullname: 'Aurelio De Rosa',

<spanComic Sans MS';"> getFullname: function() {

<spanComic Sans MS';"> return this.fullname;

<spanComic Sans MS';"> }

<spanComic Sans MS';"> }

<spanComic Sans MS';">};

<spanComic Sans MS';">

<spanComic Sans MS';">console.log(obj.prop.getFullname());

<spanComic Sans MS';">

<spanComic Sans MS';">var test = obj.prop.getFullname;

<spanComic Sans MS';">

<spanComic Sans MS';">console.log(test());

<spanComic Sans MS';">回答

<spanComic Sans MS';">答案是<spanComic Sans MS';">Aurelio De Rosa<spanComic Sans MS';">和<spanComic Sans MS';">John Doe<spanComic Sans MS';">。原因是，在一个函数中，<spanComic Sans MS';">this<spanComic Sans MS';">的行为，取决于<spanComic Sans MS';">JavaScript<spanComic Sans MS';">函数的调用方式和定义方式，而不仅仅是看它如何被定义的。

<spanComic Sans MS';">在第一个<spanComic Sans MS';"> console.log()<spanComic Sans MS';">调用中，<spanComic Sans MS';">getFullname() <spanComic Sans MS';">被调用作为<spanComic Sans MS';">obj.prop<spanComic Sans MS';">对象的函数。所以，上下文指的是后者，函数返回该对象的<spanComic Sans MS';">fullname<spanComic Sans MS';">。与此相反，当<spanComic Sans MS';">getFullname()<spanComic Sans MS';">被分配到<spanComic Sans MS';">test<spanComic Sans MS';">变量时，上下文指的是全局对象（<spanComic Sans MS';">window<spanComic Sans MS';">）。这是因为<spanComic Sans MS';">test<spanComic Sans MS';">是被隐式设置为全局对象的属性。出于这个原因，该函数返回<spanComic Sans MS';">window<spanComic Sans MS';">的<spanComic Sans MS';">fullname<spanComic Sans MS';">，即定义在第一行的那个值。

<spanComic Sans MS';">问题<spanComic Sans MS';">5<spanComic Sans MS';">：<spanComic Sans MS';">call() <spanComic Sans MS';">和<spanComic Sans MS';"> apply()

<spanComic Sans MS';">现在让你解决前一个问题，使最后的<spanComic Sans MS';">console.log() <spanComic Sans MS';">打印<spanComic Sans MS';"> Aurelio De Rosa<spanComic Sans MS';">。

<spanComic Sans MS';">回答

<spanComic Sans MS';">该问题可以通过强制使用<spanComic Sans MS';"> call() <spanComic Sans MS';">或者<spanComic Sans MS';"> apply() <spanComic Sans MS';">改变函数上下文。在下面我将使用<spanComic Sans MS';">call()<spanComic Sans MS';">，但在这种情况下，<spanComic Sans MS';">apply()<spanComic Sans MS';">会输出相同的结果：

<spanComic Sans MS';">console.log(test.call(obj.prop));

<spanComic Sans MS';">结论

<spanComic Sans MS';">在这篇文章中，我们已经讨论了用来测试<spanComic Sans MS';">JavaScript<spanComic Sans MS';">开发者的五个经典问题。面试的概念和涵盖的主题通常是非常相似的。如果你不知道的一些问题的答案，不必担心：学习和经验可以慢慢积累。

<spanComic Sans MS';">如果你有其他一些有趣的问题，不要犹豫，与我们分享。它会帮助很多开发者。

<spanComic Sans MS';">免费领取<spanComic Sans MS';">LAMP<spanComic Sans MS';"><spanComic Sans MS';">兄弟连<spanComic Sans MS';">原创<spanComic Sans MS';">PHP<spanComic Sans MS';"><spanComic Sans MS';">视频教程<spanComic Sans MS';">光盘<spanComic Sans MS';">/<spanComic Sans MS';">《<spanComic Sans MS';"><spanComic Sans MS';"><spanComic Sans MS';">细说PHP<spanComic Sans MS';">》精要版，详情咨询官网客服：

<spanComic Sans MS';">http://www.lampbrother.net

<spanComic Sans MS';">PHPCMS<spanComic Sans MS';">二次开发<spanComic Sans MS';"><spanComic Sans MS';">http://yun.itxdl.cn/online/phpcms/index.php?u=5

<spanComic Sans MS';">微信开发<spanComic Sans MS';"><spanComic Sans MS';"><spanComic Sans MS';">http://yun.itxdl.cn/online/weixin/index.php?u=5

<spanComic Sans MS';">移动互联网服务器端开发<spanComic Sans MS';"><spanComic Sans MS';"><spanComic Sans MS';">http://yun.itxdl.cn/online/server/index.php?u=5

<spanComic Sans MS';">Javascript<spanComic Sans MS';">课程<spanComic Sans MS';"><spanComic Sans MS';"><spanComic Sans MS';">http://yun.itxdl.cn/online/js/index.php?u=5

<spanComic Sans MS';">CTO<spanComic Sans MS';">训练营<spanComic Sans MS';"><spanComic Sans MS';"><spanComic Sans MS';">http://yun.itxdl.cn/online/cto/index.php?u=5

以上就介绍了5个经典的前端面试问题，包括了方面的内容，希望对PHP教程有兴趣的朋友有所帮助。

内容总结

以上是互联网集市为您收集整理的5个经典的前端面试问题全部内容，希望文章能够帮你解决5个经典的前端面试问题所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端