前端 JavaScript 进阶面试题, let,const 和 var 的区别是什么?

Step 1

Q:: let、const 和 var 的区别是什么？

A:: 在 JavaScript 中，let、const 和 var 都用于声明变量，但它们有一些关键区别： 1. 作用域：var 声明的变量具有函数作用域，而 let 和 const 声明的变量具有块作用域。 2. 变量提升：var 声明的变量会被提升到其所在作用域的顶部（但初始化仍在原地），而 let 和 const 不会被提升。 3. 重新赋值：var 和 let 声明的变量可以重新赋值，而 const 声明的变量不能重新赋值。 4. 临时死区：使用 let 和 const 声明的变量在其所在块级作用域内，在声明之前会有一个临时死区（TDZ），在这期间访问变量会抛出错误。

Step 2

Q:: JavaScript 中的闭包是什么？请举例说明。

A:: 闭包是指在 JavaScript 中，一个函数可以访问其定义时所在作用域的变量，即使这个函数在其定义的作用域之外执行。闭包使得函数可以记住并访问其词法作用域，即使函数是在该作用域之外调用的。 举例：

 
function makeCounter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}
const counter = makeCounter();
console.log(counter()); // 1
console.log(counter()); // 2
 

在这个例子中，内部函数形成了一个闭包，可以访问和修改外部函数的局部变量 count。

Step 3

Q:: 什么是事件委托？

A:: 事件委托是一种在父元素上设置事件监听器来管理其子元素的事件的技术。通过利用事件冒泡机制，事件委托可以减少需要绑定事件的元素数量，从而提高性能。 例如：

 
<ul id="parent-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
<script>
document.getElementById('parent-list').addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    console.log('Clicked on: ' + event.target.innerText);
  }
});
</script>
 

在这个例子中，点击每个 li 元素时，事件委托机制会在父元素 ul 上触发事件处理程序，从而减少了对每个 li 元素单独绑定事件的需求。

Step 4

Q:: 什么是 JavaScript 中的原型链？

A:: JavaScript 中的原型链是一种用于实现继承和共享方法的机制。每个对象都有一个内置属性，指向另一个对象（即其原型），通过这个原型对象可以共享属性和方法。原型对象也可以有自己的原型，从而形成一个原型链。 例如：

 
function Person(name) {
  this.name = name;
}
Person.prototype.sayHello = function() {
  console.log('Hello, ' + this.name);
};
const alice = new Person('Alice');
alice.sayHello(); // Hello, Alice
console.log(alice.__proto__ === Person.prototype); // true
 

在这个例子中，Person 的实例 alice 通过原型链访问 Person.prototype 上的方法 sayHello。