前端

服务端

计算机基础

Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web 1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。2005年以后，互联网进入Web 2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。



React 中的 `useContext` 钩子是一个用于让组件能够访问 React 上下文（Context）的工具。这个上下文设计用于共享那些对于一个组件树而言是“全局”的数据，如当前认证的用户、主题或首选语言等。 

### 使用方式：

首先，你需要创建一个 Context 对象。这可以通过 `React.createContext()` 完成，并且通常会在组件树的较高层级上完成。

```javascript
import React from 'react';

// 创建 Context 对象
const MyContext = React.createContext(defaultValue);
```

一旦你有了一个 Context 对象，就可以使用 `Context.Provider` 组件包裹你的组件树的一部分，以在其下所有的组件中提供上下文数据。

```javascript
<MyContext.Provider value={/* 某些值 */}>
  {/* 组件树 */}
</MyContext.Provider>
```

然后，在组件树中的任何层级上，你都可以使用 `useContext` 钩子来访问该上下文。

```javascript
import React, { useContext } from 'react';

function MyComponent() {
  // 使用 useContext 钩子获取上下文值
  const contextValue = useContext(MyContext);
  return <div>{/* 使用 contextValue 做些什么 */}</div>;
}
```

通过使用 `useContext` 钩子，你不需要通过组件的 `props` 手动传递数据，可以直接访问上层组件通过 `Context.Provider` 提供的数据。

### 使用场景：

1. **主题切换**：当你想要在应用程序中切换主题时，你可以使用上下文来保持当前主题的状态，并在整个应用程序中轻松访问它。
2. **用户认证**：在需要知道当前用户是否已经登录的多个组件中，你可以使用上下文来共享用户的登录状态和用户信息。
3. **国际化**：你可以使用上下文来存储当前的语言设置，并在组件树中的任何地方访问它，以便于国际化。
4. **状态管理**：在某些简单的情况下，你可以使用上下文来代替其他状态管理库（如 Redux），来存储和管理全局状态。

### 示例：

假设我们有一个需要在多个组件之间共享的用户认证状态，可以这样使用 `useContext`：

```javascript
// AuthContext.js
import React, { createContext, useState } from 'react';

// 创建上下文对象，初始值为 null
export const AuthContext = createContext(null);

// 创建一个提供者组件
export const AuthProvider = ({ children }) => {
  const [authUser, setAuthUser] = useState(null);

  // 登录逻辑
  const signIn = (username, password) => {
    // 假设验证逻辑在这里
    const user = { name: 'Mock User', username };
    setAuthUser(user);
  };

  // 登出逻辑
  const signOut = () => {
    setAuthUser(null);
  };

  return (
    <AuthContext.Provider value={{ authUser, signIn, signOut }}>
      {children}
    </AuthContext.Provider>
  );
};

// App.js
import React from 'react';
import { AuthProvider } from './AuthContext';
import MyComponent from './MyComponent';

function App() {
  return (
    <AuthProvider>
      <MyComponent />
    </AuthProvider>
  );
}

// MyComponent.js
import React, { useContext } from 'react';
import { AuthContext } from './AuthContext';

function MyComponent() {
  const { authUser, signIn, signOut } = useContext(AuthContext);

  return (
    <div>
      {authUser ? (
        <div>
          <p>Welcome, {authUser.name}!</p>
          <button onClick={signOut}>Sign out</button>
        </div>
      ) : (
        <button onClick={() => signIn('user', 'password')}>
          Sign in
        </button>
      )}
    </div>
  );
}
```


React 中 useContext 的使用方式和使用场景有哪些？

### Ajax请求的串行实现

对于串行执行多个Ajax请求，我们通常需要确保一个请求完全完成后，再执行下一个请求。这可以通过链式调用`then`方法来实现，也就是在每个Promise对象的`then`方法中启动下一个Ajax请求。

