关于javascript:所以你认为你知道-JavaScript-吗

作者：Chidume Nnamdi
译者：前端小智
起源：smashingmagazine

点赞再看，养成习惯

本文 GitHub https://github.com/qq44924588… 上曾经收录，更多往期高赞文章的分类，也整顿了很多我的文档，和教程材料。欢送 Star 和欠缺，大家面试能够参照考点温习，心愿咱们一起有点货色。

JavaScript 是一种乏味的语言，咱们都喜爱它，因为它的性质。浏览器是 JavaScript 的次要运行的中央，两者在咱们的服务中协同工作。JS 有一些概念，人们往往会对它漫不经心，有时可能会忽略不计。原型、闭包和事件循环等概念依然是大多数 JS 开发人员绕道而行的艰涩畛域之一。正如咱们所知，无知是一件危险的事件，它可能会导致谬误。

想浏览更多优质文章请[猛戳 GitHub 博客][1]\, 一年百来篇优质文章等着你！

接下来，来看看几个问题，你也能够试试想想，而后作答。

问题 1：浏览器管制台上会打印什么？

var a = 10;
function foo() {console.log(a); // ??
    var a = 20;
}
foo();

问题 2: 如果咱们应用 let 或 const 代替 var，输入是否雷同

var a = 10;
function foo() {console.log(a); // ??
    let a = 20;
}
foo();

问题 3：“newArray”中有哪些元素？

var array = [];
for(var i = 0; i <3; i++) {array.push(() => i);
}
var newArray = array.map(el => el());
console.log(newArray); // ??

问题 4：如果咱们在浏览器控制台中运行 ’foo’ 函数，是否会导致堆栈溢出谬误？

function foo() {setTimeout(foo, 0); // 是否存在堆栈溢出谬误?
};

问题 5: 如果在控制台中运行以下函数，页面 (选项卡) 的 UI 是否依然响应

function foo() {return Promise.resolve().then(foo);
};

问题 6: 咱们是否以某种形式为上面的语句应用开展运算而不导致类型谬误

var obj = {x: 1, y: 2, z: 3};
[...obj]; // TypeError

问题 7：运行以下代码片段时，管制台上会打印什么？

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);
}

问题 8：xGetter() 会打印什么值？

var x = 10;
var foo = {
  x: 90,
  getX: function() {return this.x;}
};
foo.getX(); // prints 90
var xGetter = foo.getX;
xGetter(); // prints ??

答案

当初，让咱们从头到尾答复每个问题。我将给您一个简短的解释，同时试图揭开这些行为的神秘面纱，并提供一些参考资料。

问题 1：undefined

解析：

应用 var 关键字申明的变量在 JavaScript 中会被晋升，并在内存中调配值 undefined。但初始化恰产生在你给变量赋值的中央。另外，var 申明的变量是 [函数作用域的][2]，而let 和const是块作用域的。所以，这就是这个过程的样子：

var a = 10; // 全局应用域
function foo() {
// var a 的申明将被晋升到到函数的顶部。// 比方:var a

console.log(a); // 打印 undefined

// 理论初始化值 20 只产生在这里
   var a = 20; // local scope
}

• • –

问题 2：ReferenceError：a undefined。

解析：

let和 const 申明能够让变量在其作用域上受限于它所应用的块、语句或表达式。与 var 不同的是，这些变量没有被晋升，并且有一个所谓的 临时死区 (TDZ)。试图拜访TDZ 中的这些变量将引发ReferenceError，因为只有在执行达到申明时能力拜访它们。

var a = 10; // 全局应用域
function foo() { // TDZ 开始

// 创立了未初始化的 'a'
    console.log(a); // ReferenceError

// TDZ 完结，'a' 仅在此处初始化，值为 20
    let a = 20;
}

下表概述了与 JavaScript 中应用的不同关键字申明的变量对应的晋升行为和应用域：

• • –

问题 3: [3, 3, 3]

解析：

在 for 循环的头部申明带有 var 关键字的变量会为该变量创立单个绑定（存储空间）。浏览更多对于 [闭包][3] 的信息。让咱们再看一次 for 循环。

