JavaScript는 그 성격 때문에 우리 모두가 좋아하는 재미있는 언어입니다. 브라우저는 JavaScript가 주로 실행되는 곳이며 두 가지가 우리 서비스에서 함께 작동합니다. JS에는 사람들이 가볍게 받아들이고 때로는 무시하는 경향이 있는 몇 가지 개념이 있습니다. 프로토타입, 클로저, 이벤트 루프와 같은 개념은 여전히 대부분의 JS 개발자가 우회하는 모호한 영역 중 하나입니다. 우리가 알고 있듯이 무지는 위험한 것이며 실수로 이어질 수 있습니다.
더 많은 고품질 기사를 읽고 싶다면 매년 수백 개의 고품질 기사가 여러분을 기다리고 있습니다!
다음으로 몇 가지 질문을 살펴보고 이에 대해 생각해 보고 답해 보세요.
var a = 10;
function foo() {
console.log(a); // ??
var a = 20;
}
foo();var a = 10;
function foo() {
console.log(a); // ??
let a = 20;
}
foo();var array = [];
for(var i = 0; i <3; i++) {
array.push(() => i);
}
var newArray = array.map(el => el());
console.log(newArray); // ??function foo() {
setTimeout(foo, 0); // 是否存在堆栈溢出错误?
};function foo() {
return Promise.resolve().then(foo);
};var obj = { x: 1, y: 2, z: 3 };
[...obj]; // TypeErrorvar 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);
}var x = 10;
var foo = {
x: 90,
getX: function() {
return this.x;
}
};
foo.getX(); // prints 90
var xGetter = foo.getX;
xGetter(); // prints ??이제 각 질문에 처음부터 끝까지 답변해 보겠습니다. 이러한 행동을 이해하고 몇 가지 참고 자료를 제공하면서 간단한 설명을 드리겠습니다.
정의되지 않음
undefined使用var关键字声明的变量在JavaScript中会被提升，并在内存中分配值undefined。 但初始化恰发生在你给变量赋值的地方。 另外，var声明的变量是函数作用域的，而let和const是块作用域的。 所以，这就是这个过程的样子：
var a = 10; // 全局使用域
function foo() {
// var a 的声明将被提升到到函数的顶部。
// 比如:var a
console.log(a); // 打印 undefined
// 实际初始化值20只发生在这里
var a = 20; // local scope
}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;
}[3, 3, 3]
在for循环的头部声明带有var关键字的变量会为该变量创建单个绑定（存储空间）。 阅读更多关于闭包的信息。 让我们再看一次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]解决这个问题的另一种方法是使用闭包。
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]JavaScript并发模型基于“事件循环”。 当我们说“浏览器是 JS 的家”时我真正的意思是浏览器提供运行时环境来执行我们的JS代码。
浏览器的主要组件包括调用堆栈，事件循环，任务队列和Web API。 像setTimeout，setInterval和Promise这样的全局函数不是JavaScript的一部分，而是 Web API 的一部分。
JS调用栈是后进先出(LIFO)的。引擎每次从堆栈中取出一个函数，然后从上到下依次运行代码。每当它遇到一些异步代码，如setTimeout，它就把它交给Web API(箭头1)。因此，每当事件被触发时，callback분석:
var 키워드를 사용하여 선언된 변수는 JavaScript로 승격되어 메모리에 저장됩니다. 값을 할당합니다. 정의되지 않음. 그러나 초기화는 변수에 값을 할당하는 위치에서 정확하게 발생합니다. 또한 var로 선언된 변수는 함수 범위이고, let 및 const는 블록 범위입니다. 따라서 프로세스는 다음과 같습니다.
function foo() {
return Promise.resolve().then(foo);
};ReferenceError: 정의되지 않음. 설명:let 및 const 선언을 사용하면 변수의 범위를 해당 변수가 사용되는 블록, 문 또는 표현식으로 제한할 수 있습니다. 방법. var와 달리 이러한 변수는 승격되지 않으며 소위 임시 데드존(TDZ)이 있습니다. TDZ에서 이러한 변수에 액세스하려고 하면 ReferenceError가 발생합니다. 실행이 선언에 도달할 때만 액세스할 수 있기 때문입니다. 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][3, 3, 3]분석: for 헤더에 선언됨 loop var 키워드가 있는 변수는 해당 변수에 대한 단일 바인딩(저장 공간)을 만듭니다. 클로저에 대해 자세히 알아보세요. for 루프를 다시 살펴보겠습니다.
var obj = {x:1, y:2, z: 3}
obj[Symbol.iterator] = function*() {
yield 1;
yield 2;
yield 3;
}
[...obj]; // 打印 [1, 2, 3]let을 사용하여 블록 범위가 있는 변수를 선언하면 루프 반복마다 새 바인딩이 생성됩니다. 🎜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
// csetTimeout, setInterval 및 Promise와 같은 전역 함수는 JavaScript의 일부가 아니라 Web API의 일부입니다. 🎜🎜JS 호출 스택은 LIFO(후입선출)입니다. 엔진은 한 번에 하나의 함수를 스택에서 꺼내어 위에서 아래로 순차적으로 코드를 실행합니다. setTimeout과 같은 비동기 코드를 발견할 때마다 Web API(화살표 1)에 전달합니다. 따라서 이벤트가 트리거될 때마다 콜백이 작업 대기열로 전송됩니다(화살표 2). 🎜🎜🎜이벤트 루프🎜는 작업 대기열을 지속적으로 모니터링하고 대기열에 있는 순서대로 콜백을 한 번에 하나씩 처리합니다. 🎜call stack🎜이 비어 있을 때마다 🎜Event 루프🎜는 콜백을 가져와 처리를 위해 🎜stack🎜(화살표 3)에 넣습니다. 호출 스택이 비어 있지 않으면 🎜 이벤트 루프가 콜백을 스택에 푸시하지 않습니다 🎜. 🎜🎜이제 이러한 지식을 바탕으로 앞서 언급한 질문에 답해 보겠습니다. 🎜foo()会将foo函数放入调用堆栈(call stack)。setTimeout。foo回调函数传递给WebAPIs(箭头1)并从函数返回，调用堆栈再次为空foo将被发送到任务队列foo回调并将其推入调用堆栈进行处理。大多数时候，开发人员假设在事件循环
在底层来看，JavaScript中有宏任务和微任务。setTimeout回调是宏任务，而Promise回调是微任务。
主要的区别在于他们的执行方式。宏任务在单个循环周期中一次一个地推入堆栈，但是微任务队列总是在执行后返回到事件循环之前清空。因此，如果你以处理条目的速度向这个队列添加条目，那么你就永远在处理微任务。只有当微任务队列为空时，事件循环才会重新渲染页面、
现在，当你在控制台中运行以下代码段
function foo() {
return Promise.resolve().then(foo);
};每次调用'foo'都会继续在微任务队列上添加另一个'foo'回调，因此事件循环无法继续处理其他事件（滚动，单击等），直到该队列完全清空为止。 因此，它会阻止渲染。
展开语法 和 for-of 语句遍历iterable对象定义要遍历的数据。Array 或Map 是具有默认迭代行为的内置迭代器。对象不是可迭代的，但是可以通过使用iterable和iterator协议使它们可迭代。
在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 函数来定制对象的迭代行为：
var obj = {x:1, y:2, z: 3}
obj[Symbol.iterator] = function*() {
yield 1;
yield 2;
yield 3;
}
[...obj]; // 打印 [1, 2, 3]for-in循环遍历对象本身的可枚举属性以及对象从其原型继承的属性。 可枚举属性是可以在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在全局范围内初始化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
就这样！ 如果你的所有答案都正确，那么干漂亮。 咱们都是通过犯错来学习的。 这一切都是为了了解背后的“原因”。
推荐教程：《JS教程》
위 내용은 JavaScript 기초를 테스트하기 위한 8가지 질문의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
