黑马程序员技术交流社区

标题: 8个问题考查你是否真的懂js [打印本页]
作者: 逆风TO    时间: 2020-2-5 10:29
标题: 8个问题考查你是否真的懂js
本帖最后由 逆风TO 于 2020-2-5 10:38 编辑

题目问题1：浏览器控制台上会打印什么？
[JavaScript] 纯文本查看 复制代码
var a = 10;

function foo() {

    console.log(a); // ??

    var a = 20;

}

foo();

解析：
本题考查变量提升。使用var关键字声明的变量会被提升，代码相当于这样：
[JavaScript] 纯文本查看 复制代码
var a = 10;

function foo() {

         var a ;

    console.log(a); // ??

     a = 20;

}

foo();

则输出undefined。

问题2：如果我们使用 let 或 const 代替 var，输出是否相同
[JavaFX] 纯文本查看 复制代码
var a = 10;

function foo() {

    console.log(a); // ??

    let a = 20;

}

foo();  

let与const不存在变量提升，并且有一个暂时死区（TDZ）, 试图访问TDZ中的变量将会引发错误，只有在执行声明语句之后才能访问。
[JavaScript] 纯文本查看 复制代码
var a = 10; // 全局使用域

function foo() { 

// 死区 TDZ 开始



// 创建了未初始化的'a'

    console.log(a); // ReferenceError



// 死区TDZ结束，'a'仅在此处初始化，值为20

    let a = 20;

}

注意：不要觉得let不能变量提升，就可以访问全局作用域中的变量a。 只要访问上面的TDZ中的变量就会发生错误。

问题3："newArray"中有哪些元素？
[JavaScript] 纯文本查看 复制代码
var array = [];

for(var i = 0; i <3; i++) {

 array.push(() => i);

}

var newArray = array.map(el => el());

console.log(newArray); // ??   

解析：

本题考查闭包。在for循环中每一次push一个方法，for循环完成之后，push了三个方法。此时i已经是3。在使用map方法对每一项进行调用，并且返回，而i已经是3。所以返回[3,3,3]

箭头函数不好看，可以将上面的代码写成：

[JavaScript] 纯文本查看 复制代码
var array = [];

for(var i = 0; i <3; i++) {

 array.push(function() {return i});

}

var newArray = array.map(function(item){

    return item();

});

console.log(newArray); // ??   

如果想输出[0,1,2]该如何改？

[JavaScript] 纯文本查看 复制代码
var array = [];

for(let i = 0; i <3; i++) {

 array.push(() => i);

}

var newArray = array.map(el => el());

console.log(newArray); // ??   

      方法2：改成闭包
[JavaScript] 纯文本查看 复制代码
var array = [];

        for(let i = 0; i <3; i++) {

         array = (function(i) {

                 return function() {

                         return i;

                 }

         }(i))

        }

        var newArray = array.map(el => el());

        console.log(newArray); // ??   

问题4：如果我们在浏览器控制台中运行’foo’函数，是否会导致堆栈溢出错误？
[JavaScript] 纯文本查看 复制代码
function foo() {

  setTimeout(foo, 0); // 是否存在堆栈溢出错误?

};  

foo();

解析：

本题考查js运行过程。

一张图解释：


调用foo()会将foo函数放入调用堆栈（call stack）
在处理内部代码时，js引擎遇到setTimeout，将其回调函数foo传递给WebAPI，此时调用堆栈为空
计时器被设置为0，因此回调函数foo将被发送到任务队列
由于调用堆栈是空，所以事件循环将选择foo回调并将其推入堆栈进行处理。（一定等调用堆栈为空，才能调用）
进程再次重复上述过程，堆栈不会溢出。
示意图：

问题5: 如果在控制台中运行以下函数，页面(选项卡)的 UI 是否仍然响应
[JavaScript] 纯文本查看 复制代码
function foo() {

  return Promise.resolve().then(foo);

};

解析：
本题考查宏任务、微任务
在上题中，我们碰到的setTimeout就是一个宏任务，宏任务将在一个循环周期后一次一个被推入调用堆栈被执行。但是本题的promise的then方法是一个微任务，它是在同步任务之后执行的始终，都在单个循环周期里面。
本题中永远都在处理微任务，单个事件循环永远不会结束，永远不会发生响应。也会阻塞其他的事件渲染。

问题6: 我们能否以某种方式为下面的语句使用展开运算而不导致类型错误
[JavaFX] 纯文本查看 复制代码
var obj = { x: 1, y: 2, z: 3 };

[...obj]; // TypeError
解析：
本题考查es6语法
想要被...和for-of遍历，就必须有内置的迭代器或者自定义一个迭代器。Array、Map或Set都是具有默认迭代行为的内置迭代器。但是对象是不可迭代的，上面的代码，会报错。
如果想让对象能够使用...扩展运算符，就必须自定义一个迭代器。就要用到ES6中的Symbol.iterator。对象拥有这个键，就可以指定一个迭代器方法。
方法1: 直接构造迭代器方法，让其返回一个iterator对象
[JavaScript] 纯文本查看 复制代码
var obj = { x: 1, y: 2, z: 3 };

obj[Symbol.iterator] = function() {

        // iterator是一个具有next方法的对象，它的返回至少有一个对象，两个属性：value & done

        return {

        next: function() {

                        if (this.count === 3) {

                                // 设置done为true，表示不能再遍历

                return { value: this.count, done: true };

                        }

            this.count = this.count + 1;

                        return {value: this.count, done: false};

                },

                count: 0

        };

};

console.log([...obj]); // [1, 2, 3]

方法二：使用Generator生成器，它是一种返回迭代器的函数
[JavaScript] 纯文本查看 复制代码
var obj = { x: 1, y: 2, z: 3 };

obj[Symbol.iterator] = function*() {

        yield 1;

    yield 2;

    yield 3;

}

console.log([...obj]); // [1, 2, 3]

}

问题7：运行以下代码片段时，控制台上会打印什么？
[JavaScript] 纯文本查看 复制代码
var obj = { a: 1, b: 2 };

Object.setPrototypeOf(obj, {c: 3});

Object.defineProperty(obj, 'd', { value: 4, enumerable: false });



// what properties will be printed when we run the for-in loop?

for(let prop in obj) {

    console.log(prop);

}

解析：
本题考查：j对象上的访问属性以及fot-in循环
首先为obj设置原型为{c:3}
在obj上添加一个属性d，但是其enumerable:为false，表示d属性不能被遍历
最后for-in循环可以遍历对象本身的可枚举属性以及对象从其原型上继承的属性。
所以打印a、b、c
问题8：xGetter() 会打印什么值？
[JavaScript] 纯文本查看 复制代码
var x = 10;

var foo = {

  x: 90,

  getX: function() {

    return this.x;

  }

};

foo.getX(); // prints 90

var xGetter = foo.getX;

xGetter(); // prints ??

解析：

本题考查this指向。

转自CSDN





欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2