```javascript
function ajaxRequest(url) {
    return new Promise((resolve, reject) => {
        // 这里是Ajax请求的代码，成功时调用resolve，失败时调用reject
        const xhr = new XMLHttpRequest();
        xhr.open('GET', url);
        xhr.onload = () => resolve(xhr.responseText);
        xhr.onerror = () => reject(xhr.statusText);
        xhr.send();
    });
}

const urls = ['/url1', '/url2', '/url3']; // 假设我们有多个请求需要串行处理

let promiseChain = Promise.resolve(); // 初始化一个已完成的Promise

urls.forEach(url => {
    promiseChain = promiseChain.then(() => ajaxRequest(url)).then(response => {
        console.log('请求完成:', response);
        // 这里可以处理每个请求的响应
    });
});

// 最后可以在所有请求都完成后执行一些操作
promiseChain.then(() => {
    console.log('所有请求都已串行完成。');
});
```

在这个例子中，每个请求仅在前一个请求的`then`方法中被调用，这确保了请求的串行执行。

### Ajax请求的并行实现

要并行执行多个Ajax请求，可以使用`Promise.all`方法。`Promise.all`接收一个Promise对象数组，等待所有的Promise对象都成功完成后，它将返回一个新的Promise，这个新Promise将解析为一个结果数组，数组中的每个结果对应于原Promise数组中的每个请求。

```javascript
function ajaxRequest(url) {
    return new Promise((resolve, reject) => {
        // 这里是Ajax请求的代码，成功时调用resolve，失败时调用reject
        const xhr = new XMLHttpRequest();
        xhr.open('GET', url);
        xhr.onload = () => resolve(xhr.responseText);
        xhr.onerror = () => reject(xhr.statusText);
        xhr.send();
    });
}

const urls = ['/url1', '/url2', '/url3']; // 假设我们有多个请求需要并行处理

const promises = urls.map(ajaxRequest); // 创建一个包含所有请求的Promise数组

Promise.all(promises).then(responses => {
    console.log('所有请求都已并行完成。');
    responses.forEach(response => {
        console.log('请求完成:', response);
        // 这里可以处理每个请求的响应
    });
}).catch(error => {
    // 如果任何一个请求失败，这里会捕获到错误
    console.error('请求失败:', error);
});
```

在这个例子中，`Promise.all`并行地处理所有的Ajax请求，并在所有请求成功完成后，按照请求的顺序输出响应结果。如果任何一个请求失败，`Promise.all`会立即拒绝，并返回第一个遇到的错误。

这两种方法是处理多个Ajax请求时常用的串行和并行模式。根据实际需求选择合适的方式。在实际面试中，可以根据面试官的要求提供更详细的代码实例或解释。

如何基于 Promise.all 实现Ajax请求的串行和并行？

HTML文档中，attribute（属性）和property（属性）这两个术语经常使用，它们在不同的上下文中有不同的含义。 

### 对象导向编程中的Attribute和Property

在对象导向编程（OOP）的上下文中，attribute和property通常指代与对象关联的数据，但它们的概念和用途有所不同。

**Attribute (属性)：**

- 在OOP中，attribute通常指的是对象的内部状态，它们是类定义中的变量。
- 这些是对象的数据成员，用于存储对象的信息。
- 例如，假设我们有一个 `Car`类，那么 `color`和 `model`可能是 `Car`对象的attributes。

**Property (属性)：**

- Property在OOP中通常指的是提供对attribute的访问的一种特殊方法，这些方法通常是通过getter和setter方法暴露的。
- Property允许封装attribute，从而可以在读取或修改attribute时添加附加的逻辑，如验证或事件触发。
- 例如，`Car`类可能有一个 `mileage`属性，它通过getter方法 `get_mileage()`和setter方法 `set_mileage(value)`来访问和修改里程信息，而不是直接公开一个 `mileage` attribute。

### HTML文档处理中的Attribute和Property

在HTML和Web开发的上下文中，attribute和property也有不同的含义。

**Attribute (属性)：**

- HTML attribute是HTML标签的一部分，用于在HTML文档中为元素定义特定的配置或行为。
- Attributes在HTML源代码中明确定义，例如 `<input type="text" value="Hello">`中的 `type`和 `value`。
- Attributes的值通常是在页面加载时定义的静态值。

**Property (属性)：**

- HTML元素在浏览器中表示为JavaScript对象，这些对象具有properties。
- 这些properties与JavaScript运行时相连，表示DOM元素的当前状态。
- Properties可以在运行时动态改变，例如，通过JavaScript改变input元素的 `value` property，`document.getElementById('myInput').value = 'New Value';`。

