JavaScript面试题四

一、解释call(), apply(), 和 bind() 方法的区别？

call(), apply(), 和 bind() 都是JavaScript中用于处理函数内部 this 指向的方法，但它们在使用方式和返回结果上有所不同。

1. call()

call() 方法调用一个具有给定 this 值的函数，以及作为一个数组（或类似数组对象）提供的参数。

语法：

functionName.call(thisArg, arg1, arg2, ...);

• thisArg：在 functionName 函数运行时使用的 this 值。
• arg1, arg2, ...：传递给 functionName 函数的参数。

返回值：

调用函数的返回值。

2. apply()

apply() 方法调用一个具有给定 this 值的函数，以及以一个数组（或类似数组对象）的形式提供的参数。

语法：

functionName.apply(thisArg, [argsArray])

• thisArg：在 functionName 函数运行时使用的 this 值。
• argsArray：一个数组或者类似数组的对象，其中的数组元素将作为单独的参数传给 functionName 函数。

返回值：

调用函数的返回值。

3. bind()

bind() 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。

语法：

function.bind(thisArg[, arg1[, arg2[, ...]]])

• thisArg：当函数被调用时作为 this 的对象。
• arg1, arg2, ...：当目标函数被调用时，传递给目标函数的参数列表（可选）。

返回值：

一个原函数的拷贝，并拥有指定的 this 值和初始参数。

区别

• 返回值：call() 和 apply() 直接调用函数，并返回结果；而 bind() 返回一个新的函数，这个新的函数在被调用时才会执行原函数。
• 参数传递：call() 接收一个参数列表，而 apply() 接收一个参数数组。
• 使用场景：
  • 如果你需要在函数调用时直接得到结果，那么可以使用 call() 或 apply()。
  • 如果你需要创建一个新的函数，并且这个新函数在调用时具有特定的 this 值和初始参数，那么可以使用 bind()。

示例：

function greet(greeting, punctuation) {
  return greeting + ', ' + this.name + punctuation;
}

var obj = {name: 'world'};

console.log(greet.call(obj, 'Hello', '!')); // 输出 "Hello, world!"
console.log(greet.apply(obj, ['Hello', '!'])); // 输出 "Hello, world!"

var boundGreet = greet.bind(obj, 'Hello');
console.log(boundGreet('!')); // 输出 "Hello, world!"

二、解释JavaScript中的事件冒泡和事件捕获？

在JavaScript中，事件冒泡（Event Bubbling）和事件捕获（Event Capturing）是两种事件流机制，它们描述了当一个事件在DOM（Document Object Model）树中发生时，事件是如何从触发该事件的元素传播到其父元素，甚至传播到更上一层的元素的。

1. 事件冒泡（Event Bubbling）

• 定义：事件冒泡是指当某个元素的事件被触发时，会依次触发其父元素、祖先元素（直到DOM树的顶层）的相同事件。
• 流程：首先触发事件源上的事件，然后事件会向上冒泡，依次触发其父元素、祖先元素上的相同事件。
• 示例：假设你有一个<div>元素，它包含了一个<button>元素。如果你点击了这个<button>元素，并且为这个<button>和它的父<div>都注册了点击事件，那么会首先触发<button>的点击事件，然后这个事件会冒泡到<div>，触发<div>的点击事件。
• 阻止冒泡：可以使用event.stopPropagation()方法来阻止事件冒泡。

2. 事件捕获（Event Capturing）

• 定义：事件捕获与事件冒泡相反，它是从DOM树的顶层开始，依次向下触发到具体的元素。
• 流程：首先触发DOM树顶层的元素的事件，然后依次向下，触发其子元素、子元素的子元素上的相同事件，直到触发到事件源。
• 示例：同样以上面的<div>和<button>为例。在事件捕获阶段，会首先触发<div>的点击事件，然后这个事件会传播到<button>，触发<button>的点击事件。
• 设置捕获阶段：在绑定事件监听器时，可以通过第三个参数（布尔值）来设置是否在捕获阶段处理事件。例如，element.addEventListener('click', handler, true)表示在捕获阶段处理点击事件。
• 注意：虽然事件捕获阶段会先触发，但在实际开发中，事件捕获阶段并不常用，因为大多数事件处理函数都是在冒泡阶段执行的。

3. 完整的事件流

在实际的事件处理中，事件流包括三个阶段：捕获阶段、目标阶段和冒泡阶段。但是，通常我们不会明确地在捕获阶段处理事件，而是直接在目标元素上处理事件，或者在冒泡阶段处理事件。如果你同时在捕获阶段和冒泡阶段为同一个元素注册了相同的事件监听器，那么在事件发生时，这两个监听器都会被触发，但捕获阶段的监听器会先被触发。