最后
编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
}
console.log(blockVar); // ReferenceError: blockVar is not defined，因为 blockVar 只在 if 语句的块级作用域内存在
### 21.变量提升是什么？
JavaScript 中的变量提升是指在代码执行前，JavaScript 引擎会将变量的声明（而非其赋值）移动到它们所在作用域的最顶部。这意味着即使变量在代码中出现在后面，其声明在逻辑上也被视为在作用域的开始处。然而，变量的赋值操作不会被提升，所以在声明和赋值之间引用变量会得到 undefined。
### 22.什么是暂时性死区?
在 JavaScript 中，"暂时性死区"是 ES6 引入 let 和 const 关键字后所引入的一个概念。在 ES5 及之前的版本中，我们使用 var 关键字来声明变量。var 声明的变量存在变量提升的现象，即无论变量在何处声明，它都会被提升到其所在作用域的最顶部。但是，变量的赋值操作并不会被提升，因此如果在声明之前就访问这个变量，它的值是 undefined。然而，在 ES6 中，let 和 const 声明的变量不存在变量提升，而是进入了暂时性死区。这意味着在声明之前的任何代码都不能访问这个变量，如果尝试访问，JavaScript 引擎会抛出一个引用错误。
例如：
console.log(x); // ReferenceError: x is not defined
let x = “hello”;
在这个例子中，变量 x 在声明之前就被访问了，所以抛出了一个引用错误。在变量 x 被声明之前的区域，就是 x 的暂时性死区。
**`总结：`**
暂时性死区的本质就是，只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。
### 23.Javascript中 什么是未声明变量?什么是未定义?有什么区别？
**未声明变量（Undeclared Variables）**
未声明变量指的是在代码中使用了一个从未声明过的变量。在 JavaScript 中，如果你尝试访问一个未声明的变量，将会导致一个`ReferenceError`。这是因为 JavaScript 引擎在当前的执行上下文中找不到这个变量的声明。
**`例如：`**
console.log(myVariable); // 抛出 ReferenceError: myVariable is not defined
在这个例子中，`myVariable`从未被声明，因此当尝试打印其值时，JavaScript 引擎会抛出一个错误。
**未定义变量（Undefined Variables）**
未定义变量是指已经声明但未被赋值的变量。在 JavaScript 中，声明但未初始化的变量会被自动赋予`undefined`值。未定义变量不会导致运行时错误，但如果你尝试使用它们的值（比如进行数学运算），可能会得到不期望的结果。
**`例如：`**
var anotherVariable;
console.log(anotherVariable); // 输出 undefined
在这个例子中，`anotherVariable`被声明了，但由于没有赋值，所以它的值是`undefined`。尝试访问它的值不会导致错误，但你会得到`undefined`。
**区别**
1. **`错误类型`**：未声明变量在尝试访问时会抛出`ReferenceError`，而未定义变量则不会抛出错误，其值是`undefined`。
2. **`存在性`**：未声明变量在当前的执行上下文中是不存在的，而未定义变量是存在的，只是它的值是`undefined`。
3. **`作用域`**：未声明的变量可能会导致全局作用域污染，因为它们可能意外地成为全局变量。而未定义变量则只在其声明的作用域内有效。
4. **`可预测性`**：未定义变量通常比未声明变量更可预测，因为你可以明确地知道变量的存在，只是它的值未知（即`undefined`）。而未声明变量则可能导致程序突然中断，因为访问它们会抛出错误。
### 24.说说 JavaScript 中 new 操作符具体干了什么？
在 JavaScript 中，`new`操作符用于创建一个用户自定义的对象类型的实例或具有构造函数的内置对象的实例。以下是`new`操作符在 JavaScript 中执行的主要步骤：
1. **`创建一个新的空对象`**：首先，`new`操作符会创建一个新的空对象。这个对象会继承自构造函数的`prototype`对象。
2. **`设置原型链`**：新创建的对象的`__proto__`属性（也就是其内部原型）会被设置为构造函数的`prototype`对象。这使得新对象能够访问构造函数`prototype`对象上的所有属性和方法。
3. **`将构造函数的作用域赋给新对象`**（即`this`指向新对象）：然后，`new`操作符会将构造函数的`this`关键字绑定到新创建的对象上。这样，构造函数中定义的任何属性和方法都会添加到新对象上。
4. **`如果构造函数返回非对象值，则返回新对象`**：如果构造函数没有显式地返回一个对象，那么`new`操作符会返回新创建的对象。如果构造函数返回了一个对象，那么`new`操作符会返回这个对象，而不是新创建的对象。这提供了一种可以覆盖`new`操作符默认行为的机制。
### 25.对象的几种创建方式？
在 JavaScript 中，有多种创建对象的方式。以下是其中的一些主要方法：
1. **字面量方式**：
这是创建对象的最直接方式，它使用花括号 `{}` 来定义对象的属性和方法。
let obj = {
name: “John”,
age: 30,
sayHello: function () {
console.log("Hello, my name is " + this.name);
},
};
2. **构造函数方式**：
构造函数是一个特殊的函数，用于初始化新创建的对象。JavaScript 中的构造函数通常以大写字母开头，以区别于其他函数。
function Person(name, age) {
this.name = name;
this.age = age;
this.sayHello = function () {
console.log("Hello, my name is " + this.name);
};
}
let person = new Person(“John”, 30);
3. **Object.create() 方法**：
`Object.create()` 方法创建一个新对象，使用现有的对象来提供新创建的对象的**proto**。
let personProto = {
sayHello: function () {
console.log("Hello, my name is " + this.name);
},
};
let person = Object.create(personProto);
person.name = “John”;
person.age = 30;
4. **class 语法（ES6）**：
在 ES6 中，引入了 class 关键字，使得对象的创建更加面向对象和易于理解。然而，需要注意的是，JavaScript 中的 class 实际上只是语法糖，它的底层仍然是基于原型链的。
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHello() {
console.log("Hello, my name is " + this.name);
}
}
let person = new Person(“John”, 30);
### 26.面向对象的特性有哪些，及三大特点？
**面向对象的三大特性是`封装`、`继承`、`多态`**
**`封装`**：封装是把过程和数据包围起来，对数据的访问只能通过已定义的界面。面向对象计算始于这个基本概念，把客观事物封装成抽象的类，并且类可以把自己的数据和方法只让可信的类或者对象操作，对不可信的进行信息隐藏。
**`继承`**：继承就是让一个类型的对象拥有另一个类型的对象的属性的方法。对象的一个新类可以从现有的类中派生，这个过程称为类继承。新类继承了原始类的特性，新类称为原始类的派生类（子类），而原始类称为新类的基类（父类）。派生类可以从它的基类那里继承方法和实例变量，并且类可以修改或增加新的方法使之更适合特殊的需要。
**`多态`**：多态性是指允许不同类的对象对同一消息作出响应，同一个类型的对象在执行同一个方法时，可以表现出多种行为特征。
### 27.怎么判断某个对象是否包含指定成员？
1. **`使用 hasOwnProperty 方法：`** 这个方法会检查对象自身（不包括原型链）是否有指定的属性。
let obj = { property: “value” };
console.log(obj.hasOwnProperty(“property”)); // 输出：true
console.log(obj.hasOwnProperty(“nonExistent”)); // 输出：false
2. **`使用 in 操作符：`** 这个操作符会检查对象自身以及它的原型链中是否有指定的属性。
let obj = { property: “value” };
console.log(“property” in obj); // 输出：true
console.log(“nonExistent” in obj); // 输出：false
3. **`直接访问属性：`** 如果属性存在，访问它不会返回 undefined。然而，需要注意的是，如果一个属性的值是 undefined，这种方法也会返回 true。
let obj = { property: “value” };
console.log(obj.property !== undefined); // 输出：true
console.log(obj.nonExistent !== undefined); // 输出：true，但这里是有问题的，因为nonExistent属性不存在，访问它会返回undefined
在大多数情况下，使用 hasOwnProperty 或 in 操作符是更安全和更准确的。特别是当您想要检查对象自身是否有某个属性，而不是检查原型链时，hasOwnProperty 是一个好选择。如果您想要检查对象自身或原型链中是否有某个属性，那么可以使用 in 操作符。
### 28.JavaScript 的数据对象有哪些属性值？
1. **数值（Number）**：可以是整数或浮点数。
let obj = {
age: 30,
price: 19.99,
};
2. **字符串（String）**：文本值。
let obj = {
name: “John Doe”,
email: “johndoe@example.com”,
};
3. **布尔值（Boolean）**：`true` 或 `false`。
let obj = {
isAdmin: true,
hasAccess: false,
};
4. **对象（Object）**：可以是另一个对象字面量、数组、函数等。
let obj = {
address: {
street: “123 Main St”,
city: “Anytown”,
state: “CA”,
},
hobbies: [“reading”, “hiking”, “coding”],
};
5. **数组（Array）**：有序的元素集合。
let obj = {
scores: [90, 85, 88, 92],
};
6. **函数（Function）**：可以作为对象的方法。
let obj = {
greet: function () {
console.log("Hello, my name is " + this.name);
},
};
7. **null**：表示一个空值或“无”的值。
let obj = {
nothingHere: null,
};
8. **undefined**：表示变量未定义或没有赋值。
let obj = {
somethingMissing: undefined,
};
9. **Symbol**：唯一且不可变的数据类型，通常用作对象的属性键。
let sym = Symbol(“uniqueKey”);
let obj = {
[sym]: “unique value”,
};
10. **BigInt**：可以表示任意大的整数。
let obj = {
bigNumber: BigInt(“9007199254740991”),
};
### 29.JavaScript 宿主对象和原生对象的区别？
1. **`定义`：** 原生对象是独立于宿主环境之外的对象，包括 Object、Array、Function、Number、String、Date 等。而宿主对象则是 JavaScript 引擎在运行过程中，由 JavaScript 宿主环境（如浏览器或 Node.js）通过某种机制注入到 JavaScript 引擎中的对象，例如浏览器的 BOM（Browser Object Model）和 DOM（Document Object Model）对象。
2. **`创建方式：`** 原生对象包括内置对象（由 ECMAScript 提供并独立于宿主对象之外的对象）和 JavaScript 运行过程中动态创建的对象。而宿主对象是由 JavaScript 宿主环境提供的，不是由 JavaScript 代码直接创建的。
3. **`包含内容：`** 原生对象主要包含一些基础的数据类型和对象，如 Object、Array、Function、Number、String、Date 等。而宿主对象则包含了与特定宿主环境相关的对象和方法，例如浏览器的 window 对象、document 对象等。
总的来说，原生对象是独立于宿主环境之外的基础对象，而宿主对象则是与特定宿主环境相关的对象。在 JavaScript 中，原生对象和宿主对象共同构成了完整的 JavaScript 运行环境。
### 30.对 AJAX 的理解，实现一个 AJAX 请求？
`AJAX`，全称 Asynchronous JavaScript and XML，是一种创建交互式网页应用的网页开发技术。AJAX 使用 JavaScript 语言向服务器提出请求并处理响应而不阻塞用户。在这个过程中，网页不需要重新加载，只更新需要改变的部分。
实现一个 AJAX 请求通常涉及以下步骤：
1. **`创建 XMLHttpRequest 对象`**：这是发起 AJAX 请求的基础。
2. **`设置请求方法和 URL`**：使用`open()`方法设置 HTTP 请求方法和请求的 URL。
3. **`设置请求头`**（如果需要）：使用`setRequestHeader()`方法设置请求头。
4. **`发送请求`**：使用`send()`方法发送请求。对于 GET 请求，通常不需要传递任何参数给`send()`；对于 POST 请求，需要将要发送的数据作为`send()`的参数。
5. **`处理响应`**：通过监听`onreadystatechange`事件或使用 Promise 来处理响应。当`readyState`为 4 且`status`为 200 时，表示请求成功完成，可以处理响应数据。
以下是一个简单的 AJAX GET 请求示例：
// 1. 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 2. 设置请求方法和URL
xhr.open(“GET”, “https://api.example.com/data”, true); // 第三个参数true表示异步请求
// 3. 发送请求
xhr.send();
// 4. 处理响应
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
// 请求成功完成，处理响应数据
var responseData = JSON.parse(xhr.responseText);
console.log(responseData);
}
};
### 31.ajax、axios、fetch 的区别?
1. **ajax:** 是指一种创建交互式网页应用的网页开发技术，并且可以做到无需重新加载整个网页的情况下，能够更新部分网页，也叫作局部更新
**`优点：`**
* 局部更新
* 原生支持，不需要任何插件
* 原生支持，不需要任何插件
**`缺点：`**
* 可能破坏浏览器后退功能
* 嵌套回调，难以处理
2. **axios:** 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中
**`优点：`**
* Axios 既可以在浏览器中运行，也可以在 node.js 环境中使用
* 支持 Promise API
* 拦截请求和响应
* 转换请求数据和响应数据
* 取消请求
* 自动转换 JSON 数据
* 客户端支持防御 XSRF
**`缺点：`**
* 会增加项目的依赖项
* 对就得浏览器有兼容性问题
3. **fetch:** 使用了 ES6 中的 promise 对象。Fetch 是基于 promise 设计的。Fetch 函数就是原生 js，没有使用 XMLHttpRequest 对象。
**`优点：`**
* 更加底层，提供的 API 丰富（request, response）
* 脱离了 XHR，是 ES 规范里新的实现方式
**`缺点：`**
* fetch 是一个低层次的 API，你可以把它考虑成原生的 XHR，所以使用起来并不是那么舒服，需要进行封装
* fetch 只对网络请求报错，对 400，500 都当做成功的请求，需要封装去处理
* fetch 默认不会带 cookie，需要添加配置项
* fetch 不支持 abort，不支持超时控制，使用 setTimeout 及 Promise.reject 的实现的超时控制并不能阻止请求过程继续在后台运行，造成了流量的浪费
* fetch 没有办法原生监测请求的进度，而 XHR 可以
### 32.请说说 post 请求与 get 请求有什么不同？
1. **请求参数的位置**：
* `GET` 请求的参数通常附加在 URL 的后面，使用问号（?）开始，并用&符号分隔参数。因此，GET 请求的数据会暴露在 URL 中。
* `POST` 请求的参数则包含在请求体中，不会在 URL 中显示。这意味着 POST 请求可以发送大量的数据，且数据不会显示在 URL 中。
2. **安全性**：
* `GET` 由于请求的参数在 URL 中可见，因此它不适合发送敏感信息，如密码或私人数据。这些信息可能会被保存在浏览器的历史记录、网络日志或服务器日志中，存在安全风险。
* `POST` 请求的参数在请求体中，因此相对更安全，适合发送敏感数据。然而，它并非完全安全，仍需要采取其他安全措施，如 HTTPS，来确保数据传输的安全性。
3. **数据大小限制**：
* `GET` 请求由于将参数附加在 URL 中，因此受到 URL 长度的限制。不同的浏览器和服务器对 URL 长度有不同的限制，但通常不建议在 GET 请求中发送大量数据。
* `POST` 请求没有这样的限制，因为它将参数放在请求体中。因此，POST 请求可以发送比 GET 请求更多的数据。
4. **幂等性**：
* `GET` 请求是幂等的，这意味着多次执行相同的 GET 请求，对服务器上的资源没有影响。
* `POST` 请求通常不是幂等的。每次发送 POST 请求都可能在服务器上创建新的资源或修改现有资源。
5. **缓存**：
* `GET` 请求可以被缓存，因此如果相同的 GET 请求被多次发送，可能直接从缓存中获取响应，而不必每次都从服务器获取。
* `POST` 请求通常不会被缓存。
6. **后退/刷新按钮的影响**：
* 由于`GET` 请求的结果可以被缓存，因此用户可以安全地使用浏览器的后退和刷新按钮。
* 对于`POST`请求，由于可能涉及数据的创建或修改，使用后退和刷新按钮可能会导致不可预测的结果。
7. **用途**：
* `GET`请求通常用于从服务器检索数据，如查询数据库或获取页面内容。
* `POST` 请求通常用于向服务器提交数据，如提交表单或上传文件。
### 33. 说一说 promise 是什么与使用方法？
Promise 是一种用于处理异步操作的对象，它代表了某个在未来才会知道结果的事件（通常是一个异步操作）。Promise 的主要作用是将异步操作队列化，并按照期望的顺序执行，返回符合预期的结果。通过 Promise，我们可以更好地管理代码的执行顺序，并避免回调地狱的问题。
**原理:**
Promise 基于状态机和事件触发。每个 Promise 对象都有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。Promise 的状态一旦改变就不会再变，只能从 pending 变为 fulfilled 或 rejected。这种不可逆性确保了 Promise 对象的稳定性。
**使用方法：**
1. `创建 Promise 对象`：通过 `new Promise()` 构造函数来创建一个新的 Promise 实例。构造函数接收一个函数作为参数，这个函数有两个参数：`resolve` 和 `reject`，分别用于处理异步操作成功和失败的情况。
示例：
let promise = new Promise(function(resolve, reject) {
// 异步操作
setTimeout(() => {
if (/* 异步操作成功 */) {
resolve(‘操作成功’);
} else {
reject(‘操作失败’);
}
}, 1000);
});
2. `处理 Promise 结果`：使用 `.then()` 方法来处理 Promise 对象的状态变化。`.then()` 方法接收两个函数作为参数，第一个函数是 Promise 状态变为 fulfilled 时调用的回调函数，第二个函数（可选）是 Promise 状态变为 rejected 时调用的回调函数。
示例：
promise.then(
function (result) {
// 异步操作成功时的处理逻辑
console.log(result); // 输出：操作成功
},
function (error) {
// 异步操作失败时的处理逻辑
console.log(error); // 输出：操作失败
}
);
或者，如果只需要处理成功的状态，可以只提供一个函数作为 `.then()` 方法的参数。如果只想处理错误状态，可以使用 `.catch()` 方法。
示例（简化版）：
promise
.then((result) => console.log(result)) // 处理成功的情况
.catch((error) => console.log(error)); // 处理失败的情况
3. `Promise 链式调用`：由于 `.then()` 方法返回一个新的 Promise，因此可以链式调用多个 `.then()` 来处理异步操作的结果。这有助于将多个异步操作按照顺序连接起来。
示例：
promise
.then((result1) => {
// 处理第一个异步操作的结果
return anotherAsyncOperation(result1); // 返回一个新的 Promise
})
.then((result2) => {
// 处理第二个异步操作的结果
console.log(result2);
})
.catch((error) => {
// 处理任何一个异步操作中的错误
console.log(error);
});
Promise 的这些特性使得异步编程更加简洁和直观，减少了嵌套回调的使用，提高了代码的可读性和可维护性。同时，Promise 还提供了诸如 `Promise.all()`、`Promise.race()` 等静态方法，用于处理多个 Promise 对象的情况。
### 34.promise.all 的作用、优缺点和用法？
Promise.all 是 JavaScript 中的一个方法，它在处理多个异步操作时非常有用。其作用是将多个 Promise 实例包装成一个新的 Promise 实例，并且这个新的 Promise 的状态由所有的子 Promise 决定。
**优点：**
1. **`简化异步处理`**：Promise.all 使得处理多个异步操作变得更为简单和直观，特别是当需要等待所有异步操作都完成时。
2. **`结果顺序一致性`**：Promise.all 保证了子 Promise 对象结果的顺序与原始数组中的顺序一致，这对于需要按特定顺序处理异步操作结果的场景非常有用。
3. **`错误捕获`**：通过 Promise.all，可以方便地捕获任何一个子 Promise 对象的错误，并在一个统一的错误处理函数中处理它们。
**缺点：**
1. **`一荣俱荣，一损俱损`**：Promise.all 的机制是“一荣俱荣，一损俱损”，即只要有一个 Promise 失败，整个 Promise.all 就会失败。在某些场景下，可能希望即使部分 Promise 失败，也能继续处理其他成功的 Promise，这时 Promise.all 可能不是最佳选择。
2. **`性能考虑`**：如果子 Promise 对象的数量非常大，Promise.all 可能会占用较多的内存和处理时间，因为需要等待所有 Promise 完成并存储它们的结果。
**用法：**
1. **`输入`**：Promise.all 接受一个包含多个 Promise 对象的数组作为参数。这个数组可以包含任何类型的值，但只有 Promise 对象的状态变化（即 fulfilled 或 rejected）才会影响 Promise.all 返回的新的 Promise 对象的状态。
2. **`状态变化`**：当所有的子 Promise 都成功完成（即状态变为 fulfilled）时，Promise.all 返回的新的 Promise 对象才会成功完成，并且其结果是所有子 Promise 结果的数组，顺序与原始数组中的 Promise 顺序一致。然而，如果有任何一个子 Promise 失败（即状态变为 rejected），那么 Promise.all 返回的新的 Promise 对象会立即失败，并且其结果是第一个失败的子 Promise 的结果。
3. **`使用场景`**：Promise.all 特别适用于需要等待多个异步操作全部完成，并且需要获取所有异步操作结果的场景。例如，在 Web 开发中，可能需要从多个 API 端点获取数据，并在所有数据都加载完成后进行下一步操作。这时候，就可以使用 Promise.all 来等待所有的 API 请求完成，并收集所有的结果。
以下是一个简单的使用示例：
let promise1 = fetch(“url1”); // 假设这是一个返回Promise的API请求
let promise2 = fetch(“url2”); // 同上
Promise.all([promise1, promise2])
.then((results) => {
// 当两个请求都成功时，这里会被调用
// results是一个数组，包含了两个请求的结果
console.log(results);
})
.catch((error) => {
// 当任何一个请求失败时，这里会被调用
console.error(“An error occurred:”, error);
});
在这个示例中，Promise.all 会等待两个 fetch 请求都完成，然后将它们的结果作为数组传递给.then()方法的回调函数。如果任何一个请求失败，Promise.all 会立即失败，并将错误传递给.catch()方法的回调函数。
### 35.JavaScript 脚本延迟加载的方式有哪些？
1. **`defer 属性：`** 给 js 脚本添加 defer 属性，这个属性会让脚本的加载与文档的解析同步解析，然后在文档解析完成后再执行这个脚本文件，这样的话就能使页面的渲染不被阻塞。多个设置了 defer 属性的脚本按规范来说最后是顺序执行的，但是在一些浏览器中可能不是这样。
2. **`async 属性：`** 给 js 脚本添加 async 属性，这个属性会使脚本异步加载，不会阻塞页面的解析过程，但是当脚本加载完成后立即执行 js 脚本，这个时候如果文档没有解析完成的话同样会阻塞。多个 async 属性的脚本的执行顺序是不可预测的，一般不会按照代码的顺序依次执行。
3. **`动态创建 DOM 方式：`** 动态创建 DOM 标签的方式，可以对文档的加载事件进行监听，当文档加载完成后再动态的创建 script 标签来引入 js 脚本。
4. **`使用 setTimeout 延迟方法：`** 设置一个定时器来延迟加载 js 脚本文件。
5. **`让 JS 最后加载：`** 将 js 脚本放在文档的底部，来使 js 脚本尽可能的在最后来加载执行。
### 36.说一说 defer 和 async 区别？
1. **`执行时间不同`**：defer 是表明脚本在执行时不会影响页面的构造，脚本会被延迟到整个页面都解析完毕后再运行；async 是浏览器立即异步下载文件，下载完成会立即执行，此时会阻塞 DOM 渲染。
2. **`执行顺序不同`**：defer 是按照顺序下载执行；async 是不能保证多个加载时的先后顺序。
3. **`用途不同`**：defer 是表明脚本在执行时不会影响页面的构造；async 是为了实现并行加载，加速页面渲染。
### 37.介绍下 Set、 Map. WeakSet 和 WeakMap 的区别?
1. **Set**
`Set` 是一种特殊的类型，它类似于数组，但成员的值都是唯一的，没有重复的值。`Set` 本身是一个构造函数，用来生成 Set 数据结构。Set 的主要方法包括 add()，delete()，has()和 clear()。
**`特点：`**
* 成员的值是唯一的，没有重复的值。
* 可以遍历成员。
* `size` 属性返回成员总数。
* `add(value)` 方法添加某个值，返回 Set 结构本身。
* `delete(value)` 方法删除某个值，返回一个布尔值，表示删除是否成功。
* `has(value)` 方法返回一个布尔值，表示该值是否为 Set 的成员。
* `clear()` 方法清除所有成员，没有返回值。
2. **Map**
`Map`类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（对象或者原始值）都可以当作键。`Map` 提供了许多方法来遍历和操作数据。Map 的主要方法包括 set()，get()，has()，delete()和 clear()。
**`特点`**：
* 它类似于对象，也是键值对的集合。
* 任何类型的值（对象或者原始值）都可以作为一个键或一个值。
* 提供了许多方法来遍历和操作数据，如 `size`、`set(key, value)`、`get(key)`、`has(key)`、`delete(key)` 和 `clear()` 等。
3. **WeakSet**
`WeakSet`是对象的弱集合，它允许你存储对象的弱引用，也就是说，如果没有其他引用指向这个对象，那么这个对象就会被垃圾回收机制自动回收。这是防止内存泄漏的一个非常有用的特性。WeakSet 只有 add()，delete()和 has()三个方法。
**`特点`**：
* 成员只能是对象，而不能是其他类型的值。
* `WeakSet` 中的对象都是弱引用，如果没有其他地方引用该对象，则垃圾回收机制可以回收它。
* 由于上述的弱引用特性，`WeakSet` 没有 `size` 属性，也不允许遍历。
4. **WeakMap**
`WeakMap` 是一种键必须是对象的映射结构，它的键是弱引用，也就是说，如果键对象没有其他引用指向它，那么该键和对应的值就会被垃圾回收机制自动回收。这是防止内存泄漏的另一个非常有用的特性。WeakMap 只有 set()，get()，has()，delete()四个方法。
**`特点`**：
* 键只能是对象，而值可以是任意的。
* `WeakMap` 的键是弱引用，如果没有其他地方引用该对象，则垃圾回收机制可以回收它。
* 由于上述的弱引用特性，`WeakMap` 没有 `size` 属性，也不允许遍历。
* `WeakMap` 只有两个方法：`get(key)` 和 `set(key, value)`。
**`总结：`**
* `Set` 和 `Map` 允许你存储任何类型的键和值，并且提供了丰富的 API 来操作这些数据。
* `WeakSet` 和 `WeakMap` 的主要特性是它们对键的弱引用，这有助于防止内存泄漏，特别是在处理大量数据时。然而，由于这种弱引用特性，它们不提供 `size` 属性和遍历方法。
### 38.什么是的事件冒泡和事件捕获，如何阻止？
**事件冒泡**
**`定义`**：当一个元素上的事件被触发时，该事件会从最具体的元素（即事件源）开始，逐级向上传播，直到最顶层的元素（通常是文档对象）被触发。
**`阻止方法`**：`event.stopPropagation()` 阻止事件冒泡到 DOM 树中的更高层元素。
element.addEventListener(
“click”,
function (event) {
event.stopPropagation();
// 你的代码逻辑
},
false
);
在`addEventListener`方法的第三个参数中传入`false`可以确保监听器在冒泡阶段处理事件，这是默认的行为。如果你想在捕获阶段处理事件，你需要将第三个参数设置为`true`。
**事件捕获**
**`定义`**：事件捕获是从文档的最外层开始，逐级向下传播，直到达到事件源。在事件捕获过程中，首先会触发最外层元素的事件处理函数，然后依次触发内部元素的事件处理函数。
**`阻止方法`**：使用`event.stopImmediatePropagation()`方法阻止当前事件处理程序继续执行，并且也会阻止事件传播（包括捕获和冒泡）。
element.addEventListener(
“click”,
function (event) {
event.stopImmediatePropagation();
// 你的代码逻辑
},
true
); // 注意这里设置为true，以便在捕获阶段处理事件
在这个例子中，通过将`addEventListener`的第三个参数设置为`true`，我们确保监听器在捕获阶段处理事件。然后，使用`event.stopImmediatePropagation()`来阻止事件继续传播。
### 39.JavaScript 中 preventDefault()方法有什么作用?
在 JavaScript 中，e.preventDefault()是一个事件处理函数，用于阻止事件的默认行为。
当一个事件触发时，浏览器会执行默认的操作。例如，当用户点击一个链接时，浏览器会加载新的页面；当用户提交一个表单时，浏览器会重新加载页面。通过调用 e.preventDefault()，可以取消或阻止这些默认行为的发生。
**常见的使用场景包括：**
1. 点击链接时阻止页面跳转；
2. 提交表单时阻止页面重新加载；
3. 拖拽元素时阻止元素默认的拖拽行为；
4. 阻止键盘按键的默认行为等。
总而言之，e.preventDefault()用于阻止事件的默认行为，以便开发者可以在事件触发时执行自定义的操作。
### 40.什么是闭包?闭包的用例有哪些?
**`闭包：`** 闭包是指有权访问另一个函数作用域中的变量的函数。创建闭包的常见方式，就是在一个函数内部创建另一个函数，通过另一个函数访问这个函数的局部变量；
**原理：** 当一个函数内部定义了另一个函数，并且内部函数引用了外部函数的变量时，就形成了闭包；
**例子：**
function outerFunction(outerVariable) {
return function innerFunction(innerVariable) {
console.log(“outerVariable:”, outerVariable);
console.log(“innerVariable:”, innerVariable);
console.log(
“outerVariable + innerVariable:”,
outerVariable + innerVariable
);
};
}
const myClosure = outerFunction(5);
myClosure(3); // 输出: outerVariable: 5, innerVariable: 3, outerVariable + innerVariable: 8
**特性：**
* 函数嵌套函数
* 函数内部可以引用外包的参数和变量；
* 参数和变量不会被垃圾回收机制回收；
**优点：**
* 保护函数内变量的安全；
* 方便调用访问上下文的局部变量；
* 可以用来定义私有属性和私有方法；
* 可以重复使用变量，并且不会造成变量污染；
**缺点：**
* **`常驻内存中`**，会增大内存使用量，使用不当很容易造成内存泄漏；
* **`会造成内存的浪费`**，这个内存浪费不仅因为它长期存在于内存中，更因为对闭包的使用不当会造成无效内存的产生；
**作用：**
* **`数据封装和私有变量`**：闭包可以用于创建私有变量，只能通过特定的公开方法进行访问和修改。这种方法可以隐藏内部实现细节，提供更为安全和稳定的接口。
* **`回调函数和高阶函数`** ：闭包常用于实现回调函数和高阶函数，因为它们可以记住其定义时的上下文。这使得闭包在处理异步操作、事件监听等场景时特别有用，因为它们可以确保在回调函数执行时能够访问到正确的变量和数据。
* **`函数防抖`**：在事件被触发 n 秒后再执行回调，如果在这 n 秒内又被触发，则重新计时。实现的关键就在于 setTimeOut 这个函数，由于还需要一个变量来保存计时，考虑维护全局纯净，可以借助闭包来实现。
* **`迭代器`**：闭包可以用于创建迭代器，用于遍历数据集合。通过闭包，我们可以实现自定义的迭代逻辑，并在每次迭代时保留状态，确保迭代的正确性和一致性。
* **`柯里化`**（Currying）：闭包可以用于实现函数的柯里化，将多个参数的函数转换成一系列使用一个参数的函数。这种方法可以简化函数调用，提高代码的可读性和可维护性。
* **`记忆化函数`**：闭包也可以用于实现记忆化函数，即函数将之前计算过的结果存储起来，在下次需要相同结果时直接返回，而不需要重新计算。这种方法可以显著提高计算密集型任务的性能。
### 41.浅拷贝和深拷贝区别概念常见情况？
**浅拷贝**：
浅拷贝只复制对象的第一层属性。如果对象的属性值是一个对象或数组，那么实际上复制的是这个内部对象的引用，而不是真正的对象本身。因此，修改新对象中的这些引用类型的属性会影响到原对象。
例如，如果我们有一个包含对象的数组，当我们对这个数组进行浅拷贝时，新数组中的元素仍然是原数组中对象的引用，而不是新的对象。因此，如果我们修改了新数组中的对象，原数组中的对象也会被修改。
**深拷贝**：
深拷贝会递归地复制对象及其所有的子对象。也就是说，它会创建一个新的对象，并复制原对象及其所有子对象的所有属性和值。这样，新对象和原对象是完全独立的，修改新对象不会影响到原对象。
在 JavaScript 中，实现深拷贝并不简单，因为需要处理各种复杂的数据类型和循环引用的情况。一种常见的实现深拷贝的方法是使用 JSON 的序列化和反序列化，即`JSON.stringify`和`JSON.parse`。但这种方法不能处理函数和循环引用的情况，因此并不完美。对于更复杂的情况，可能需要使用递归或其他更复杂的算法来实现深拷贝。
**常见情况**：
1. **`基本数据类型`**：对于基本数据类型（如 Number、String、Boolean、Undefined、Null、Symbol），浅拷贝和深拷贝实际上是一样的，因为它们都是值类型，复制的是值本身。
2. **`引用数据类型`**：对于引用数据类型（如 Object、Array、Function），浅拷贝和深拷贝的区别就显现出来了。浅拷贝只复制引用，而深拷贝会复制引用指向的对象。
3. **`嵌套对象`**：当处理嵌套对象时，浅拷贝的问题尤为突出。因为浅拷贝只会复制最外层的引用，而内部的对象仍然是共享的。这可能导致在修改新对象时，原对象也被意外修改。而深拷贝则可以避免这个问题，因为它会递归地复制所有的子对象。
### 42.解释 Javascript 中的展开运算符是什么?
在 JavaScript 中，展开运算符（Spread Operator）是一种语法，它允许我们将一个可迭代对象（如数组或对象）的元素或属性展开到新的数组或对象中，或者在函数调用时作为独立的参数传递。
**作用**
展开运算符的主要作用是简化数组和对象的操作，包括：
1. **`复制数组或对象`**：可以轻松地创建数组或对象的浅拷贝。
2. **`合并数组或对象`**：将多个数组或对象的元素/属性合并到一个新的数组或对象中。
3. **`函数参数传递`**：将数组的元素或对象的属性作为独立的参数传递给函数。
**优点**
1. **`代码简洁`**：展开运算符允许我们以更简洁的方式执行常见的数组和对象操作，减少了冗余代码。
2. **`灵活性`**：它可以用于多种情况，包括数组和对象的合并、复制和函数参数传递。
3. **`易读性`**：对于熟悉 JavaScript 的开发者来说，展开运算符的语义相对直观，易于理解。
**缺点**
1. **`浅拷贝`**：展开运算符执行的是浅拷贝，如果数组或对象包含嵌套的对象或数组，那么这些嵌套的对象或数组不会被完全复制，而是共享引用。这可能导致意外的副作用，例如修改原始数组或对象中的嵌套结构时，也会影响到使用展开运算符创建的副本。
2. **`性能开销`**：虽然展开运算符使代码更简洁，但在处理大型数组或对象时，它可能会比传统的循环或迭代方法产生更大的性能开销。
**应用场景**
1. **`数组操作`**：
* 合并数组：`const arr3 = [...arr1, ...arr2];`
* 复制数组：`const arrCopy = [...arr];`
* 向数组添加元素：`arr.push(...otherArray);`
* 在函数调用时传递数组元素：`func(...array);`
2. **`对象操作`**：
* 合并对象：`const obj2 = { ...obj1, prop: 'value' };`
* 复制对象：`const objCopy = { ...obj };`
### 43.事件扩展符用过吗(…)，说说原理，优缺点和使用场景？
事件扩展符（Spread operator）是 ES6 中引入的一种新语法，用于将一个数组或对象的元素/属性展开
**原理**
扩展符的原理基于迭代协议。当一个对象实现了`[Symbol.iterator]()`方法时，它就被认为是一个可迭代对象。扩展符内部使用这个方法来获取对象的迭代器，并迭代展开对象的元素。对于数组，扩展符将数组中的每个元素作为独立的参数或项展开；对于对象，它复制对象的所有可枚举属性到新对象中。
**优点**
1. **`简洁性`**：扩展符提供了一种简洁的方式来展开数组或对象的元素。
2. **`代码可读性`**：使用扩展符可以使代码更加清晰，减少冗余。
3. **`灵活性`**：扩展符可以方便地与其他 ES6 特性（如模板字符串、解构赋值等）结合使用，实现复杂的操作。
**缺点**
1. **`浏览器兼容性`**：扩展符是 ES6 引入的特性，因此在一些旧版本的浏览器中可能不受支持。
2. **`误用风险`**：如果不正确地使用扩展符（例如，在不适合的上下文中使用），可能会导致意外的行为或错误。
**使用场景**
1. **`数组展开`**：在函数调用时，将数组的元素作为单独的参数传入。
function sum(a, b, c) {
return a + b + c;
}
const numbers = [1, 2, 3];
console.log(sum(…numbers)); // 输出：6
2. **`对象展开`**：在构造新的对象时，将一个对象的所有可枚举属性复制到新对象中。
const obj1 = { a: 1, b: 2 };
const obj2 = { …obj1, c: 3 };
console.log(obj2); // 输出：{ a: 1, b: 2, c: 3 }
3. **`事件监听器`**：尽管不常见，但理论上，你可以使用扩展符将多个处理函数组合成一个数组，并通过某种方式将它们绑定到事件监听器上。不过，这通常需要额外的逻辑，并且不是扩展符的典型用法。
### 44.说一说 es6 中箭头函数？
箭头函数是 ES6（ECMAScript 2015）引入的一种新的函数表达式形式。它使用 `=>` 符号来定义函数，提供了一种更简洁、更直观的函数书写方式。
**优点**：
1. **`简洁性`**：箭头函数的语法比传统函数更简洁，特别是当函数体较短时。
2. **`this 的绑定`**：解决了传统函数中`this`指向不确定的问题，使得在回调函数中能够更清晰地访问外层作用域的`this`。
**缺点**：
1. **`不能用作构造函数`**：由于箭头函数没有自己的`this`和`prototype`属性，因此它不能被用作构造函数。尝试使用`new`操作符与箭头函数一起会抛出错误。
2. **`没有arguments对象`**：在箭头函数中，你不能使用`arguments`对象来访问函数参数。如果需要访问所有参数，可以使用剩余参数（rest parameters）。
3. **`不适用于所有场景`**：虽然箭头函数在许多情况下都非常有用，但并不是所有场景都适用。例如，当需要动态地绑定`this`或者需要函数具有自己的`arguments`对象时，传统函数可能更为合适。
总的来说，箭头函数提供了一种更简洁、更直观的方式来编写函数，特别是在处理`this`和回调函数的场景中。然而，它也有一些限制和不适用的场景，因此在使用时需要根据具体需求进行选择。
### 45.简述箭头函数和普通函数的区别？箭头函数能当构造函数吗？
箭头函数与普通函数之间存在几个显著的区别：
1. **`外形与语法`**：箭头函数使用箭头 `=>` 定义，这使得其语法更加简洁。相比之下，普通函数使用 `function` 关键字定义。
2. **`this 绑定`**：在箭头函数中，`this` 的值被永久地绑定到定义它的上下文中，不会因为函数的调用方式而改变。这使得在回调函数中处理 `this` 变得简单。而普通函数的 `this` 指向则取决于函数的调用方式，它可能指向全局对象、调用它的对象，或者在某些情况下是 `undefined`。
3. **`作为构造函数`**：箭头函数不能用作构造函数，因为它们没有自己的 `this` 绑定和 `prototype` 属性。而普通函数则可以用作构造函数，通过 `new` 关键字来创建对象实例。
4. **`arguments 对象`**：每一个普通函数调用后都具有一个 `arguments` 对象，用来存储实际传递的参数。但箭头函数并没有此对象，如果需要类似的功能，可以使用剩余参数（rest parameters）。
5. **`其他特性`**：箭头函数不具有 `prototype` 原型对象、`super` 或 `new.target`。这些特性在普通函数中都是存在的。
### 46.请举出一个匿名函数的典型案例？
在 JavaScript 中，匿名函数是一种没有名称的函数，它经常被用作回调函数，事件处理程序，或者创建闭包。以下是一个典型的匿名函数使用的案例：
这是一个使用匿名函数作为数组排序方法的回调函数的例子：
var numbers = [40, 1, 5, 200];
numbers.sort(function (a, b) {
return a - b;
});
console.log(numbers); // 输出: [1, 5, 40, 200]
在这个例子中，我们使用了数组的 sort() 方法来对 numbers 数组进行排序。sort() 方法接受一个可选的比较函数作为参数，该函数用于确定数组元素的排序顺序。在这个例子中，我们传递了一个匿名函数作为 sort() 方法的参数，这个匿名函数接收两个参数 a 和 b，然后返回它们的差，这样就能决定数组元素的排序顺序。
### 47.说一说 this 指向（普通函数、箭头函数）？
在 JavaScript 中，`this` 的指向是一个复杂但非常关键的概念。它决定了函数内部引用的是哪个对象。对于普通函数和箭头函数，`this` 的指向规则是不同的。
**普通函数中的this**
普通函数中的 `this` 指向是在函数被调用时确定的，而不是在函数定义时。具体来说，`this` 的指向取决于调用函数的方式。
1. **`全局环境`**：在全局环境（非严格模式）中调用函数，`this` 通常指向全局对象（在浏览器中是 `window`）。
function regularFunction() {
console.log(this); // 在浏览器中通常输出 window
}
regularFunction();
2. **`作为对象方法`**：当函数作为对象的方法被调用时，`this` 指向该对象。
const obj = {
property: “Hello”,
method: function () {
console.log(this.property); // 输出 ‘Hello’
},
};
obj.method();
3. **`构造函数`**：当函数用作构造函数（通过 `new` 关键字调用）时，`this` 指向新创建的对象实例。
function Constructor() {
this.value = “Constructor called”;
}
const instance = new Constructor();
console.log(instance.value); // 输出 ‘Constructor called’
4. 通过 **`call`**、**`apply`** 或 **`bind`** 方法 ：这些方法允许你显式地设置函数调用的 `this` 值。
function exampleFunction() {
console.log(this.value);
}
const obj = { value: “Called with obj” };
exampleFunction.call(obj); // 输出 ‘Called with obj’
**箭头函数中的 this**
箭头函数在处理 `this` 时有一个重要的特点：它们不绑定自己的 `this`，而是捕获其所在上下文的 `this` 值作为自己的 `this` 值。这意味着箭头函数中的 `this` 实际上是在定义时确定的，而不是在调用时。
const obj = {
value: “Hello from obj”,
arrowMethod: () => {
console.log(this.value); // 这里的 this 不是指向 obj，而是定义箭头函数时的上下文（可能是全局对象或undefined，取决于严格模式）
},
};
obj.arrowMethod(); // 输出可能是全局对象上的 value 属性，或者在严格模式下是 undefined
由于箭头函数不绑定自己的 `this`，所以它们经常用于需要保持 `this` 上下文不变的场景，比如在回调函数或事件处理程序中。
了解 `this` 在不同情况下的指向是 JavaScript 编程中的一个关键概念，对于编写健壮和可维护的代码至关重要。
### 48.解释 JavaScript 中的 this 关键字的作用和使用场景?
**this的作用：**
1. **`引用当前对象`**：`this` 允许你引用当前对象（或上下文）的属性或方法。
2. **`实现面向对象编程`**：在构造函数或对象方法中，`this` 通常用于引用新创建的对象实例。
3. **`动态上下文`**：`this` 的值在运行时确定，取决于函数如何被调用。
**this 的使用场景：**
1. **`全局上下文`**：在全局作用域中，`this` 通常指向全局对象（在浏览器中是 `window` 对象）。
console.log(this === window); // true
2. **`函数调用`**：在普通函数调用中，`this` 通常指向全局对象（除非在严格模式下，此时 `this` 是 `undefined`）。
function myFunction() {
console.log(this);
}
myFunction(); // 指向全局对象（window）
3. **`对象方法`**：当函数作为对象的方法被调用时，`this` 指向该对象。
const obj = {
prop: “Hello”,
method: function () {
console.log(this.prop); // 输出 ‘Hello’
},
};
obj.method();
4. **`构造函数`**：在构造函数中，`this` 指向新创建的对象实例。
function MyConstructor() {
this.prop = “Hello”;
}
const instance = new MyConstructor();
console.log(instance.prop); // 输出 ‘Hello’
5. **`事件处理器`**：在 DOM 事件处理器中，`this` 通常指向触发事件的元素。
const button = document.getElementById(“myButton”);
button.addEventListener(“click”, function () {
console.log(this); // 指向按钮元素
});
6. **`箭头函数`**：箭头函数不绑定自己的 `this`，它会捕获其所在上下文的 `this` 值，作为自己的 `this` 值。
const obj = {
prop: “Hello”,
arrowMethod: () => {
console.log(this); // 指向全局对象（window），而不是 obj
},
};
obj.arrowMethod();
### 49.简述 JavaScript 构造函数的特点？
**特点：**
1. `函数名与类名相同`：构造函数的名称通常与创建的类的名称相同。
2. `无返回值`：构造函数不需要定义返回值类型，也不需要写 return 语句。
3. `可以重载`：构造函数可以重载，即可以定义多个同名但参数列表不同的构造函数。
4. `初始化对象`：构造函数的主要功能是初始化对象，而不是创建对象。
5. `自动调用`：构造函数会在创建新对象时自动调用。
6. `默认构造函数`：如果用户没有显式地定义构造函数，JavaScript 系统会自动调用默认构造函数。但是，一旦用户显式地定义了构造函数，系统就不再调用默认构造函数。
**优点：**
1. `对象初始化`：构造函数用于初始化新创建的对象，确保每个对象在创建时都具有正确的初始状态。
2. `封装性`：构造函数可以封装与类相关的属性和方法，提高代码的可读性和可维护性。
3. `继承性`：通过构造函数，可以实现对象之间的继承关系，使子类对象可以继承父类对象的属性和方法。
**缺点：**
1. `可能导致性能问题`：如果构造函数过于复杂，或者频繁创建对象，可能会影响性能。
2. `过度使用可能导致代码冗余`：如果每个对象都需要通过构造函数进行初始化，而初始化过程又非常相似，那么可能会导致代码冗余。
**应用场景：**
1. `创建具有相同属性和方法的多个对象`：当需要创建多个具有相同属性和方法的对象时，可以使用构造函数来定义这些对象的共同特征。
2. `实现继承`：当需要实现对象之间的继承关系时，可以使用构造函数来定义父类和子类，子类对象可以继承父类对象的属性和方法。
3. `封装复杂逻辑`：当需要将复杂的初始化逻辑封装在一个函数中时，可以使用构造函数来实现。
**与普通函数的区别：**
1. `目的不同`：普通函数主要用于执行特定的任务或计算，而构造函数则主要用于初始化新创建的对象。
2. `调用方式不同`：普通函数可以直接调用，而构造函数需要通过 new 关键字来创建对象。
3. `返回值不同`：普通函数可以返回任意类型的值，而构造函数则返回一个新创建的对象。
### 50.如果一个构造函数，bind 了一个对象，用这个构造函数创建出的实例会继承这个对象的属性吗？为什么？
不会，因为当一个构造函数被 `bind` 到一个对象时，实际上你创建了一个新的函数，这个新函数在被调用时，其 `this` 会被设置为 `bind` 的那个对象。然而，这并不意味着用这个构造函数创建出的实例会继承那个对象的属性。
原因如下：
1. **bind的作用**：bind`返回一个新的函数，这个新的函数在被调用时，其`this`值会被设置为提供的值（也就是被`bind` 的对象）。这并不会改变原构造函数的原型链或任何其它特性。
2. **实例的创建**：当你使用构造函数来创建实例时（比如通过 `new` 关键字），JavaScript 会按照以下步骤操作：
* 创建一个新的空对象。
* 将这个新对象的 `__proto__` 属性设置为构造函数的 `prototype` 对象。
* 将构造函数中的 `this` 指向这个新对象。
* 执行构造函数中的代码。
* 如果构造函数没有返回其它对象，则返回这个新对象。
由于 `bind` 只是改变了 `this` 的指向，并没有改变构造函数的原型链，因此实例不会从被 `bind` 的对象中继承属性。实例只会从构造函数的原型中继承属性。
举个例子：
function MyConstructor() {
this.myProperty = “Hello”;
}
const myObject = { objProperty: “World” };
const boundConstructor = MyConstructor.bind(myObject);
const instance = new boundConstructor();
console.log(instance.myProperty); // 输出 ‘Hello’
console.log(instance.objProperty); // 输出 undefined，因为 objProperty 不是从 myObject 继承的
在这个例子中，尽管 `MyConstructor` 被 `bind` 到了 `myObject`，但是使用 `boundConstructor` 创建的 `instance` 仍然只继承了 `MyConstructor.prototype` 上的属性（如果有的话），而不是 `myObject` 的属性。`instance` 的 `this` 在构造函数执行期间确实指向了 `myObject`，但这仅仅影响了构造函数内部的代码执行上下文，并不影响实例的原型链。
### 51.简述 JavaScript 中的高阶函数是什么?
高阶函数（Higher-order function）在 JavaScript 中指的是那些可以接收其他函数作为参数，或者返回一个函数的函数。这是函数式编程的一个核心概念，使得函数可以作为其他函数的输入或输出，从而极大地提高了代码的灵活性和复用性。
以下是一些具体的例子：
* **`map`**：这个方法会对数组中的每个元素执行一个函数，并返回一个新的数组，新数组中的元素是原数组元素执行函数后的结果。
const numbers = [1, 2, 3];
const doubled = numbers.map(function (n) {
return n * 2;
});
console.log(doubled); // 输出 [2, 4, 6]
* **`filter`**：这个方法会创建一个新数组，新数组中的元素是通过检查指定函数而得出的所有元素。
const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(function (n) {
return n % 2 === 0;
});
console.log(evenNumbers); // 输出 [2, 4, 6]
* **`reduce`**：这个方法对累加器和数组中的每个元素（从左到右）应用一个函数，将其减少为单个输出值。
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce(function (accumulator, currentValue) {
return accumulator + currentValue;
}, 0);
console.log(sum); // 输出 15
除了数组方法，JavaScript 中还有许多其他的高阶函数，例如 `setTimeout` 和 `Promise` 的 `then` 方法等。高阶函数的使用使得代码更加模块化，提高了代码的可读性和可维护性。
### 52.解释 Javascript 中的回调函数 ?为什么使用回调函数？
**回调函数的基本概念**
回调函数本质上就是一个函数，但它不是立即执行的，而是在特定的条件下或特定的时间点由另一个函数来调用。这种模式的主要特点是：一个函数（我们称之为主函数）接受另一个函数（我们称之为回调函数）作为参数，并在其执行过程中根据需要调用这个回调函数。
**为什么使用回调函数**
使用回调函数的主要原因有以下几点：
1. **`异步处理`**：在 JavaScript 中，很多操作，如网络请求、文件读写或定时任务，都是异步的。这意味着这些操作不会立即完成，而是需要一些时间。使用回调函数，我们可以在这些操作完成时执行特定的代码，而不是阻塞主线程等待它们完成。
2. **`事件监听`**：在事件驱动编程中，我们经常需要监听特定的事件（如按钮点击、鼠标移动等），并在这些事件发生时执行相应的代码。这些事件处理程序通常作为回调函数传递给事件监听器。
3. **`分步执行`**：有时，我们需要按照特定的顺序执行一系列操作，并且每个操作都依赖于前一个操作的结果。使用回调函数，我们可以将每个操作封装在一个函数中，并将这些函数作为参数传递给其他函数，以实现分步执行。
4. **`代码复用`**：通过将回调函数作为参数传递，我们可以实现代码的复用。不同的函数可以接受相同的回调函数，并在需要的时候调用它，从而避免了重复编写相同的代码。
5. **`代码模块化`**：回调函数有助于将代码拆分成更小的、更易于管理的模块。每个模块可以专注于一个特定的任务，并通过回调函数与其他模块进行通信。
**示例**
下面是一个简单的示例，演示了如何使用回调函数处理异步操作：
function fetchData(url, callback) {
// 假设 fetchData 是一个模拟的网络请求函数
setTimeout(() => {
const data = “这是从服务器获取的数据”;
callback(data); // 在数据获取后调用回调函数
}, 1000);
}
// 使用 fetchData 函数，并传递一个回调函数作为参数
fetchData(“https://example.com/data”, (data) => {
console.log(data); // 输出：这是从服务器获取的数据
});
在这个示例中，`fetchData` 函数模拟了一个异步的网络请求。它接受一个 URL 和一个回调函数作为参数。当数据获取成功后，它调用回调函数并传递获取到的数据。这样，我们就可以在回调函数中处理这些数据，而不需要等待网络请求完成。
### 53.简述 Javascript isNan()函数?
isNaN() 是 JavaScript 中的一个全局函数，用于确定一个值是否是 “NaN”（Not a Number，即非数字）。这个函数接受一个参数，并返回一个布尔值：如果参数是 NaN，或者可以被转换为 NaN 的值（比如一个非数字字符串），那么返回 true；否则返回 false。
但是，需要注意的是，isNaN() 的行为并不总是完全符合直觉。例如，它会对空字符串、空对象、undefined 和 null 返回 false，尽管这些值在某种意义上也不是数字。
这是因为 isNaN() 在处理这些值时，会首先尝试将参数转换为数字。如果转换成功（例如，空字符串转换为 0，null 转换为 0，undefined 转换为 NaN），那么 isNaN() 将返回 false。只有当转换失败时（例如，一个包含字母的字符串），isNaN() 才会返回 true。
因此，对于非数字值的检查，更推荐使用 Number.isNaN() 函数。这个函数的行为更符合直觉：它只对真正的 NaN 和可以被转换为 NaN 的值（比如 “NaN” 字符串）返回 true，对其他所有非数字值返回 false。
例如：
console.log(isNaN(“123”)); // false，因为 “123” 可以被转换为数字
console.log(isNaN(“abc”)); // true，因为 “abc” 不能被转换为数字
console.log(isNaN(null)); // false，因为 null 可以被转换为 0
console.log(isNaN(undefined)); // false，因为 undefined 可以被转换为 NaN
console.log(Number.isNaN(“123”)); // false，因为 “123” 可以被转换为数字
console.log(Number.isNaN(“abc”)); // false，因为 “abc” 不能被转换为数字
console.log(Number.isNaN(null)); // false，因为 null 可以被转换为 0
console.log(Number.isNaN(undefined)); // true，因为 undefined 可以被转换为 NaN
总的来说，isNaN() 和 Number.isNaN() 都可以用来检查一个值是否是 NaN，但 Number.isNaN() 的行为更符合直觉，因此在可能的情况下，推荐使用 Number.isNaN()。
### 54.JavaScript 里函数参数 arguments 是数组吗?
在 JavaScript 中，`arguments` 对象不是一个真正的数组，而是一个类数组对象（array-like object）。尽管 `arguments` 对象可以使用数组索引（0, 1, 2, …）来访问元素，并且具有 `length` 属性，但它并不具备数组的全部方法和属性。
例如，你不能直接在 `arguments` 对象上使用 `push`、`pop`、`slice`、`forEach` 等数组方法。如果你需要将这些方法应用于 `arguments` 对象，你可以通过将其转换为真正的数组来实现。这通常可以通过使用 `Array.prototype.slice.call(arguments)` 或更现代的 `Array.from(arguments)` 来完成。
以下是一个例子：
function exampleFunction() {
var args = Array.from(arguments); // 或者使用 var args = Array.prototype.slice.call(arguments);
args.forEach(function (arg) {
console.log(arg);
});
}
exampleFunction(1, 2, 3); // 输出 1, 2, 3
在这个例子中，`arguments` 对象被转换为一个真正的数组，然后我们可以在这个数组上使用 `forEach` 方法。
### 55.什么是柯里化函数?优缺点？
在 JavaScript 中，柯里化（Currying）是一种将使用多个参数的函数转换成一系列使用一个参数的函数的技术。每个这样的函数都返回下一个函数，直到最后一个函数返回计算结果。
**柯里化函数的优点：**
1. **`参数复用`**：由于柯里化函数每次只接受一个参数，因此可以很容易地固定某些参数的值，从而创建新的函数。
2. **`延迟执行`**：柯里化允许你分步提供函数所需的参数，只有在所有参数都提供后才执行函数，这有助于实现延迟计算。
3. **`函数组合`**：柯里化函数可以很容易地与其他柯里化函数组合，以创建更复杂的函数。
4. **`代码可读性`**：每个柯里化函数都只处理一个参数，这使得代码更易于理解和维护。
**柯里化函数的缺点：**
1. **`性能开销`**：每次调用柯里化函数都会返回一个新的函数，这可能会导致额外的内存开销和性能损耗，特别是在大量使用柯里化函数的情况下。
2. **`可读性`**：对于不熟悉柯里化的开发者来说，代码可能会显得有些不直观，需要一定的学习成本。
**如何实现柯里化：**
在 JavaScript 中，实现柯里化函数的一个基本方法是通过递归和闭包。以下是一个简单的实现示例：
function curry(fn) {
if (typeof fn !== “function”) {
throw new Error(“curry() requires a function”);
}
return function curried(…args) {
if (args.length >= fn.length) {
return fn.apply(this, args);
} else {
return function (…args2) {
return curried.apply(this, args.concat(args2));
};
}
};
}
// 使用示例
function add(a, b, c) {
return a + b + c;
}
const curriedAdd = curry(add);
const addTwo = curriedAdd(1); // 返回一个函数，等待剩余参数
const result = addTwo(2, 3); // 调用返回的函数，得到结果 6
console.log(result); // 输出 6
在上面的例子中，`curry`函数接受一个函数`fn`作为参数，并返回一个新的函数`curried`。`curried`函数会根据传入的参数数量来决定是直接调用原始函数`fn`，还是返回一个新的函数来继续接收剩余的参数。通过递归和闭包，我们可以保证每次调用都返回一个新的函数，直到所有参数都提供完毕并执行原始函数。
需要注意的是，实现柯里化时，应该检查传入的参数数量与原始函数期望的参数数量，以确保在正确的时机执行原始函数。此外，现代的 JavaScript 库（如 lodash）已经提供了柯里化函数的实现，可以直接使用而无需手动实现。
### 56.简述你如何给一个事件处理函数命名空间，为什么要这样做?
在 JavaScript 中，给事件处理函数添加命名空间是一个有用的做法，它可以帮助我们更好地管理和控制事件的绑定和解除。以下是如何给一个事件处理函数添加命名空间的步骤，以及为什么要这样做的原因：
**如何给事件处理函数添加命名空间**
在绑定事件时，我们可以在事件名称后面添加一个自定义的字符串作为命名空间。这个字符串通常是一个点（.）后跟一个或多个标识符。例如：
element.addEventListener(“click.myNamespace”, function (event) {
// 处理点击事件
});
在这个例子中，`click.myNamespace`就是一个带有命名空间的事件名称。
**为什么要给事件处理函数添加命名空间**
1. **`避免事件冲突`**：当我们在同一个元素上绑定多个相同类型的事件处理函数时，这些函数可能会相互冲突或覆盖。通过给每个事件处理函数添加唯一的命名空间，我们可以确保它们不会相互干扰。
2. **`方便解除事件绑定`**：当我们需要解除某个特定的事件处理函数时，如果我们没有给它添加命名空间，我们可能需要遍历所有绑定到该元素的事件处理函数，然后逐个比较它们来确定要解除哪一个。而如果我们使用了命名空间，我们就可以直接通过命名空间来快速定位并解除对应的事件处理函数。
3. **`代码组织和可读性`**：通过给事件处理函数添加命名空间，我们可以更好地组织代码，使其更具可读性。命名空间可以帮助我们区分不同的事件处理函数组，从而更容易地理解和管理它们。
总的来说，给事件处理函数添加命名空间是一种提高代码质量和可维护性的有效方法。它可以帮助我们避免事件冲突，方便解除事件绑定，并提高代码的组织性和可读性。
### 57.阐述 AMD 和 Commonjs 的理解？
**理解：**
`AMD`是异步模块定义，它是 RequireJS 在推广过程中对模块定义的规范化产出，规范加载模块是异步的，依赖必须提前声明好；
`CommonJS`是一种后端 js 规范，是 Node.js 遵循的一种编写 js 模块的规范，它定义了模块的基本格式，以及模块加载的方式，规范加载模块是同步的，只有加载完成，才能执行后面的操作。
**区别：**
1. **`应用环境`**：
`AMD`是为浏览器端设计的模块加载方式，特别适用于处理网络环境中的复杂性和不确定性。
`CommonJS`则主要适用于服务器端，尤其是Node.js环境，它采用同步加载方式，非常适合处理存储在服务器硬盘上的模块文件。
2. **`加载方式`**：
`AMD`采用异步加载模块，这种方式可以非阻塞地加载和执行模块，提升了浏览器的响应性能，特别是在网络环境较差时更为优越。
`CommonJS`则是同步加载模块，必须等待模块加载完成后才能执行后续代码。
3. **`依赖处理`**：
`AMD`推崇依赖前置，即模块定义时必须明确所有依赖，这种方式可以提前加载依赖，但可能造成不必要的资源浪费。
`CommonJS`则按需加载依赖，即在运行时动态解析和处理依赖，这种方式更为灵活，但也可能导致运行时依赖未解决的情况。
### 58.JS 中的类是什么?
在 JavaScript 中，类（Class）是一种用户定义的类型，它提供了一种模板来创建具有相同属性和方法的对象。类是面向对象编程（OOP）的核心概念之一，它使得代码更加结构化、可维护和可复用。
类的好处主要体现在以下几个方面：
1. **`代码复用`**：通过定义类，我们可以创建多个具有相同属性和方法的对象，而无需重复编写相同的代码。这大大减少了代码的冗余，提高了代码的效率。
2. **`封装性`**：类可以将对象的属性和方法封装在一起，形成一个独立的单元。这有助于隐藏对象的内部状态和实现细节，只暴露必要的接口给外部使用。封装性增强了代码的安全性和可维护性。
3. **`继承性`**：JavaScript 中的类支持继承机制，子类可以继承父类的属性和方法。这使得我们可以创建具有层次结构的类，实现代码的复用和扩展。通过继承，子类可以继承父类的功能，并添加或覆盖自己的功能，从而构建更复杂、更灵活的对象。
4. **`多态性`**：多态性是面向对象编程的另一个重要特性，它允许使用父类类型的引用来引用子类对象。在 JavaScript 中，通过类的继承和方法的重写，我们可以实现多态性，使得不同类的对象可以响应相同的消息或方法调用，并执行各自特定的操作。
此外，使用类还有助于提高代码的可读性和可维护性。通过将相关的属性和方法组织在一个类中，我们可以更清晰地表达对象的结构和行为，使得代码更易于理解和修改。
总的来说，JavaScript 中的类提供了一种强大而灵活的方式来创建和管理对象，它使得面向对象编程在 JavaScript 中变得更加直观和高效。通过使用类，我们可以构建出结构清晰、可维护、可复用的代码，提高软件开发的效率和质量。
### 59.解释 JavaScript 中的异步编程，并提供一个异步操作的示例。
JavaScript 中的异步编程是指代码在执行时不会按照顺序立即完成，而是会等待某些操作（如网络请求、文件读写、定时器）完成后再继续执行。这种编程方式使得 JavaScript 能够处理耗时的操作，而不会阻塞主线程，从而提高应用程序的性能和响应能力。
**优点：**
1. **`非阻塞`**：异步操作不会阻塞主线程，允许其他代码继续执行。
2. **`高响应性`**：用户界面不会因为长时间运行的任务而变得无响应。
3. **`资源利用`**：在等待异步操作完成期间，主线程可以处理其他任务，从而更有效地利用系统资源。
**缺点：**
1. **`编程复杂度`**：异步编程可能使代码更难理解和维护，尤其是当涉及到多个异步操作时。
2. **`错误处理`**：在异步代码中，错误处理可能变得复杂，需要额外的注意和技巧。
3. **`回调地狱（Callback Hell）`**：使用回调函数进行异步编程时，可能会导致嵌套层级过深，使得代码难以阅读和理解。
**应用场景：**
1. **`网络请求`**：如 AJAX、Fetch API 用于从服务器获取数据。
2. **`文件读写`**：Node.js 中的文件系统操作。
3. **`定时器`**：setTimeout、setInterval 用于延迟执行或周期性执行代码。
4. **`Web Workers`**：在浏览器端执行复杂的计算任务，不阻塞主线程。
// 创建一个返回 Promise 的函数，模拟异步操作
function fetchData() {
return new Promise((resolve, reject) => {
// 假设这里是一个异步操作，例如网络请求
setTimeout(() => {
const data = “获取到的数据”;
resolve(data); // 异步操作成功时调用 resolve
}, 1000);
});
}
// 使用 async/await 调用 fetchData 函数
async function handleData() {
try {
const data = await fetchData(); // 等待 fetchData 函数的异步操作完成
console.log(data); // 输出：获取到的数据
} catch (error) {
console.error(“获取数据失败”, error);
}
}
handleData(); // 调用 handleData 函数开始异步操作
### 60.解释 JavaScript 中的模块化编程，并提供一个使用模块的示例?
在 JavaScript 中，模块化编程是一种将代码拆分成多个独立、可重用的模块的方法。每个模块都封装了特定的功能或数据，并且只暴露必要的接口供其他模块使用。模块化编程有助于组织代码，提高代码的可读性和可维护性，并促进代码的重用和协作。
ES6 模块化支持两种类型的模块：
1. **CommonJS 模块**：这是 Node.js 使用的模块系统，通过 `require` 导入模块，通过 `module.exports` 导出模块。
2. **ES6 模块**：这是 ECMAScript 2015 引入的原生模块系统，通过 `import` 导入模块，通过 `export` 导出模块。
下面是一个使用 ES6 模块的示例：
假设我们有一个名为 `mathFunctions.js` 的模块，它包含一些数学函数：
// mathFunctions.js
export function add(a, b) {
return a + b;
}
export function multiply(a, b) {
return a * b;
}
然后，我们可以在另一个 JavaScript 文件中导入并使用这些函数：
// main.js
import { add, multiply } from “./mathFunctions.js”;
console.log(add(2, 3)); // 输出 5
console.log(multiply(2, 3)); // 输出 6
### 61.解释 JavaScript 中的严格模式?
严格模式是 ES5 引入的一种 JavaScript 运行模式，它为 JavaScript 提供了一种更加严格的运行环境。这种模式通过在代码开头添加一个特定的编译指示符“use strict”来启用。严格模式的设计目的是使 JavaScript 代码在更严格的条件下执行，以便开发者更容易发现并修正错误，使代码更加健壮、安全和高效。
在严格模式下，JavaScript 引擎会执行更严格的语法和运行时检查，包括但不限于以下几点：
1. 变量必须先声明后使用。未声明的变量在严格模式下会被视为错误。
2. 严格模式不允许删除变量、函数或函数的参数。尝试这样做会导致运行时错误。
3. 在严格模式下，`this` 关键字的行为也发生了一些变化。例如，全局上下文中的 `this` 不再指向全局对象（如 `window`），而是 `undefined`，除非函数被显式地通过 `call()` 或 `apply()` 方法调用。
**优点：**
1. **`帮助捕获常见错误`**：通过引入更严格的语法和运行时检查，严格模式能够帮助开发者捕获到一些在宽松模式下可能会被忽略的错误。比如，变量必须先声明后使用，未声明的变量会导致错误；删除变量、函数或函数参数在严格模式下也是不允许的。
2. **`提高代码质量和可维护性`**：由于严格模式对代码进行了更严格的检查，这有助于开发者编写更加规范、高质量的代码。同时，严格的错误检查也使得代码调试更加容易，能够更早地发现并修复潜在的问题，从而提高代码的可维护性。
3. **`防止全局污染`**：在严格模式下，全局变量必须显式声明，这有助于防止因意外创建全局变量而导致的全局污染问题。
**缺点：**
1. **`兼容性问题`**：虽然现代浏览器大多支持严格模式，但在一些较旧的浏览器或环境中可能存在兼容性问题。因此，在使用严格模式时，需要考虑到目标用户群体的浏览器兼容性情况。
2. **`学习成本`**：对于不熟悉严格模式的开发者来说，可能需要一定的学习成本来适应这种更严格的编程环境。需要了解哪些操作在严格模式下是被禁止的，以及如何正确地编写符合严格模式要求的代码。`CommonJS`推崇依赖就绪，只有在代码执行时，才去 require 所依赖的模块。
### 62.Javascript 中， 什么是 use strict?使用它的好处和坏处分别是什么?
在 JavaScript 中，“use strict” 是一种特殊的字面量表达式，它被用在脚本或函数的开头，用于启用严格模式。严格模式使得 JavaScript 在执行时更加严格，有助于捕捉一些常见的编码错误，如使用未声明的变量等。
**使用 “use strict” 的好处：**
1. **`防止全局变量`**：在严格模式下，如果你尝试隐式地创建一个全局变量（例如，忘记使用 var 关键字），JavaScript 会抛出一个错误。这有助于防止意外的全局污染。
2. **`更严格的错误检查`**：严格模式会执行更严格的错误检查，例如，当你尝试删除一个不可删除的属性时，它会抛出一个错误。
3. **`防止函数参数重名`**：在严格模式下，函数中的参数不能有相同的名称。
4. **`防止对象字面量属性的重复`**：在严格模式下，对象字面量不能有重复的属性名称。
5. **`更好的性能`**：严格模式可以帮助 JavaScript 引擎进行某些优化，从而提高代码的性能。
6. **`改进调试`**：严格模式可以使调试过程更容易，因为它有助于识别潜在的错误。
**使用 “use strict” 的坏处：**
1. **`代码兼容性`**：不是所有的 JavaScript 代码都能在严格模式下运行。一些旧的库和框架可能无法与严格模式兼容。
2. **`增加代码复杂度`**：如果你的项目中的代码不需要严格模式的特性，那么在代码中添加"use strict"可能会增加不必要的复杂性。
3. **`额外的错误检查`**：虽然严格模式可以帮助识别错误，但它也可能导致一些在宽松模式下可以运行的代码在严格模式下失败。这可能需要额外的调试和修复工作。
总的来说，"use strict"是一个有用的工具，可以帮助你编写更安全、更可靠的 JavaScript 代码。然而，在使用它之前，你应该确保你的代码和依赖项都能够在严格模式下运行，并且你准备好处理可能出现的额外错误检查。
### 63.解释什么是工厂模式，有什么优缺点？
**`工厂模式`** 属于设计模式的创建型模式，通过实现共同的抽象接口创建属于同一类类型的不同对象实现，隐藏了对象创建的逻辑，提供了一种创建对象的最佳方式。
**`优点`**：屏蔽产品对象的具体实现，使调用者只关注接口；扩展性高，如果需要增加产品，只需要添加工厂类就可以，无需修改源代码；通过名字就可以创建想要的对象。
**`缺点`**：每增加一个产品类就要增加一个具体的产品类和工厂类，系统中的类成倍增加，增加了类的复杂度。
### 64.JavaScript 原型、原型链？有什么特点？
在 JavaScript 中，原型（prototype）和原型链（prototype chain）是面向对象编程的两个核心概念，它们对于理解 JavaScript 中的继承机制至关重要。
**原型（Prototype）**
在 JavaScript 中，每个函数都有一个`prototype`属性，这个属性是一个指向对象的引用。这个对象包含了可以由特定类型的所有实例共享的属性和方法。换句话说，`prototype`允许我们为对象的类型定义方法和属性。当创建一个新的对象实例时，这个实例会内部链接到这个`prototype`对象，从而可以访问其上的属性和方法。
**原型链（Prototype Chain）**
原型链是 JavaScript 实现对象间继承关系的一种方式。当一个对象试图访问一个属性时，如果这个对象本身并没有这个属性，那么 JavaScript 引擎会查找这个对象的`__proto__`属性（也就是它的原型对象）以寻找这个属性。如果原型对象也没有这个属性，那么引擎会继续查找原型对象的`__proto__`属性（也就是它的原型对象的原型对象），如此类推，形成一条链式结构，直到找到所需的属性或到达链的末尾（通常是`Object.prototype`）。这就是所谓的原型链。
**特点**
1. **`继承性`**：通过原型链，对象可以继承其原型对象的属性和方法，从而实现代码的重用和扩展。
2. **`动态性`**：原型和原型链是动态的，可以在运行时修改。这意味着可以随时向原型对象添加新的属性和方法，这些新的属性和方法会立即对所有基于该原型的对象可用。
3. **`性能考虑`**：虽然原型链提供了灵活的继承机制，但频繁地沿着原型链查找属性可能会对性能产生影响。因此，在设计对象结构时需要考虑性能优化。
4. **`覆盖与优先级`**：如果对象本身和它的原型都定义了一个同名属性，那么优先读取对象本身的属性，这被称为“覆盖”。这意味着对象自身的属性会覆盖原型链上的同名属性。
### 65.解释 JavaScript 中的事件委托是什么，并提供一个使用事件委托的示例?
事件委托（Event Delegation）是 JavaScript 中的一个重要概念，它主要利用事件冒泡的原理，将事件监听器添加到父元素上，而不是直接添加到目标元素上。这样，当在父元素内部的某个子元素上触发事件时，这个事件会冒泡到父元素，从而触发父元素上的事件监听器。
**使用事件委托的好处主要有以下几点：**
1. **`减少内存占用`**：只需要给父元素添加事件监听器，而不需要给每个子元素都添加，从而减少了内存占用。
2. **`动态内容处理`**：对于动态添加到父元素中的子元素，即使它们没有直接绑定事件监听器，也可以处理它们的事件，因为事件监听器是绑定在父元素上的。
**下面是一个使用事件委托的示例：**
假设我们有一个包含多个按钮的列表，每个按钮都有一个 `click` 事件。我们想要使用事件委托来处理这些按钮的点击事件。
// JavaScript 代码：
document
.getElementById(“button-container”)
.addEventListener(“click”, function (event) {
// 检查被点击的元素是否是我们要处理的按钮
if (event.target.matches(“button.my-button”)) {
alert("你点击了按钮: " + event.target.textContent);
}
});
在这个示例中，我们给 `button-container` 这个父元素添加了一个 `click` 事件监听器。当用户点击任何一个 `my-button` 类的按钮时，由于事件冒泡，这个点击事件会冒泡到 `button-container` 元素，并触发我们添加的事件监听器。然后，我们通过 `event.target` 检查被点击的元素是否是我们要处理的按钮，如果是，就执行相应的操作。
### 66.解释 JavaScript 中的原型继承是什么?
**`JavaScript中的原型继承`** 就是对象继承自其原型对象，在对象的原型对象中添加属性，该对象就会自动继承得到。
JavaScript 中的原型继承是通过原型链实现的，每个对象都有一个指向其原型（prototype）的内部链接。当试图访问一个对象的属性时，如果该对象内部不存在这个属性，那么 JavaScript 会在对象的原型上寻找这个属性，这就是原型链。通过原型链，一个对象可以继承其原型对象的属性和方法。在 JavaScript 中，可以使用 prototype 属性来为一个对象添加属性和方法，这些属性和方法将被该对象的所有实例继承。
### 67.简述 JavaScript 中现实对象继承的几种方式？
1. **原型链继承**
function Parent() {
this.name = “Parent”;
}
Parent.prototype.getName = function () {
return this.name;
};
function Child() {
this.age = 25;
}
Child.prototype = new Parent(); // 设置原型链指向 Parent 的实例
var child = new Child();
console.log(child.getName()); // 输出 ‘Parent’
2. **构造函数继承**
function Parent(name) {
this.name = name;
}
function Child(name, age) {
Parent.call(this, name); // 使用call将Parent作为构造函数调用
this.age = age;
}
var child = new Child(“Parent”, 25);
console.log(child.name); // 输出 ‘Parent’
3. **组合继承（原型链加构造函数）**
function Parent(name) {
this.name = name;
}
Parent.prototype.getName = function () {
return this.name;
};
function Child(name, age) {
Parent.call(this, name); // 使用call设置属性
this.age = age;
}
Child.prototype = new Parent(); // 设置原型链
var child = new Child(“Parent”, 25);
console.log(child.getName()); // 输出 ‘Parent’
4. **原型式继承**
function object(o) {
function F() {}
F.prototype = o;
return new F();
}
var parent = {
name: “Parent”,
getName: function () {
return this.name;
},
};
var child = object(parent);
console.log(child.getName()); // 输出 ‘Parent’
5. **寄生式继承**
function createAnother(original) {
var clone = object(original);
clone.sayHi = function () {
return “Hi”;
};
return clone;
}
var parent = {
name: “Parent”,
getName: function () {
return this.name;
},
};
var child = createAnother(parent);
console.log(child.sayHi()); // 输出 ‘Hi’
6. **ES6 类继承**
class Parent {
constructor(name) {
this.name = name;
}
getName() {
return this.name;
}
}
class Child extends Parent {
constructor(name, age) {
super(name); // 调用父类构造函数
this.age = age;
}
}
const child = new Child(“Parent”, 25);
console.log(child.getName()); // 输出 ‘Parent’
### 68.写出一个实现寄生式继承的方法？
`寄生式继承`是基于原型链和借用构造函数技术的一种混合继承模式。它借用了原型链的方式来实现继承，同时解决了借用构造函数继承中方法复用的问题。
以下是一个简单的寄生式继承的实现：
function createObject(proto) {
function F() {}
F.prototype = proto;
return new F();
}
function inheritPrototype(subType, superType) {
var prototype = createObject(superType.prototype); // 创建对象，以父类型原型为原型
prototype.constructor = subType; // 增强对象，将构造器指向子类型
subType.prototype = prototype; // 子类型的原型指向新创建的对象
}
function SuperType() {
this.property = true;
}
SuperType.prototype.getSuperValue = function () {
return this.property;
};
function SubType() {
SuperType.call(this); // 继承了SuperType，同时还保存了构造函数链
}
inheritPrototype(SubType, SuperType); // 寄生式继承
SubType.prototype.getSubValue = function () {
return this.property && !this.getSuperValue();
};
var instance1 = new SubType();
console.log(instance1.getSuperValue()); // true
console.log(instance1.getSubValue()); // false
在这个例子中，`createObject`函数用于创建一个新对象，其原型为传入的对象。`inheritPrototype`函数用于实现寄生式继承，它首先通过`createObject`创建了一个新对象，这个新对象的原型是父类型的原型，然后增强这个对象，将其构造器指向子类型，最后让子类型的原型指向这个新创建的对象。这样，子类型就继承了父类型的属性和方法，同时还可以在子类型的原型上添加新的方法。
### 69.什么是栈内存,什么是堆内存？
栈内存：是自动分配的内存区域，主要用于存储基本数据类型和对象的引用（而非对象本身）。在 JavaScript 中，局部变量（包括函数参数）就是栈内存中分配的。栈内存有一个重要的特性，既它是按照后进先出（LIFO）的原则进行管理的。当定义一个变量时，它会在栈内存中占据一定的空间，而当该变量不在需要时（例如函数执行完毕后），其占用的空间会自动被释放。这种自动的内存管理使得栈内存的操作非常高效且错误率较低。
堆内存：用于动态分配内存区域，主要用于存储对象（包括数组和函数）。在 JavaScript 中，当使用 new 关键字创建一个对象时，这个对象就会被分配在堆内存中。与栈内存不同，堆内存的对象生命周期是由 JavaScript 的垃圾收集机制来管理的。当没有任何引用指向一个对象时，垃圾收集器会将其标记为可回收，并在适当的
### 70.JS 如何实现多线程？
JavaScript 通常被视为单线程语言，因为它只有一个主线程来处理所有的任务。这意味着 JavaScript 代码在任何给定的时间只能执行一个任务。然而，JavaScript 提供了一些机制，使得它能够在某种程度上实现多线程的效果。以下是一些实现方式：
1. **Web Workers：** Web Workers 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。它们被设计为在 Web 内容在用户的浏览器上运行时运行后台任务。Web Workers 是运行在浏览器中的一个独立线程，它们不能访问 DOM，但可以通过 postMessage/onmessage 方法与主线程进行通信。
**`创建 Web Worker 的步骤：`**
* 创建一个新的 Worker 对象，指向一个 JavaScript 文件。
* 使用 postMessage 方法向 Worker 发送数据。
* 在 Worker 内部，监听 message 事件以接收数据，然后处理它。
* 使用 Worker 的 onerror 事件处理程序来处理任何错误。
2. **SharedArrayBuffer 和 Atomics：** 这两个 API 允许在多个 Worker 之间共享内存，并且提供了原子操作来确保内存访问的同步。SharedArrayBuffer 提供了一个用于存储固定长度的原始二进制数据的缓冲区，而 Atomics 提供了一种方法来以原子方式读取和写入 SharedArrayBuffer。
3. **Promise 和 async/await：** 虽然它们并不直接提供多线程，但它们提供了一种编写异步代码的方式，可以避免阻塞主线程。Promise 对象用于表示一个异步操作的最终完成（或失败）及其结果值。async/await 是基于 Promise 的语法糖，使得异步代码的书写和理解更接近同步代码。时机释放其占用内存。
### 71.Proxy 可以实现什么功能？
1. **`属性访问控制`**：你可以通过`Proxy`拦截对象属性的读取和写入操作。例如，你可以实现属性的私有性，或者在属性被访问或修改时执行某些操作。
2. **`数据验证`**：在对象属性被赋值时，你可以使用`Proxy`进行数据的验证。如果数据不符合预期，你可以阻止赋值操作。
3. **`日志和调试`** ：你可以使用`Proxy`来记录对象属性的访问和修改历史，这对于调试和性能分析非常有用。
4. **`非侵入式操作`**：`Proxy`允许你在不修改原始对象的情况下，对对象的行为进行扩展或修改。这对于第三方库或框架来说特别有用，因为它们可以在不改变原始代码的情况下添加新功能。
5. **`函数拦截`**：除了属性访问，`Proxy`还可以拦截函数调用，这使得你可以在执行函数前后添加自定义逻辑。
6. **`默认行为`**：即使你拦截了某些操作，`Proxy`也提供了默认的行为，你可以在必要时调用它们。例如，如果你拦截了属性查找操作但没有提供替换行为，那么`Proxy`会回退到默认的属性查找行为。
### 72.解释 JavaScript eval() 是做什么的？
`eval()` 是 JavaScript 中的一个内置函数，它的主要作用是将传入的字符串作为 JavaScript 代码进行解析和执行。
当你有一个字符串，而这个字符串实际上是有效的 JavaScript 代码时，你可以使用 `eval()` 来执行这段代码。例如：
let code = ‘console.log(“Hello, world!”)’;
eval(code); // 输出 “Hello, world!”
然而，尽管 `eval()` 有这样的功能，但在实际开发中，我们通常建议避免使用它，原因主要有以下几点：
1. **`安全性问题`**：eval() 执行的是任意字符串作为 JavaScript 代码，这可能导致安全隐患。如果执行的代码来自于不可信的源，那么它可能包含恶意代码，如尝试访问或修改其他对象，或者执行其他非法操作。
2. **`性能问题`**：eval()的执行速度通常比其他 JavaScript 代码慢，因为它需要 JavaScript 引擎去解析和执行字符串中的代码。
3. **`调试困难`**：当使用 eval()`时，如果在执行的代码中发生错误，那么错误追踪和调试可能会变得非常困难。
4. **`代码可读性`**：使用 eval()会使得代码更难阅读和理解，因为它隐藏了实际的执行逻辑。
因此，除非你非常清楚你正在做什么，并且确信你正在执行的代码是安全的，否则最好避免使用 `eval()`。在大多数情况下，都有更安全、更高效的替代方案，比如使用函数、对象和方法来组织你的代码。
### 73.说一说服务端渲染及优势？
在 JavaScript 中，服务端渲染（Server-Side Rendering，简称 SSR）是一种页面渲染技术，指在服务端（即服务器）完成页面的渲染工作，生成完整的 HTML 页面，然后将这个渲染好的页面直接发送给客户端（即用户的浏览器）。
**优点：**
1. **`搜索引擎优化（SEO）`**：搜索引擎爬虫能够直接解析和理解服务端渲染的 HTML 内容。由于爬虫通常只能抓取到页面的静态内容，而无法执行 JavaScript 代码，因此服务端渲染的页面更易于被搜索引擎识别和索引，从而提高网站在搜索结果中的排名。
2. **`首屏加载性能`**：在客户端渲染中，浏览器需要先下载并执行 JavaScript 代码，然后才能生成和渲染页面内容。而服务端渲染可以直接在服务器端生成完整的 HTML 响应，减少了客户端的处理时间，因此可以更快地提供页面内容给用户，提高了首屏加载的速度。
3. **`改善了用户体验`**：由于服务端渲染可以更快地提供内容，用户等待时间变短，页面白屏时间减少，从而改善了用户体验。此外，由于服务端已经生成了页面的初始状态，用户可以立即与页面进行交互，而无需等待 JavaScript 的下载和执行。
4. **`分担客户端压力`**：在客户端渲染中，大量的计算和渲染工作需要在用户的设备上完成，这可能对设备性能造成一定的压力。而服务端渲染将这些工作转移到服务器上，从而减轻了客户端设备的负担。
**缺点：**
1. 增加了服务端的资源消耗和维护成本；
2. 同时不利于前后端分离，需要前端来维护一个模板层
### 74.简述 attribute 和 property 的区别 ?
**定义不同**：
**`attribute`** 是 HTML 标签上的特性，它的值只能够是字符串；
**`property`** 是 DOM 中的属性，是 JavaScript 里的对象。
**获取方式不同：**
**`attribute`** 通过 getAttribute()方法获取；
**`property`** 通过点符号（.）或方括号([])来访问；
**包含内容不同：**
**`attribute`** 包含的是 HTML 元素上的附加信息，用于提供元素的更多描述和行为；
**`property`** 包含的是对象的状态或数据，并可以通过访问器方法（getter 和 setter）来控制对属性的读取和修改。
**兼容性：** document.ready 是 jQuery 库中的一个事件，而非原生 JavaScript 的一部分。在不这意味着使用 jQuery 的情况下，你将无法使用 document.ready。相比之下，document.onload 是原生 JavaScript 的一部分，具有更好的兼容性。
### 75.请指出 document.onload 和 document.ready 两个事件的区别?
**触发时间：** document.onload 事件在整个页面（包括所有图片、样式表、脚本等）都完全加载完毕后才会触发。这意味着，如果页面中有大量资源需要加载，用户可能需要等待一段时间才能看到 document.onload 事件触发的效果。相比之下，document.ready 事件在 DOM（Document Object Model，文档对象模型）结构绘制完成后就会触发，不必等待所有的外部资源如图片和样式表加载完成。因此，一般来说，document.ready 的触发时间要早于 document.onload。
**用途：** document.ready 更适合于需要在 DOM 结构绘制完成后立即执行的代码，例如修改页面元素的样式或绑定事件处理器等。而 document.onload 更适合于需要等待所有资源都加载完成后再执行的代码，例如需要图片资源才能正确显示的动画效果等。
### 76.说一下 token 能放在 cookie 中吗？
**`Token 可以放在 Cookie 中`**。Token 一般是用来判断用户是否登录的，它内部包含的信息有：用户唯一的身份标识（uid）、当前时间的时间戳（time）以及签名（sign）。Token 的存在本身只关心请求的安全性，而不关心 Token 本身的安全，因为 Token 是服务器端生成的，可以理解为一种加密技术。然而，将 Token 存储在 Cookie 中虽然可以自动发送，但存在不能跨域的问题，且如果 Cookie 内存放 Token，浏览器的请求默认会自动在请求头中携带 Cookie，容易受到 CSRF 攻击。因此，将 Token 存放在 Cookie 中时，不应设置 Cookie 的过期时间，且 Token 是否过期应由后端来判断。如果 Token 失效，后端应在接口中返回固定的状态表示 Token 失效，需要重新登录，并在重新登录时重新设置 Cookie 中的 Token。
总的来说，虽然可以将 Token 放在 Cookie 中，但需要注意相关的安全问题，并谨慎处理 Token 的过期和重新登录逻辑。在实际应用中，也可以考虑将 Token 存放在其他更安全的地方，如 localStorage 或 sessionStorage。
### 77.什么是长链接,的作用、用法和使用场景？
在 JavaScript 中，长链接（也称为持久连接、keep-alive 连接或连接保持）是一种通信机制，它允许客户端和服务器在一个连接上发送多个请求和响应，而无需为每个请求/响应对创建新的连接。这种机制显著降低了服务器的负载，提高了资源的使用率。
**作用**：
1. **`性能提升`**：通过复用同一个连接，长链接减少了频繁建立和关闭连接的开销，从而提高了应用的性能。
2. **`实时性增强`**：长链接适用于需要实时数据更新的场景，因为它允许服务器主动推送数据到客户端，无需客户端频繁轮询。
3. **`资源节约`**：由于减少了连接建立和断开的次数，长链接也节约了网络资源。
**用法**：
在 JavaScript 中，你可以通过以下方式使用长链接：
1. **`使用XMLHttpRequest或Fetch API`**：这两个 API 在发送 HTTP 请求时默认使用长连接。当使用它们时，你无需额外配置即可享受长链接带来的好处。
2. **`WebSocket`**：WebSocket 是另一种实现长链接的方式。它提供了一个全双工的通信通道，允许服务器和客户端之间实时地交换数据。
### 更多面试题
**《350页前端校招面试题精编解析大全》**内容大纲主要包括 **HTML，CSS，前端基础，前端核心，前端进阶，移动端开发，计算机基础，算法与数据结构，项目，职业发展等等**
**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
问；
**包含内容不同：**
**`attribute`** 包含的是 HTML 元素上的附加信息，用于提供元素的更多描述和行为；
**`property`** 包含的是对象的状态或数据，并可以通过访问器方法（getter 和 setter）来控制对属性的读取和修改。
**兼容性：** document.ready 是 jQuery 库中的一个事件，而非原生 JavaScript 的一部分。在不这意味着使用 jQuery 的情况下，你将无法使用 document.ready。相比之下，document.onload 是原生 JavaScript 的一部分，具有更好的兼容性。
### 75.请指出 document.onload 和 document.ready 两个事件的区别?
**触发时间：** document.onload 事件在整个页面（包括所有图片、样式表、脚本等）都完全加载完毕后才会触发。这意味着，如果页面中有大量资源需要加载，用户可能需要等待一段时间才能看到 document.onload 事件触发的效果。相比之下，document.ready 事件在 DOM（Document Object Model，文档对象模型）结构绘制完成后就会触发，不必等待所有的外部资源如图片和样式表加载完成。因此，一般来说，document.ready 的触发时间要早于 document.onload。
**用途：** document.ready 更适合于需要在 DOM 结构绘制完成后立即执行的代码，例如修改页面元素的样式或绑定事件处理器等。而 document.onload 更适合于需要等待所有资源都加载完成后再执行的代码，例如需要图片资源才能正确显示的动画效果等。
### 76.说一下 token 能放在 cookie 中吗？
**`Token 可以放在 Cookie 中`**。Token 一般是用来判断用户是否登录的，它内部包含的信息有：用户唯一的身份标识（uid）、当前时间的时间戳（time）以及签名（sign）。Token 的存在本身只关心请求的安全性，而不关心 Token 本身的安全，因为 Token 是服务器端生成的，可以理解为一种加密技术。然而，将 Token 存储在 Cookie 中虽然可以自动发送，但存在不能跨域的问题，且如果 Cookie 内存放 Token，浏览器的请求默认会自动在请求头中携带 Cookie，容易受到 CSRF 攻击。因此，将 Token 存放在 Cookie 中时，不应设置 Cookie 的过期时间，且 Token 是否过期应由后端来判断。如果 Token 失效，后端应在接口中返回固定的状态表示 Token 失效，需要重新登录，并在重新登录时重新设置 Cookie 中的 Token。
总的来说，虽然可以将 Token 放在 Cookie 中，但需要注意相关的安全问题，并谨慎处理 Token 的过期和重新登录逻辑。在实际应用中，也可以考虑将 Token 存放在其他更安全的地方，如 localStorage 或 sessionStorage。
### 77.什么是长链接,的作用、用法和使用场景？
在 JavaScript 中，长链接（也称为持久连接、keep-alive 连接或连接保持）是一种通信机制，它允许客户端和服务器在一个连接上发送多个请求和响应，而无需为每个请求/响应对创建新的连接。这种机制显著降低了服务器的负载，提高了资源的使用率。
**作用**：
1. **`性能提升`**：通过复用同一个连接，长链接减少了频繁建立和关闭连接的开销，从而提高了应用的性能。
2. **`实时性增强`**：长链接适用于需要实时数据更新的场景，因为它允许服务器主动推送数据到客户端，无需客户端频繁轮询。
3. **`资源节约`**：由于减少了连接建立和断开的次数，长链接也节约了网络资源。
**用法**：
在 JavaScript 中，你可以通过以下方式使用长链接：
1. **`使用XMLHttpRequest或Fetch API`**：这两个 API 在发送 HTTP 请求时默认使用长连接。当使用它们时，你无需额外配置即可享受长链接带来的好处。
2. **`WebSocket`**：WebSocket 是另一种实现长链接的方式。它提供了一个全双工的通信通道，允许服务器和客户端之间实时地交换数据。
### 更多面试题
**《350页前端校招面试题精编解析大全》**内容大纲主要包括 **HTML，CSS，前端基础，前端核心，前端进阶，移动端开发，计算机基础，算法与数据结构，项目，职业发展等等**
**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
[外链图片转存中...(img-hYsCLmLB-1715020463965)]
扫一扫
4337
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
