问题1: 范围(Scope)

  思考以下代码:

1
2
3
4
5
(function() {
   var a = b = 5;
})();
 
console.log(b);

  控制台(console)会打印出什么?

  答案

  上述代码会打印出5。

  这个问题的陷阱就是,在立即执行函数表达式(IIFE)中,有两个命名,但是其中变量是通过关键词var来声明的。这就意味着a是这个函数的局部变量。与此相反,b是在全局作用域下的。

  这个问题另一个陷阱就是,在函数中他没有使用"严格模式" ('use strict';)。如果 严格模式开启,那么代码就会报出未捕获引用错误(Uncaught ReferenceError):b没有定义。记住,严格模式要求你在需要使用全局变量时,明确地引用该变量。因此,你需要像下面这么写:

1
2
3
4
5
6
(function() {
   'use strict';
   var a = window.b = 5;
})();
 
console.log(b);

 问题2: 创建 “原生(native)” 方法

  在String对象上定义一个repeatify函数。这个函数接受一个整数参数,来明确字符串需要重复几次。这个函数要求字符串重复指定的次数。举个例子:

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

  应该打印出hellohellohello.

  答案

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

1
2
3
4
5
6
7
8
9
String.prototype.repeatify = String.prototype.repeatify || function(times) {
   var str = '';
 
   for (var i = 0; i < times; i++) {
      str += this;
   }
 
   return str;
};

  这个问题测试了开发人员对于javascript中继承的掌握,以及prototype这个属性。这也验证了开发人员是否有能力扩展原生数据类型的功能(虽然不应该这么做)。

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

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

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

 问题3: 变量提升(Hoisting)

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

1
2
3
4
5
6
7
8
9
10
11
function test() {
   console.log(a);
   console.log(foo());
 
   var a = 1;
   function foo() {
      return 2;
   }
}
 
test();

  答案

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

  这个结果的原因是,变量和函数都被提升了(hoisted)。因此,在a被打印的时候,它已经在函数作用域中存在(即它已经被声明了),但是它的值依然是 undefined。换言之,上述代码和以下代码是等价的。

1
2
3
4
5
6
7
8
9
10
11
12
13
function test() {
   var a;
   function foo() {
      return 2;
   }
 
   console.log(a);
   console.log(foo());
 
   a = 1;
}
 
test();

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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关键词所引用对象,是依赖于函数是如何被调用的,而不是依赖于函数如何b被定义的。

  在第一个console.log()调用中, getFullname()是作为obj.prop的函数被调用的。因此,这里的上下文环境指向后者并且函数返回this对象的 fullname属性。相反,当 getFullname() 被赋为test变量的值时,那个语境指向全局对象(window)。这是因为,test被隐式设置为全局对象的属性。因此,函数调用返回window的fullname属性值,在此段代码中,这个值是通过第一行赋值语句设置的。

 问题5: call() 和 apply()

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

  答案

  要解决这个问题,可以通过为函数call()或者apply()强制函数调用的上下文环境。如果你不知道call()和apply()之间的区别,我推荐阅读文章function.call和function.apply之间有和区别?。在以下代码中,我会用call(),但是在这里,用apply()也可以获得相同的结果:

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