### 示例：

考虑HTML中的一个 `<input>`元素，其初始HTML可能如下所示：

```html
<input id="myInput" type="text" value="Initial">
```

这里，`id`、`type`和 `value`都是HTML attributes。

当页面加载后，我们可以通过JavaScript访问 `<input>`元素的property，比如：

```javascript
var inputElement = document.getElementById('myInput');
console.log(inputElement.value); // 输出: Initial
```

在这个时候，`value` attribute和 `value` property都是“Initial”。然而，如果用户在input框中输入新的文本，比如“Hello”，那么 `value` property将改变，而 `value` attribute仍然为“Initial”。


attribute和property的区别是什么

在移动端H5开发中，300ms点击延迟是一个历史问题，它最初是由于早期智能手机的浏览器为了区分单击与双击（放大操作）而故意设置的。用户在触摸屏幕的时候，浏览器会等待大约300毫秒来判断用户是否要进行双击操作。这在现代的Web开发中通常是不必要的，并且会导致用户体验下降。以下是几种常见的解决方法：

1. **使用viewport meta标签**：
   通过在HTML中添加viewport meta标签，可以禁用用户缩放，从而消除延迟。例如：
   ```html
   <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
   ```
   这段代码能禁止用户缩放页面，因此浏览器不需要等待判断用户是否要双击缩放，从而消除了300ms延迟。

2. **CSS touch-action属性**：
   CSS的`touch-action`属性可以用来指定某个元素的一些触摸行为，例如：
   ```css
   button {
     touch-action: manipulation;
   }
   ```
   这个属性设置后可以关闭某些默认的触摸操作，比如缩放和双击滚动，从而消除延迟。

3. **快速点击库（如FastClick）**：
   FastClick是一个流行的JavaScript库，用于在不支持Pointer Events的浏览器上消除点击延迟。它通过监听触摸事件来避开300ms延迟。直接在`touchend`事件触发后立即发出click事件，从而绕过浏览器自身的300ms延迟。使用方法很简单，只需要在页面加载完毕后实例化FastClick对象即可：
   ```javascript
   if ('addEventListener' in document) {
     document.addEventListener('DOMContentLoaded', function() {
         FastClick.attach(document.body);
     }, false);
   }
   ```
4. **利用Pointer Events**：
   Pointer Events是一个浏览器的新标准，它可以合并触摸、鼠标、笔和其他类型的输入事件。通过使用pointerevent，你可以避免300ms延迟。例如：
   ```js
   element.addEventListener('pointerdown', function(event) {
     // 处理点击事件
   });
   ```
   然而，并非所有浏览器都支持Pointer Events，因此需要检查兼容性或使用polyfill。

5. **使用`touchstart`或`touchend`代替click事件**：
   你也可以直接监听`touchstart`或者`touchend`事件来代替click事件，这样可以避免等待300ms。但这种方法需要注意的是，`touchstart`和`touchend`可能会在用户没有意图点击时触发（例如滚动屏幕时），所以需要额外的逻辑来判断实际的用户意图。

以上就是几种常用的解决移动端H5点击300ms延迟的方法。在实际开发中，可能需要根据具体情况和浏览器的兼容性选择最适合的方案。

前端如何解决移动端H5点击有300ms延迟？

React 元素有一个 `$$typeof` 属性的原因主要是出于安全考虑，它是用来防止一种名为 XSSI（跨站脚本包含）的攻击。`$$typeof` 属性可以帮助确保在 React 应用中引入的数据是有效的 React 元素，而非恶意对象。

在过去，攻击者可能会尝试利用 JSONP 等技术将恶意脚本插入到网站中。JSONP 是一种通过 `<script>` 标签载入跨域的 JSON 数据的方法。在 JSONP 中，由于 `<script>` 标签会执行载入的内容，如果返回的数据不是纯粹的 JSON 而是可执行的 JavaScript 代码，那么它就可能被用于执行恶意脚本。

