五个典型的JavaScript面试题

问题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));

时间: 2024-08-01 09:30:55

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

五个典型的 JavaScript 面试题

阅读原文 在IT界,需要大量的 JavaScript 开发者.如果你的能力能够胜任这一角色,那么你将获得许多更换工作和提高薪水的机会.但是在你被公司录取之前,你需要展现你的技术实力,以便通过面试环节.在这篇文章中,我会为你展示前端面试会被问到的 5 个典型问题及相关解决方法,这 5 个问题常被用来测试面试者的 JavaScript 技能.它们很有意思! 问题1: 范围(Scope) 思考以下代码: 控制台(console)会打印出什么? 答案 上述代码会打印出5. 这个问题的陷阱就是,在立即执行

【转】典型的JavaScript面试题

问题1: 作用域(Scope) 1 (function() { 2 "use strict"; 3 var a = b = 5; 4 })(); 5 console.log(b); 控制台(console)会打印出什么? 答案: 上述代码会打印出5. 这个问题的陷阱就是,在立即执行函数表达式(IIFE)中,有两个赋值,但是其中变量a使用关键词var来声明.这就意味着a是这个函数的局部变量.与此相反,b被分配给了全局作用域(译注:也就是全局变量). 这个问题另一个陷阱就是,在函数中没有使

Javascript面试题解析

Javascript的一些面试题让很多同学感到头疼,下面就根据兄弟连教育(www.lampbrother.net)毕业学员面试遇到的面试题,给大家做一个简单的分享,希望对初入职场的你们有一些帮助:Javascript面试题解析. 第一题 /* 解析: + 优先级大于 ? 此题等价于: 'Value is true' ? 'Something' : 'Nothing' 所以结果是:'Something' */ var val = 'smtg'; console.log('Value is ' +

javascript 面试题

面试题: 1.下面代码运行结果 var bl = false; $.ajax(url, { //... success: function(){ bl = true; } }); while ( !bl ) { alert( bl ); } alert( bl ); // 结果大家自己去想,这道题是面试官临时写的,简单直接,很好的考察你是否理解javascript中的运行机制,很棒的一道面试题 2.扩展Array原型,编写一个去除数组重复项的方法 // 算法一,两层循环,性能差 Array.pr

【JavsScript】推荐五款流行的JavaScript模板引擎

摘要:Javascript模板引擎作为数据与界面分离工作中最重要一环,受到开发者广泛关注.本文通过开发实例解析五款流行模板引擎:Mustache.Underscore Templates.Embedded JS Templates.HandlebarsJS.Jade templating. 近日一位20岁的开发者Jack Franklin在<The top 5 JavaScript templating engines>一文中向开发者们推荐了5款流行的JavaScript模板引擎.下面为该文的

一道 JavaScript 面试题

有一道 JavaScript 面试题. f = function () { return true; }; g = function () { return false; }; (function() { if (g() && [] == ![]) { f = function () { return false; }; function g() { return true; } } })(); console.info(f()); 首先看前两行 var f = function () {

小猿圈之2019年前端JavaScript面试题(二)

小猿圈前端讲师今天继续给你总结js面试题,前面一篇文章咱们已经有一片js基础部分面试题,今天小猿圈web讲师为你讲解js前端应用设计问题,一定要好好看哦,为了能赢在其他人前面. JavaScript前端应用设计问题 1.解释单向数据流和双向数据绑定. Angular1.x基于双向数据绑定,而React,Vue,Elm等基于单向数据流架构. 2.单向数据流架构在哪些方面适合MVC? MVC拥有大约50年的悠久历史,并已演变为MVP,MVVM和MV*.两者之间的相互关系是什么?如果MVC是架构模式,

一个javascript面试题

javascript面试题代码: <script type="text/javascript"> function fun(x,y){ console.log("log====fun外部x值="+x+",y的值="+y+"下一步输出y的值="+y); console.log(y); return{ fun:function(m){ console.log("x的值="+x); console.l

JavaScript面试题总结系列(五)

5.JavaScript继承 继承是什么 A对象通过继承B对象,就能直接拥有B对象的所有属性和方法. 方式一.原型链继承 核心:子类型的原型为父类型的一个实例对象 // 创建一个父类(注意其本质仍然是一个构造函数) function Parent() { this.name='kevin'; } // 创建父类上的一个共享方法 Parent.prototype.getName = function(){ console.log(this.name); } // 创建子类 function Chi