JavaScript面试题七

一、什么是事件委托？并简述其优点？

事件委托（又称事件代理）是一种在JavaScript中常用的技术，其核心思想是将子元素的事件处理委托给其父级或更高级别的元素。具体来说，事件委托利用了事件冒泡机制，即当事件在DOM元素上触发时，它会一直冒泡到祖先元素，直到遇到某个元素上绑定了相应的事件处理程序或者到达DOM树的顶层。

事件委托的优点主要体现在以下几个方面：

1. 提高性能：事件委托通过减少事件处理程序的数量，从而节省内存资源。与为每个子元素都绑定事件处理程序相比，只需在它们的共同祖先元素上绑定一个事件处理程序即可。这样可以显著减少内存消耗，提高程序的运行效率。
2. 动态监听：使用事件委托可以自动绑定动态添加的元素。这意味着，当向DOM中动态添加新的子元素时，无需手动为新元素绑定事件处理程序，它们将自动继承父元素（或祖先元素）上的事件处理程序。这大大简化了动态内容的处理逻辑。
3. 简化代码：通过事件委托，可以减少重复的事件绑定代码，简化代码结构。尤其是当有大量子元素需要绑定相同的事件处理程序时，使用事件委托可以显著减少代码量，提高代码的可读性和可维护性。
4. 灵活处理：通过判断事件的目标元素，可以根据需要选择执行不同的操作或处理程序。这样可以更灵活地处理事件，并且不需要为每个子元素都编写独立的事件处理程序。

需要注意的是，虽然事件委托具有诸多优点，但并非适用于所有场景。在某些需要特定处理的事件中，仍需要直接绑定到子元素上，而不适用于委托给祖先元素处理。此外，在使用事件委托时，需要正确判断事件的目标元素，以避免出现意外行为。

二、请解释JavaScript中的箭头函数及其特点？

JavaScript中的箭头函数（Arrow Functions）是一种新的函数表达式，提供了一种更简洁的语法来编写函数。它们使用箭头（=>）而不是function关键字来定义函数。箭头函数有几个显著的特点：

1. 更简洁的语法：箭头函数提供了一种更简洁的函数声明方式，特别是在没有参数或只有一个参数时。例如：

// 常规函数
function sayHello() {
    return "Hello!";
}

// 箭头函数
const sayHello = () => "Hello!";

// 一个参数的箭头函数
const double = (num) => num * 2;
// 更简洁的写法（当只有一个参数时，可以省略括号）
const double = num => num * 2;

2. 不绑定this：箭头函数不会创建自己的this上下文，所以它没有自己的this值。箭头函数内的this值继承自外围函数或全局作用域。这是箭头函数与其他函数的主要区别之一，也是它们经常用于回调函数和事件处理器的原因，因为它们可以访问其包含函数（或全局）的this值。

const obj = {
    value: 1,
    increment: function() {
        // 常规函数
        setTimeout(function() {
            console.log(this.value); // undefined，因为这里的this指向了window或全局对象
        }, 1000);

        // 箭头函数
        setTimeout(() => {
            console.log(this.value); // 1，因为这里的this继承了increment函数的this
        }, 1000);
    }
};
obj.increment();

3. 不能用作构造函数：由于箭头函数没有自己的this值，它们不能用作构造函数，也就是说，你不能使用new关键字与箭头函数一起创建实例。
4. 没有arguments对象：箭头函数不绑定arguments对象。但你可以使用剩余参数（rest parameters）…来代替。

const func = (...args) => {
    for(let arg of args) {
        console.log(arg);
    }
};
func(1, 2, 3); // 输出 1 2 3

5. 不支持super或new.target：由于箭头函数没有自己的this值，它们也不能使用super或new.target。
6. 没有原型（prototype）：由于箭头函数不是构造函数，所以它们没有prototype属性。

总的来说，箭头函数提供了一种更简洁、更易于理解的方式来编写函数，特别是在处理this值时。然而，它们也有一些限制，如不能用作构造函数或不支持arguments对象等。