为了防止这种攻击，React 开发团队引入了 `$$typeof` 属性。每个通过 React.createElement 创建的元素都会自动添加这个属性。这个属性的值是一个特殊的符号（在支持 Symbol 的 JavaScript 环境中）或者一个特定的数字（在不支持 Symbol 的环境中）。这样，在 React 对元素进行处理之前，它可以检查元素是否具有正确的 `$$typeof` 值，确保该元素是由 React 创建的，从而防止可能的 XSSI 攻击。

例如，如果我们通过网络请求获取了一个对象，并且直接将其作为子元素传递给 React 来渲染，React 会检查这个对象是否具有正确的 `$$typeof` 属性。如果没有，React 将不会将其作为 React 元素进行处理，这样就能防止恶意对象被当作 React 元素来渲染，从而避免潜在的安全风险。

总之，`$$typeof` 属性是 React 为了增强应用安全而引入的一个机制，用于验证被处理的元素确实是通过 React 的正确方式创建的，从而避免了某些类型的安全漏洞。

为什么 React 元素有一个 $$typeof 属性

深拷贝和浅拷贝是编程中用于复制数据结构的两种不同方法，它们在复制复杂对象（如包含其他对象的对象或数组等）时的行为上有所区别。

### 浅拷贝

浅拷贝（Shallow Copy）只复制对象的顶层结构，如果对象中包含了对其他对象的引用，浅拷贝不会复制被引用的对象本身，而是复制引用。因此，原始对象和浅拷贝后的对象会共享相同的引用类型数据。

**例子**：
假设我们有一个对象`A`，它包含一个指向另一个对象`B`的引用。如果我们对`A`进行浅拷贝得到`A'`，那么`A'`中会有一个指向`B`的引用，而不是`B`的一个拷贝。如果我们修改`B`，那么这个修改会通过`A`和`A'`的引用被反映出来。

```python
import copy

original_list = [1, 2, [3, 4]]
shallow_copied_list = copy.copy(original_list)

# 修改原始列表中的嵌套列表元素
original_list[2][0] = "changed"

# 输出被浅拷贝的列表
print(shallow_copied_list)  # 输出将会是 [1, 2, ["changed", 4]]
```

在这个例子中，修改原始列表中嵌套列表的元素也会影响到浅拷贝的列表，因为它们共享同一个嵌套列表对象的引用。

### 深拷贝

深拷贝（Deep Copy）不仅仅复制对象的顶层结构，还会递归地复制所有对象的成员，包括对象中引用的对象。这样，原始对象和深拷贝后的对象不会共享任何引用类型的数据。

**例子**：
使用相同的对象`A`和`B`，如果我们对`A`进行深拷贝得到`A''`，那么`A''`将会包含一个`B`的完整拷贝`B'`。此时，如果我们修改`B`，`A''`中的`B'`不会受到影响，因为`B'`是一个独立的对象。

```python
import copy

original_list = [1, 2, [3, 4]]
deep_copied_list = copy.deepcopy(original_list)

# 修改原始列表中的嵌套列表元素
original_list[2][0] = "changed"

# 输出被深拷贝的列表
print(deep_copied_list)  # 输出将会是 [1, 2, [3, 4]]
```

在这个例子中，深拷贝的列表保持原有结构，不受原始列表中嵌套列表元素修改的影响。

总结来说，浅拷贝只复制了最顶层的对象，深拷贝则是复制了所有层级的对象，确保了复制体与原始数据结构之间完全独立。在实际应用中，选择浅拷贝还是深拷贝取决于具体的需求和情况。

什么是深拷贝？什么是浅拷贝？

双向绑定是一种编程模式，用于简化用户界面与应用状态之间的同步。在传统的单向绑定中，用户界面(UI)只是从应用状态中读取数据并显示出来；而在双向绑定模式中，UI不仅可以显示出应用状态，还可以修改它，反过来也一样，应用状态的改变也会立即反映在UI上。

在Vue.js中，双向绑定主要通过`v-model`指令实现。`v-model`指令在内部使用了Vue的响应式系统，这个系统基于Object.defineProperty或Proxy(在Vue 3中)实现。下面是Vue实现双向绑定的两个主要步骤：

