问题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. [TYVJ] P1049 最长不下降子序列

    最长不下降子序列 描述 Description 求最长不下降子序列的长度   输入格式 InputFormat 第一行为n,表示n个数第二行n个数   输出格式 OutputFormat 最长不下降子 ...

  2. SQL Server索引设计 <第五篇>

    SQL Server索引的设计主要考虑因素如下: 检查WHERE条件和连接条件列: 使用窄索引: 检查列的选择性: 检查列的数据类型: 考虑列顺序: 考虑索引类型(聚集索引OR非聚集索引): 一.检查 ...

  3. 关于MySql链接url参数的设置

    jdbc.driverClassName=com.mysql.jdbc.Driverjdbc.url=jdbc:mysql://localhost:3306/database?useUnicode=t ...

  4. UESTC_秋实大哥の恋爱物语 2015 UESTC Training for Search Algorithm & String<Problem K>

    K - 秋实大哥の恋爱物语 Time Limit: 5000/2000MS (Java/Others)     Memory Limit: 32000/32000KB (Java/Others) Su ...

  5. 解决mongodb连接失败问题

    错误提示: MongoDB shell version: 2.4.9 connecting to: test Mon Mar  3 23:45:09.491 Error: couldn't conne ...

  6. javac命令详解(上)

    摘自http://blog.csdn.net/hudashi/article/details/7058998   javac命令详解(上)                             ja ...

  7. Zookeeper 4、Zookeeper开发

    1.登录Zookeeper客户端 #通过zkCli.sh可以登录到Zookeeper $ cd /usr/local/zookeeper-3.4.6/bin $ ./zkCli.sh #如果显示下面这 ...

  8. PHP MySQL Insert Into 之 Insert

    向数据库表插入数据 INSERT INTO 语句用于向数据库表添加新记录. 语法 INSERT INTO table_name VALUES (value1, value2,....) 您还可以规定希 ...

  9. textField 判断输入长度限制

    - (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementS ...

  10. 【Oracle】删除重复记录

    --复习autotrace: SET AUTOTRACE OFF --不生成AUTOTRACE 报告,这是缺省模式 SET AUTOTRACE ON EXPLAIN --AUTOTRACE只显示优化器 ...