3个闭包面试题解析

ad6623 发布于2019-08-26 10:21 / 1632人阅读

摘要：理解闭包形成的原因，理解定义时和运行时的区别。面试题请写出输出结果的解释，第一个输出这个对象。所以第一行输出，面试题最基础题变体一变体二变体三最基础后运行定时器，此时循环已结束，为。变体依次秒输出一个数字，闭包会使用循环的值。

理解闭包形成的原因，理解定义时和运行时的区别。

面试题1

var num = 1;
var o = {
    num: 2,
    add: function() {
        this.num = 3;
        console.log("add", this);
        (function() {
            console.log("closure", this);
            console.log(this.num);
            this.num = 4;
        })();
        console.log(this.num);
    },
    sub: function() {
        console.log(this.num);
    }
}
o.add();
console.log(o.num);
console.log(num);
var sub = o.sub;
sub();

// 请写出输出结果

zyx456的解释：

01，o.add();

第一个console.log("add", this);//输出o这个对象。

在对象方法中，方法中的this指向这个对象。

第一个this.num = 3;

表示：o.num =3;

02，匿名自执行函数中的this，指向全局环境变量。为window。

所以

(function() {

            console.log("closure", this);//这里的this是指向哪里？window

            console.log(this.num);//1

            this.num = 4;//window.num = 4;

})();

匿名自执行函数的this.num为window.num。为1。

this.num = 4;//window.num = 4;

03，

console.log(o.num);//3，因为前面修改了o.num=3；

04，console.log(num);//4

这里，num为window.num。

05，var sub = o.sub;

sub();//4

zyx456：sub为函数。全局函数中的this指向全局环境，也就是window。

所以为window.num为4；

面试题2

function fun(n,o) {
  console.log(o)
  return {
    fun:function(m){
      return fun(m,n);
    }
  };
}
var a = fun(0);  
a.fun(1);  a.fun(2);  a.fun(3);//undefined,?,?,?
var b = fun(0).fun(1).fun(2).fun(3);//undefined,?,?,?
var c = fun(0).fun(1);  c.fun(2);  c.fun(3);//undefined,?,?,?
//问:三行a,b,c的输出分别是什么？

zyx456分析：

var a =fun(0);

首先输出console.log(o);//o未定义，为undefined;

a =  {
   fun:function(m){
   return fun(m,0);
    }
}
a.fun(1);//返回 fun(1,0);=> console.log(0)=>0

a.fun(2);//返回fun(2,0);=>console.log(0)=>0

a.fun(3)//返回fun(3,0);=>console.log(0)=>0

所以：第一行输出undefined，0,0,0

然后看第二行：var b = fun(0).fun(1).fun(2).fun(3);

fun(0)

首先输出console.log(o);//o未定义，为undefined;

等效于

 {

   fun:function(m){
     return fun(m,0);

   }
}

fun(0).fun(1)

return fun(1,0)

fun(1,0)先输出=>console.log(0)=>0

最后return结果为

 {
   fun:function(m){
       return fun(m,1);
    }
}

fun(0).fun(1).fun(2)

等同于

return fun(2,1)

fun(2,1)->输出console.log(1);=>1

最后return结果为

{
 fun:function(m){
       return fun(m,2);
       }
}

fun(0).fun(1).fun(2).fun(3)

等同于

return fun(3,2)

fun(2,1)->输出console.log(2);=>2

最后return结果为

{

 fun:function(m){
        return fun(m,2);
    }
}

所以：第一行输出undefined，0,1,2

最后看第三行：var c = fun(0).fun(1); c.fun(2); c.fun(3);

var c=fun(0).fun(1);

同第二行的b。会输出undefined和0，

c为

 {
    fun:function(m){
      return fun(m,1);
    }
}

c.fun(2)

return fun(2,1)=>输出1。可以看第二行b。

c.fun(3)

return fun(3,1)=>输出1。可以看第二行b。

所以：第一行输出undefined，0,1,1

面试题3

// 最基础题
for(var i = 1; i < 10; i ++){
    setTimeout(function(){
        console.log(i);
    }, 1000);
}

// 变体一
for (var i = 1; i < 10; i++) {
    (function(i){
        setTimeout(function(){
            console.log(i);
        }, i * 1000);
    })(i);
}

// 变体二
for (var i = 1; i < 10; i++) {
    (function(){
        setTimeout(function(){
            console.log(i);
        }, i * 1000);
    })();
}

// 变体三
for (var i = 1; i < 10; i++) {
    (function(){
        setTimeout(function(i){
            console.log(i);
        }, i * 1000);
    })();
}

zyx456：

最基础：

1s后运行定时器，此时for循环已结束，i为10。

变体1：

依次1秒输出一个数字，闭包会使用for循环的值。

依次输出1~9

变体2：

依次每隔1秒输出10,10,10.。。。。

变体3：

在匿名自执行函数中，i未定义。所以输出9个undefined。

云服务器 GPU服务器 js面试闭包如何回答面试题栈面试题笔试面试题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106027.html

一道JS前端闭包面试题解析

摘要：当执行时，对象也有一个闭包，引用了函数及外层函数变量，执行输出结果为能看懂前面的代码执行解释，理解上面的代码执行输出就不会有问题了问题代码A function fun(n,o){ console.log(o); return { fun:function(m){//[2] return fun(m,n);//[1] ...

malakashi 2019-08-19 17:16 评论0 收藏0
新鲜出炉的8月前端面试题

摘要：前言最近参加了几场面试，积累了一些高频面试题，我把面试题分为两类，一种是基础试题主要考察前端技基础是否扎实，是否能够将前端知识体系串联。前言最近参加了几场面试，积累了一些高频面试题，我把面试题分为两类，一种是基础试题: 主要考察前端技基础是否扎实，是否能够将前端知识体系串联。一种是开放式问题: 考察业务积累，是否有自己的思考，思考问题的方式，这类问题没有标准答案。基础题题目的答...

qingshanli1988 2019-08-23 10:47 评论0 收藏0
【Step-By-Step】高频面试题深入解析 / 周刊04

摘要：关于点击进入项目是我于开始的一个项目，每个工作日发布一道面试题。的状态由决定，分成以下两种情况只有的状态都变成，的状态才会变成，此时的返回值组成一个数组，传递给的回调函数。关于【Step-By-Step】 Step-By-Step (点击进入项目) 是我于 2019-05-20 开始的一个项目，每个工作日发布一道面试题。每个周末我会仔细阅读大家的答案，整理最一份较优答案出来，因本人...

youkede 2019-08-23 18:10 评论0 收藏0
一道js闭包面试题的学习

摘要：然后最外层这个函数会返回一个新对象，对象里面有一个属性，名为，而这个属性的值是一个匿名函数，它会返回。最近看到一条有意思的闭包面试题，但是看到原文的解析，我自己觉得有点迷糊，所以自己重新做一下这条题目。闭包面试题原题 function fun(n, o) { // ① console.log(o); return { // ② fun: function(m) ...

plus2047 2019-08-26 12:15 评论0 收藏0