1. **响应式数据的建立**：
   - 在Vue 2.x版本中，Vue通过Object.defineProperty方法拦截对data对象属性的访问和修改。Vue将data对象中的每个属性都转换为getter/setter，并且在内部追踪这些属性的依赖（即哪些组件或计算属性依赖于这个数据属性）。
   - 在Vue 3.x版本中，Vue使用了ES6的Proxy特性来实现响应式。Proxy可以更灵活地拦截和定义对象属性的行为，包括属性的读取、写入以及枚举等，并且它是以更精细的方式工作，不再需要递归地遍历每个属性。
   
2. **依赖收集与派发更新**：
   - 当组件进行渲染时，会访问与之相关的响应式数据属性，这时Vue会进行依赖收集，即记录下当前组件依赖了哪些数据。
   - 当响应式数据发生变化时，Vue会通知所有依赖于这个数据的组件进行更新。
   - 如果是通过`v-model`绑定的输入元素（如`<input>`, `<select>`, `<textarea>`等）发生了用户输入，`v-model`会监听这些输入事件，将新的值赋值给绑定的数据属性。数据的更新又会触发组件的重新渲染，从而将更新反映在UI上。

例如，考虑下面的Vue模板代码：

```html
<input v-model="message">
```

这里的`v-model`指令绑定了一个名为`message`的数据属性。当用户在输入框中输入文字时，`message`的值会被更新，同时，如果其他地方的代码改变了`message`的值，输入框中显示的内容也会相应更新。

这种机制的好处是，开发者不需要手动监听输入事件然后更新数据，也不需要观察数据的变化再去更新UI，Vue的双向绑定机制会自动处理这一切。

什么是双向绑定？Vue 是如何实现双向绑定功能的？

在 Vue 3 中，`setup` 函数是组件选项 API 的替代，它允许您在组件创建之前使用组合式 API 设置组件的响应式状态和函数。通常情况下，`setup` 函数内部并不直接提供组件实例，因为它在组件实例创建之前就被调用了。但是，您可以通过 Vue 提供的 `getCurrentInstance` 方法来获取当前组件实例。

请注意，`getCurrentInstance` 主要用于库和框架的开发者，而不是推荐给普通应用程序开发中使用，因为它暴露了一些内部的 API，可能会导致与 Vue 的未来版本不兼容。

下面是如何在 `setup` 函数中获取组件实例的示例：

```javascript
import { getCurrentInstance } from 'vue';

export default {
  setup() {
    // 获取当前组件实例
    const instance = getCurrentInstance();
    
    // 确保 instance 不为 null
    if (instance) {
      // 现在你可以访问组件实例的属性和方法
      console.log(instance.proxy); // 输出 Vue 代理对象，包含 data、methods 等
    }

    // 定义 setup 函数返回的响应式数据和方法
    return {
      // ...
    };
  },
};
```

在上述代码中，我们首先从 `vue` 导入了 `getCurrentInstance` 函数。在 `setup` 函数内部，我们调用了这个函数以获取当前组件的实例。`getCurrentInstance` 返回的是一个包含组件实例的内部数据的对象，其中 `instance.proxy` 属性代表了组件的代理对象，它包含组件的所有响应式数据、计算属性以及方法等。

使用 `getCurrentInstance` 时，请确保您的代码不过度依赖于 Vue 的内部实现，以免在未来的 Vue 版本升级中产生兼容问题。

vue3 中 setup 中如何获取组件实例

JavaScript的继承方式主要包括以下几种：

### 1. 原型链继承 (Prototype Chain Inheritance)

原型链继承是JavaScript最基本的继承方式。每个JavaScript对象都有一个原型（`prototype`），对象从其原型继承属性和方法。创建子类时，将子类的原型设置为父类的实例，从而实现继承。

```javascript
function Parent() {
    this.parentProperty = true;
}

Parent.prototype.getParentProperty = function() {
    return this.parentProperty;
};

function Child() {
    this.childProperty = false;
}

Child.prototype = new Parent(); // 设置Child的原型为Parent的实例
Child.prototype.constructor = Child; // 修正constructor指向

var childInstance = new Child();
console.log(childInstance.getParentProperty()); // true
```

原型链继承存在的问题包括：创建子类实例时不能向父类构造函数传参，而且所有实例共享父类构造函数中的引用属性。

### 2. 构造函数继承 (Constructor Inheritance)

