Vue3面试题与深拷贝详解：浅拷贝与this指向解析

本资源总结主要涵盖了面试题中的关键知识点，涉及JavaScript中深浅拷贝的原理与实现以及this关键字在不同场景下的行为。以下是详细内容： **一、深拷贝与浅拷贝** 深拷贝与浅拷贝是JavaScript对象复制时的重要概念。浅拷贝仅复制对象的引用，当对象包含复杂数据类型（如数组或对象）时，只复制其地址，导致修改源对象也会改变目标对象。一个常见的浅拷贝实现是使用JSON.stringify和parse组合，但这种方法有局限性，无法识别`undefined`和函数。 另一种实现深拷贝的方法是递归函数，通过遍历对象的所有属性并创建新的副本进行复制，确保即使遇到嵌套的对象或数组，也能独立于原对象存在。下面是一个递归深拷贝函数示例： ```javascript function deep(obj) { if (typeof obj !== 'object' || obj === null) { return obj; } let targetObj = Array.isArray(obj) ? [] : {}; for (const key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { const value = obj[key]; targetObj[key] = value instanceof Object ? deep(value) : value; } } return targetObj; } ``` **二、this关键字的指向** JavaScript中的`this`关键字根据上下文的不同，其指向会发生变化： 1. **普通函数**：`this`指向全局对象（浏览器中是`window`，Node.js中是`global`）。 2. **定时器**：`this`同样指向全局对象。 3. **箭头函数**：没有自己的`this`，它继承自父作用域，通常用于避免this的动态绑定问题。 4. **事件处理函数**：`this`指向触发事件的元素。 5. **构造函数**：`this`指向新创建的实例对象。 6. **类(class)**：`this`在构造函数中也指向新创建的实例对象。 7. **自调用函数**：如果没有明确的上下文，`this`指向`window`。 例如，在方法或函数内部，`this`取决于调用方式，可以通过`.call()`或`.apply()`手动设置，或者在构造函数中通过`new`关键字确定其指向。 理解深浅拷贝和`this`的行为对于编写可维护和灵活的JavaScript代码至关重要，特别是处理复杂对象结构和回调函数时。掌握这些知识点有助于在面试中展现扎实的编程基础和理解能力。