// 误会作用域: 认为存在块级作用域
var array = [];
for (var i = 0; i < 3; i++) {
  // 三个箭头函数体中的每个 `'i'` 都指向雷同的绑定，// 这就是为什么它们在循环完结时返回雷同的值 '3'。array.push(() => i);
}
var newArray = array.map(el => el());
console.log(newArray); // [3, 3, 3]

如果应用 let 申明一个具备块级作用域的变量，则为每个循环迭代创立一个新的绑定。

// 应用 ES6 块级作用域
var array = [];
for (let i = 0; i < 3; i++) {
  // 这一次，每个 'i' 指的是一个新的的绑定，并保留以后的值。// 因而，每个箭头函数返回一个不同的值。array.push(() => i);
}
var newArray = array.map(el => el());
console.log(newArray); // [0, 1, 2]

解决这个问题的另一种办法是应用[闭包][4]。

let array = [];
for (var i = 0; i < 3; i++) {array[i] = (function(x) {return function() {return x;};
  })(i);
}
const newArray = array.map(el => el());
console.log(newArray); // [0, 1, 2]

• • –

问题 4 : 不会溢出

解析：

JavaScript 并发模型基于“事件循环”。当咱们说“浏览器是 JS 的家”时我真正的意思是浏览器提供运行时环境来执行咱们的 JS 代码。

浏览器的次要组件包含 调用堆栈 ， 事件循环 **，工作队列 和Web API**。像 setTimeout，setInterval 和Promise这样的全局函数不是 JavaScript 的一部分，而是 Web API 的一部分。JavaScript 环境的可视化模式如下所示：

JS 调用栈是后进先出 (LIFO) 的。引擎每次从堆栈中取出一个函数，而后从上到下顺次运行代码。每当它遇到一些异步代码，如setTimeout，它就把它交给Web API(箭头 1)。因而，每当事件被触发时，callback 都会被发送到工作队列（箭头 2）。

事件循环 (Event loop) 一直地监督工作队列 (Task Queue)，并按它们排队的程序一次解决一个回调。每当 调用堆栈 (call stack) 为空时，Event loop获取回调并将其放入 堆栈 (stack)(箭头 3) 中进行解决。请记住，如果调用堆栈不是空的，则事件循环不会将任何回调推入堆栈。

当初，有了这些常识，让咱们来答复后面提到的问题：

步骤

1. 调用 foo()会将 foo 函数放入 调用堆栈(call stack)。
2. 在解决外部代码时，JS 引擎遇到setTimeout。
3. 而后将 foo 回调函数传递给 WebAPIs(箭头 1) 并从函数返回，调用堆栈再次为空
4. 计时器被设置为 0，因而 foo 将被发送到
   工作队列
   (箭头 2)。
5. 因为调用堆栈是空的，事件循环将抉择 foo 回调并将其推入调用堆栈进行解决。
6. 过程再次反复，堆栈不会溢出。

运行示意图如下所示：

\![图片形容][5]

• • –

问题 5 : 不会响应

解析：

大多数时候，开发人员假如在
事件循环 图中只有一个工作队列。但事实并非如此，咱们能够有多个工作队列。由浏览器抉择其中的一个队列并在该队列中 解决回调
。

在底层来看，JavaScript 中有宏工作和微工作。setTimeout回调是 宏工作 ，而Promise 回调是 微工作。

次要的区别在于他们的执行形式。宏工作在单个循环周期中一次一个地推入堆栈，然而微工作队列总是在执行后返回到事件循环之前清空。因而，如果你以解决条目标速度向这个队列增加条目，那么你就永远在解决微工作。只有当微工作队列为空时，事件循环才会从新渲染页面、

当初，当你在控制台中运行以下代码段

function foo() {return Promise.resolve().then(foo);
};

每次调用 ’foo‘ 都会持续在微工作队列上增加另一个 ’foo‘ 回调，因而事件循环无奈持续解决其余事件（滚动，单击等），直到该队列齐全清空为止。因而，它会阻止渲染。

• • –

问题 6 : 会导致 TypeError 谬误

解析：