五个典型的JavaScript面试题的更多相关文章

  1. 五个典型的 JavaScript 面试题

    阅读原文 在IT界,需要大量的 JavaScript 开发者.如果你的能力能够胜任这一角色,那么你将获得许多更换工作和提高薪水的机会.但是在你被公司录取之前,你需要展现你的技术实力,以便通过面试环节. ...

  2. 【转】典型的JavaScript面试题

    问题1: 作用域(Scope) (function() { "use strict"; var a = b = 5; })(); console.log(b); 控制台(conso ...

  3. 10道典型的JavaScript面试题

    问题1: 作用域(Scope) 考虑以下代码: (function() { ; })(); console.log(b); 上述代码会打印出5.这个问题的陷阱就是,在立即执行函数表达式(IIFE)中, ...

  4. 5个典型的JavaScript面试题

    在IT界,需要大量的 JavaScript 开发者.如果你的能力能够胜任这一角色,那么你将获得许多换工作和提高薪水的机会.但是在你被公司录取之前,你需要展现你的技术,以便通过面试环节.在这篇文章中,我 ...

  5. 10个典型的JavaScript面试题

    问题1:作用域 考虑如下代码:   JavaScript   1 2 3 4 5 6 7 (function() {   var a = b = 5;   })();   console.log(b) ...

  6. 174道 JavaScript 面试题,助你查漏补缺

    最近在整理 JavaScript 的时候发现遇到了很多面试中常见的面试题,本部分主要是作者在 Github 等各大论坛收录的 JavaScript 相关知识和一些相关面试题时所做的笔记,分享这份总结给 ...

  7. 你应该知道的25道Javascript面试题

    题目来自 25 Essential JavaScript Interview Questions.闲来无事,正好切一下. 一 What is a potential pitfall with usin ...

  8. 互联网中级Javascript面试题

    互联网中级Javascript面试题 1.实现一个函数clone,可以对JavaScript中的5种主要的数据类型(包括Number.String.Object.Array.Boolean)进行值复制 ...

  9. 互联网公司前端初级Javascript面试题

    互联网公司前端初级Javascript面试题 1.JavaScript是一门什么样的语言,它有哪些特点?(简述javascript语言的特点)JavaScript是一种基于对象(Object)和事件驱 ...

随机推荐

  1. pubwin2009服务端 修改系统时间方法

      所有操作都是必须的,包括重启. 1.建议操作前全体结账,并交班---不结帐的话, 改完时间会出问题的.2.停止pubwin2009服务端 3.将C:\WINDOWS\system32\driver ...

  2. ansilbe 入门001、ansible的介绍

    概述: ansible 作为一个配置管理工具.首先我们要“告诉”它管理的是那几台机器啊:而这个信息就在要ansible 的配置文件中体现了.默认情况下ansible的配置文件保存在 /etc/ansi ...

  3. Css 小技巧总结

    相对偏移 指定left top等属性就能够够完美控制一个元素的位置 如: position:relative; left:2px; 今天遇到一个很好玩的问题,当两个并排浮动框,当一个框的长度太大时就会 ...

  4. Google street、Google satellite 、百度地图Iframe切换桥接JS

    1.地图切换方法 注意:父页面访问Iframe页面JS方法需根据Iframe的名字来调用如:named "mapIfame" 即 mapIfame.window.iframeFun ...

  5. 喜欢的女生快被别人抢走了,我敢怎么抢? - V2EX

    喜欢的女生快被别人抢走了,我敢怎么抢? - V2EX 三大定律镇楼: 第一定律:永远不要以为女生对你有好感.第二定律:告白等于见光死.第三定律:秀恩爱分得快.

  6. Qt Creator编译时:cannot open file 'debug\QtGuiEx.exe' File not found

    Qt Creator编译时:cannot open file 'debug\QtGuiEx.exe' File not found 利用Qt Creator编译工程时,出现如题目所示的错误,其中红色部 ...

  7. Spring-Junit4

      Spring整合Junit4测试Service 1. 加入依赖包 使用Spring的测试框架需要加入以下依赖包: JUnit 4 (官方下载:https://github.com/KentBeck ...

  8. mysql配置的讲解 mysql的root密码重置 mysql的登录

    一,MySQL配置的讲解 port  默认mysql端口 socket  用于服务器端和客户端通信的套连接文字 skip-locking 取消文件系统的外部锁 key_buffer_size  索引缓 ...

  9. 使用bootstrap时遇到的问题及解决办法

    1.用到 Glyphicons图标组件时,要注意文件的存放位置,最好在站点下将下好的bootstrap文件夹复制过来,里面的fonts文件夹不要动,使用的时候直接引用bootstrap.css和boo ...

  10. java 时间格式化(2016.04.12 12:32:55)

    输入的时间格式如:2016.04.12 12:32:55所示: 想要获取一定格式的日期,时间的方法 String startString = "2016.04.25 12:25:44&quo ...