前端面试题（四）

发布时间:2018年03月06日评论数：抢沙发阅读数： 5354

这段代码的运行结果是什么？

var name = 'fulu';
(function() {
    if(typeof name === 'undefined') {
        var name = 'blog';
        console.log('welcome to' + name)
    } else {
        console.log('hi' + name)
    }
})();

这段代码的运行结果是：welcome to blog。在匿名函数内部有一个自己的变量name，并且代码的顺序是先使用，后定义复制。这里就会出现一个变量提升的问题，所以此时我们函数内部的变量是先置顶声明，未赋值，也就是相当于，在匿名函数的内部第一行增加一句代码，var name;这个时候用typeof判断类型，得到的值为'underined'

以下代码输出结果是什么？

function printing() {
    console.log(1);
    setTimeout(function() {
        console.log(2);
    }, 1000);
    setTimeout(function() {
        console.log(3);
    }, 0);
    console.log(4);
}
printing();

输出结果为：1 4 3 2

想知道为什么输出顺序是这样的，我们需要弄了解 setTimeout() 做了什么，以及浏览器的事件循环原理。

浏览器有一个事件循环用于检查事件队列，处理延迟的事件。UI事件（例如点击，滚动等），Ajax回调，以及提供给 setTimeout() 和 setInterval() 的回调都会依次被事件循环处理。

因此，当调用 setTimeout() 函数时，即使延迟的时间被设置为0，提供的回调也会被排队。回调会乖乖地待在队列中，直到指定的时间用完后，它才开始执行动作。

以下代码输出结果是什么？

var a = {},
    b = {key:'b'},   
    c = {key:'c'};
a[b] = 123;
a[c] = 456;
console.log(a[b]);

不少人可能会以为答案是 123 ，但结果是 456 ，为什么会是这样子的呢。

原因是我们忽略了一个知识点：JavaScript在设置对象的属性的时候，会暗中字符串化参数值。

在这里例子中，由于 b 和 c都是对象，把它们设置为对象a的参数，它们都将被转换为 "[object Object]" 。

结果就是， a[b] 和 a[c] 都相当 "[object Object]" ，而后者会将前者的值覆盖。

因此，设置或引用 a[c] 和设置或引用 a[b] 完全相同。所以得到的答案是 456 。

本文作者：DGF 文章标题：前端面试题（四）
本文地址： https://arbays.com/post/77 本文已被百度收录！
版权声明：若无注明，本文皆为“富录-前端开发|web技术博客”原创，转载请保留文章出处。

最新文章：

前端面试题（四）

前端面试题（五）

CSS3 transition 实现抛物线动画