10 个常见的 JavaScript 面试问题以及如何回答它们

你在准备 JavaScript 面试吗？别再看了！本文将介绍10 个常见的 JavaScript 面试问题以及如何在代码示例和解释的帮助下回答这些问题。

1. JavaScript 中的提升是什么？

提升是 JavaScript 中的一种行为，其中变量和函数声明被移动到其作用域的顶部。这意味着可以在代码中声明变量和函数之前使用它们。但是，只会提升声明，不会提升赋值。

console.log(x); //undefinedvar x = 5;

在这个例子中，变量 x 被提升到范围的顶部，但它的赋值 5 没有，所以当我们尝试记录 x 的值时，它返回undefined。

2. JavaScript 中的闭包是什么？

闭包是一个函数，即使在外部函数返回之后，它也可以访问其外部范围内的变量。

functionouterFunction(x) {returnfunctioninnerFunction() {return x;  }}const myClosure = outerFunction(10);console.log(myClosure()); //10

在此示例中，内部函数可以从其外部范围innerFunction访问变量，因此即使在返回后它也可以返回其值。xouterFunction

3. 讲解JavaScript中的事件冒泡和捕获

事件冒泡和捕获是在 dom 中传播事件的两种方式。

• 事件冒泡是指事件首先被最内层元素捕获和处理，然后传播到外层元素。

• 事件捕获则相反，事件首先由最外层元素处理，然后传播到内部元素。

<divonclick="alert('div')"><ponclick="alert('p')">    Click me!</p></div>

在这个例子中，如果p元素被点击，事件将首先被p元素捕获并alert('p')调用函数。然后，事件将传播到div元素并alert('div')调用该函数。这是事件冒泡的一个例子。如果我们使用useCaptureaddEventListener 中的参数并将其设置为 true，则事件将div首先被元素捕获，然后传播到p元素。这是一个事件捕获的例子。

4. 用 JavaScript 解释“this”

在 JavaScript 中，this指函数是其方法的对象。

const person = {name: "John",sayName: function() {console.log(this.name);  }}person.sayName(); // "John"

在此示例中，this引用person对象，因此调用this.name返回“John”。的值this可以根据调用函数的方式而改变。

5. 解释原型继承在 JavaScript 中的工作原理

在 JavaScript 中，所有对象都有一个原型，它们从中继承属性和方法。当在对象上调用属性或方法但在该对象上找不到时，JavaScript 将在对象的原型上查找它。

const animal = {type: "unknown"}const dog = Object.create(animal);dog.breed = "Golden Retriever";console.log(dog.type); // "unknown"console.log(dog.breed); // "Golden Retriever"

在此示例中，dog对象是使用 创建的Object.create()，它将animal对象设置为其原型。当我们尝试访问对象type上的属性时dog，它并没有在dog对象本身上找到，所以 JavaScript 在原型上寻找它并在对象上找到它animal。

6. 解释setTimeout在 JavaScript 中是如何工作的

setTimeout是一个允许您在经过一定时间后执行函数的函数。

console.log("Started!");setTimeout(() => {console.log("Hello!");}, 2000);console.log("Ended!");

在此示例中，console.log("Started!")立即调用，然后setTimeout使用记录“Hello！”的回调函数调用。和 2000 毫秒的时间。console.log("Ended!")之后立即调用。传递给 setTimeout 的回调函数将在 2 秒后调用。

7.解释setInterval在JavaScript中是如何工作的

setInterval类似于setTimeout，但它会以指定的时间间隔重复执行提供的功能。

let count = 0;const intervalId = setInterval(() => {console.log(`Interval count: ${count}`);  count++;if (count === 5) {clearInterval(intervalId);  }}, 1000);

在此示例中，提供的函数将每 1000 毫秒（1 秒）执行一次，每次计数都会增加 1。该clearInterval函数用于在 5 次迭代后停止间隔。

8. 解释什么是 JavaScript 中的 promise

Promise 是一个对象，表示异步操作的最终完成（或失败）及其结果值。

const promise = newPromise((resolve, reject) => {setTimeout(() => {    resolve("Success!");  }, 2000);});promise  .then(result =>console.log(result))  .catch(error =>console.log(error));

setTimeout在此示例中，使用在 2 秒后调用该函数的函数创建了一个 promise resolve。promise 有两个方法，then和catch，可用于处理已解析的值或发生的任何错误。

9.解释JavaScript中==和===的区别

==（松散相等）在执行任何必要的类型转换后比较两个值是否相等。===（严格相等）在不执行任何类型转换的情况下比较两个值是否相等。

console.log(0==false);//trueconsole.log(0===false);//false

在此示例中，0和false大致相等，因为它们都是假值，但它们并不严格相等，因为0是一个数字并且false是一个布尔值。

通常建议===在 JavaScript 中用于比较，因为它可以帮助防止意外的类型强制转换。

10. 解释JavaScript 中let, var, 和const之间的区别

let和var用于在 JavaScript 中声明变量，但它们的行为略有不同。let变量是块作用域的，这意味着它们只能在声明它们的块内访问。var变量是函数作用域的，这意味着它们可以在它们声明的整个函数内访问。

if (true) {let x = 5;}console.log(x); // ReferenceError: x is not definedCopy code

if (true) {var x = 5;}console.log(x); // 5

const用于声明一个常量变量，这意味着它的值在声明后不能重新赋值。

constx=5;x=10;//TypeError:Assignmenttoconstantvariable

const通常，最佳做法是默认使用并且仅let在需要重新分配变量时才使用。

通过了解这些常见的 JavaScript 面试问题，您将为下一次面试做好充分准备！不要让这些问题让你措手不及，对你的答案充满信心并炫耀你的 JavaScript 知识。