[开展语法][6] 和 [for-of][7] 语句遍历 iterable 对象定义要遍历的数据。Array 或 Map 是具备默认迭代行为的内置迭代器。对象不是可迭代的，然而能够通过应用[iterable][8] 和[iterator][9]协定使它们可迭代。

在 Mozilla 文档中，如果一个对象实现了 @@iterator 办法，那么它就是可迭代的，这意味着这个对象 (或者它原型链上的一个对象) 必须有一个带有 @@iterator 键的属性，这个键能够通过常量 Symbol.iterator 取得。

上述语句可能看起来有点简短，然而上面的示例将更有意义：

var obj = {x: 1, y: 2, z: 3};
obj[Symbol.iterator] = function() {

  // iterator 是一个具备 next 办法的对象，// 它的返回至多有一个对象
  // 两个属性：value&done。// 返回一个 iterator 对象
  return {next: function() {if (this._countDown === 3) {
        const lastValue = this._countDown;
        return {value: this._countDown, done: true};
      }
      this._countDown = this._countDown + 1;
      return {value: this._countDown, done: false};
    },
    _countDown: 0
  };
};
[...obj]; // 打印 [1, 2, 3]

还能够应用 [generator][10] 函数来定制对象的迭代行为：

var obj = {x:1, y:2, z: 3}
obj[Symbol.iterator] = function*() {
  yield 1;
  yield 2;
  yield 3;
}
[...obj]; // 打印 [1, 2, 3]

• • –

问题 7 : a, b, c

解析：

for-in循环遍历对象自身的 [可枚举属性][11] 以及对象从其原型继承的属性。可枚举属性是能够在 for-in 循环期间蕴含和拜访的属性。

var obj = {a: 1, b: 2};
var descriptor = Object.getOwnPropertyDescriptor(obj, "a");
console.log(descriptor.enumerable); // true
console.log(descriptor);
// {value: 1, writable: true, enumerable: true, configurable: true}

当初你曾经把握了这些常识，应该很容易了解为什么咱们的代码要打印这些特定的属性

var obj = {a: 1, b: 2}; //a，b 都是 enumerables 属性

// 将 {c：3} 设置为 'obj' 的原型，并且咱们晓得
// for-in 循环也迭代 obj 继承的属性
// 从它的原型，'c' 也能够被拜访。Object.setPrototypeOf(obj, { c: 3});

// 咱们在 'obj' 中定义了另外一个属性 'd'，然而 
// 将 'enumerable' 设置为 false。这意味着 'd' 将被疏忽。Object.defineProperty(obj, "d", { value: 4, enumerable: false});

for (let prop in obj) {console.log(prop);
}
// 打印
// a
// b
// c

• • –

\#\#\#\# 问题 8 : 10

解析：

在全局范畴内初始化 x 时，它成为 window 对象的属性(不是严格的模式)。看看上面的代码:

var x = 10; // global scope
var foo = {
  x: 90,
  getX: function() {return this.x;}
};
foo.getX(); // prints 90
let xGetter = foo.getX;
xGetter(); // prints 10

咱们能够断言：

window.x === 10; // true

this 始终指向调用办法的对象。因而，在 foo.getx() 的例子中，它指向 foo 对象，返回 90 的值。而在 xGetter() 的状况下，this指向 window 对象, 返回 window 中的 x 的值，即10。

要获取 foo.x的值，能够通过应用 Function.prototype.bind 将this的值绑定到 foo 对象来创立新函数。

let getFooX = foo.getX.bind(foo);
getFooX(); // 90

就这样！如果你的所有答案都正确，那么干丑陋。咱们都是通过犯错来学习的。这一切都是为了理解背地的“起因”。

• • –

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug

原文：https://dev.to/aman_singh/so-…

交换

干货系列文章汇总如下，感觉不错点个 Star，欢送 加群 互相学习。

https://github.com/qq44924588…

我是小智，公众号「大迁世界」作者，对前端技术放弃学习爱好者。我会常常分享本人所学所看的干货，在进阶的路上，共勉！

关注公众号，后盾回复 福利，即可看到福利，你懂的。

[1]: https://www.fundebug.com/?utm\_source=xiaozhi