构造函数继承使用父类构造函数来增强子类实例，通过 `call`或 `apply`方法在子类构造函数中调用父类构造函数。

```javascript
function Parent(name) {
    this.name = name;
    this.colors = ['red', 'blue', 'green'];
}

function Child(name) {
    Parent.call(this, name); // 子类构造函数中调用父类构造函数
}

var childInstance = new Child('ChildName');
console.log(childInstance.name); // ChildName
```

这种方式允许不同的子类实例有不同的属性。不过，它无法继承父类原型上定义的方法，因此不是真正意义上的继承。

### 3. 组合继承 (Combination Inheritance)

组合继承结合了原型链和构造函数的技术，通过使用原型链继承原型上的属性和方法，使用构造函数继承实例属性。

```javascript
function Parent(name) {
    this.name = name;
    this.colors = ['red', 'blue', 'green'];
}

Parent.prototype.sayName = function() {
    return this.name;
};

function Child(name, age) {
    Parent.call(this, name); // 借用构造函数继承属性
    this.age = age;
}

Child.prototype = new Parent(); // 原型链继承方法
Child.prototype.constructor = Child;

var childInstance = new Child('ChildName', 18);
console.log(childInstance.sayName()); // ChildName
console.log(childInstance.age); // 18
```

组合继承弥补了原型链和构造函数继承的不足，然而它也使得父类构造函数被调用两次，造成了一些不必要的性能开销。

### 4. 原型式继承 (Prototypal Inheritance)

原型式继承是指使用一个已有对象作为新创建对象的原型。ES5引入了 `Object.create`方法来实现原型式继承。

```javascript
var parent = {
    name: 'Parent',
    sayName: function() {
        return this.name;
    }
};

var child = Object.create(parent);
child.name = 'Child';

console.log(child.sayName()); // Child
```

这种方式非常简洁，但同样，所有实例会共享引用属性。

### 5. 寄生式继承 (Parasitic Inheritance)

寄生式继承类似于原型式继承，但是在此基础上可以增加更多属性或方法。

```javascript
var parent = {
    name: 'Parent',
    sayName: function() {
        return this.name;
    }
};

function createAnother(original) {
    var clone = Object.create(original);
    clone.sayHi = function() {
        console.log('Hi');
    };
    return clone;
}

var child = createAnother(parent);
child.sayHi(); // Hi
```


JavaScript 的继承方式有哪些？

在JavaScript中实现自定义事件主要有以下几个步骤：

1. **创建自定义事件**：您可以使用`Event`构造器或者更专门化的构造器如`CustomEvent`来创建一个事件。`CustomEvent`构造器还允许您传递附加的信息（称为“详情”或`detail`属性）。

2. **触发自定义事件**：使用`dispatchEvent`方法可以在特定的元素上触发自定义事件。调用此方法时，您需要传递您创建的事件对象。

3. **监听自定义事件**：使用`addEventListener`方法可以在一个元素上添加一个事件监听器，当特定的事件类型被触发时执行回调函数。

以下是一个简单的例子：

```javascript
// 第一步：创建一个自定义事件
// 这里我们创建一个名为 "userLogin" 的事件，并携带一些用户信息
var loginEvent = new CustomEvent("userLogin", {
  detail: {
    username: "JohnDoe"
  }
});

// 第二步：监听这个自定义事件
// 假设我们希望在文档的某个元素上监听这个事件
document.addEventListener("userLogin", function(e) {
  console.log("用户登录事件被触发，登录用户名为：" + e.detail.username);
});

// 第三步：触发自定义事件
// 当需要的时候，我们可以在任何时候触发这个自定义事件
document.dispatchEvent(loginEvent);
```

在这个例子中，我们定义了一个名为"userLogin"的自定义事件，它在用户登录时被触发。当这个事件被触发时，我们添加了一个监听器来处理这个事件，并输出了用户的名字。这样，我们就可以在应用程序的任何部分触发"用户登录"事件，并且相关的处理逻辑会被执行。

这种机制非常有用，特别是在需要在不相关的组件之间传递信息或者在特定的行为之后触发一系列的行为时。使用自定义事件可以使我们的应用程序更加模块化，事件的生产者与消费者可以松耦合地交互。

前端面试题手册