5个JavaScript经典面试题

以下是对于“5个JavaScript经典面试题”的完整攻略：

1. 说一下对JS变量提升的理解

JavaScript 的变量和函数声明都会被提升到代码开头，这种行为被人们称为变量提升（hoisting）。在代码执行前，JavaScript 引擎会处理所有的函数和变量的声明。变量的值会被设置为 undefined，而函数的代码也会被提前进行编译。

下面是一个示例：

console.log(a);
var a = 1;

在这个例子中，虽然变量 a 的声明和赋值发生在同一行，但是在代码执行之前 JavaScript 引擎会将变量声明提前到代码开头。因此控制台输出结果为：undefined。

2. 什么是闭包？请详细说明一下闭包的原理及其优缺点

闭包（Closure）是指有权访问另一个函数作用域中的变量的函数。闭包的关键是要理解作用域链。当 JavaScript 函数被创建时，它将会生成一个作用域链，这个作用域链包含了所有父级作用域的变量对象。

function outer() {
  var a = 1;
  function inner() {
    console.log(a);
  }
  return inner;
}

var fn = outer();
fn(); // 输出结果为 1

在这个例子中，当函数 outer 执行时，函数 inner 被创建并引用了外部函数的变量 a。这个过程中 JavaScript 引擎会自动创建一个作用域链，保证函数 inner 能够访问到变量 a。当函数 outer 执行完成后，变量 a 依然存在于内存中，供函数 inner 调用，这就形成了一个闭包。

闭包的优点：
- 可以读取函数内部的变量
- 让这些变量的值始终保持在内存中，不会随着函数的调用而被销毁
- 可以用于封装变量和方法，防止其被非法篡改

闭包的缺点：
- 会增加内存消耗，容易造成内存泄漏
- 可能会导致性能问题

3. 如何阻止事件冒泡？

在 JavaScript 中，可以使用 stopPropagation() 方法来阻止事件冒泡。

<div onclick="alert('outer');">
  <button onclick="alert('inner');" onclick="event.stopPropagation();">click</button>
</div>

在这个例子中，当用户点击按钮时，一个 click 事件会被触发。但是因为我们阻止了事件冒泡，所以不会触发 div 上的 click 事件。

4. 谈一下对JavaScript的面向对象编程的理解

JavaScript 是一门基于原型继承的面向对象编程语言。在 JavaScript 中，所有的对象都有一个 proto 属性，指向它的原型对象。通过原型链的方式，对象可以继承自原型对象的属性和方法。JavaScript 中没有类的概念，可以通过构造函数来创建对象的实例。对象的本质是由函数来创建的。

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.introduce = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
}

var jack = new Person('Jack', 20);
jack.introduce(); // 输出结果为：Hello, my name is Jack and I am 20 years old.

在这个例子中，我们首先定义了一个构造函数 Person，然后通过 prototype 属性为 Person 的原型对象添加了一个 introduce 方法。通过使用 new 关键字和构造函数来创建对象实例，然后调用对象实例的 introduce 方法。

5. 什么是事件代理？

事件代理（Event Delegation）也被称为事件委托。它是一项能够让我们将事件处理器添加至父级元素，并能够处理所有子级元素上的事件。事件代理的实现原理是通过事件冒泡的机制来实现的。

<ul id="list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

<script>
document.getElementById('list').addEventListener('click', function(event) {
  if (event.target.nodeName === 'LI') {
    console.log(event.target.innerHTML);
  }
});
</script>

在这个例子中，当用户点击列表中的某个元素时，事件会向上传播到 div 元素。我们可以通过 event.target 属性来获取被点击的元素，从而达到事件委托的效果。

以上就是对于“5个JavaScript经典面试题”的完整攻略。