问题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. 身份证校验程序(下)- 零基础入门学习Delphi49

    身份证校验程序 让编程改变世界 Change the world by program [caption id="attachment_2699" align="alig ...

  2. Method Resolution Order – Python类的方法解析顺序

    在支持多重继承的编程语言中,查找方法具体来自那个类时的基类搜索顺序通常被称为方法解析顺序(Method Resolution Order),简称MRO.(Python中查找其它属性也遵循同一规则.)对 ...

  3. Git工作中用法(Gitlab)

    感觉又有了新的认识.  一共有3个仓库,本地自己的,远程自己的,远程主仓库. 为了方便能及时从主仓库获取更新的内容要将远程主仓库也clone下来 git clone upstream url    / ...

  4. zabbix 通过gateway 获取远程主机的JMX信息

    DBHost=192.168.32.55 DBName= zabbix DBUser=zabbixuser DBPassword=zabbixpass StartTrappers=20 MaxHous ...

  5. CentOS 6.5 CodeBlocks::wxWidgets安装与配置

    第一步, #yum install  codeblocks codeblocks-contrib codeblocks-devel 第二步,到官方下载源码包,我下的是wxX11的3.0版的. #tar ...

  6. UESTC_基爷的中位数 2015 UESTC Training for Search Algorithm & String<Problem D>

    D - 基爷的中位数 Time Limit: 5000/3000MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Others) Submi ...

  7. POJ3026(BFS + prim)

    Borg Maze Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 10554   Accepted: 3501 Descri ...

  8. Java中取小数点后两位(四种方法)

    摘自http://irobot.iteye.com/blog/285537 Java中取小数点后两位(四种方法)   一 Long是长整型,怎么有小数,是double吧     java.text.D ...

  9. docker 实战---使用oracle xe作为开发数据库(六)

    oracle作为oltp的大佬,非常多行业应用都会用到它.那么在开发的过程中就不可避免的要使用oracle数据库,oracle数据库的版本号有好多,当中express版本号是免费的开发版.它的主要限制 ...

  10. 基于express框架的应用程序骨架生成器介绍

    作者:zhanhailiang 日期:2014-11-09 本文将介绍怎样使用express-generator工具高速生成基于express框架的应用程序骨架: 1. 安装express-gener ...