js高级复习

文章目录

• 一、原型与原型链
• • • [1. 基础概念](#1. 基础概念)
    • [2. 三大核心等式](#2. 三大核心等式)
    • [3. 原型链查找规则（属性 / 方法）](#3. 原型链查找规则（属性 / 方法）)
    • [4. 面试高频](#4. 面试高频)
• 二、作用域、作用域链、闭包
• • • [1. 三大作用域](#1. 三大作用域)
    • [2. 作用域链](#2. 作用域链)
    • [3. 闭包](#3. 闭包)
• [三、this 指向](#三、this 指向)
• • • [1. 五大 this 指向规则](#1. 五大 this 指向规则)
    • [2. 改变 this 指向：call /apply/bind](#2. 改变 this 指向：call /apply/bind)
• 四、继承六种方式
• • • 原型链继承
    • 借用构造函数继承
    • 组合继承
    • 原型式继承
    • • 寄生式继承
    • 寄生组合继承
• [五、JS 执行机制：事件循环 EventLoop](#五、JS 执行机制：事件循环 EventLoop)
• 六、异步编程
• • • [1. 发展历程](#1. 发展历程)
    • [2. Promise](#2. Promise)
    • [3. async/await](#3. async/await)
• 七、深浅拷贝
• • • [1. 浅拷贝](#1. 浅拷贝)
    • [2. 深拷贝](#2. 深拷贝)
• 八、防抖与节流
• • • [1. 防抖 debounce](#1. 防抖 debounce)
    • [2. 节流 throttle](#2. 节流 throttle)
• [九、垃圾回收机制 GC](#九、垃圾回收机制 GC)
• • • [1. 内存](#1. 内存)
    • [2. 回收算法](#2. 回收算法)
• 十、ES6+
• 十一、数组高级方法
• 十二、前端跨域
• 十三、回流与重绘

---

一、原型与原型链

1. 基础概念

1. 构造函数

• 用来创建对象的函数，约定首字母大写。
• 通过 new 关键字调用，生成实例对象。

2. 显式原型 prototype

• 只有函数才拥有 prototype 属性。
• 它是一个对象，用于存放所有实例共享的属性和方法。
• 作用：节省内存，避免每个实例都创建重复方法。

3. 隐式原型 proto
   所有对象（实例、函数、数组）都拥有 proto 。
   它指向创建该对象的构造函数的 prototype。
   是实现原型链的核心纽带。
4. constructor

• 位于原型对象上，指回构造函数本身。
• 用于判断对象的构造类型。

2. 三大核心等式

// 1. 实例的隐式原型 === 构造函数的显式原型
实例对象.__proto__ === 构造函数.prototype

// 2. 原型的构造器 === 构造函数
构造函数.prototype.constructor === 构造函数

// 3. 原型链的顶端是 null
Object.prototype.__proto__ === null

3. 原型链查找规则（属性 / 方法）

当访问一个对象的属性 / 方法时：

1. 先在自身查找，找到直接使用。
2. 找不到，通过 proto 去构造函数的原型上查找。
3. 继续顺着原型链向上查找，直到 Object.prototype。
4. 最终找不到，返回 undefined。

4. 面试高频

1. 原型的作用：实现方法共享、继承，节省内存空间。
2. 原型链作用：实现对象的继承，让一个对象可以访问另一个对象的属性和方法。
3. 结论：所有对象最终都继承自 Object；数组、函数、日期本质上都是对象。

二、作用域、作用域链、闭包

1. 三大作用域

1. 全局作用域

• 代码在任何位置都能访问。
• 全局变量、全局函数、window 对象。

2. 函数作用域

• 只在函数内部可访问。
• 函数外部无法读取内部变量。

3. 块级作用域

• let / const 在 {} 内形成的作用域。
• var 没有块级作用域。

2. 作用域链

• 定义：内层函数可以访问外层函数变量，层层向上查找，形成的链式结构。
• 作用：保证变量的有序访问。

3. 闭包

1. 定义：内层函数引用了外层函数的变量，即使外层函数执行完毕，变量也不会销毁，这种现象就是闭包。
2. 形成条件
   1. 函数嵌套函数。
   2. 内部函数引用了外部函数的变量。
   3. 内部函数被调用 /return 出去。
3. 闭包作用
   1. 延长局部变量生命周期。
   2. 私有化变量，防止全局污染。
   3. 可用于模块化开发、缓存数据、防抖节流。
4. 闭包缺点
   1. 变量常驻内存，容易造成内存泄漏。
   2. 滥用闭包会降低代码可读性。
5. 面试手写闭包

function outer() {
    let num = 10; // 被引用的变量
    return function inner() {
        console.log(num); // 引用外层变量
    };
}
let fn = outer();
fn(); // 10 → 形成闭包

三、this 指向

1. 五大 this 指向规则

• 普通函数调用
  this → window
• 对象方法调用
  this → 调用它的对象
• 构造函数调用
  this → new 创建的实例对象
• 箭头函数
  没有自己的 this，继承外层作用域的 this，无法修改。
• 事件绑定
  this → 触发事件的 DOM 元素

2. 改变 this 指向：call /apply/bind

• call()
  立即执行函数。
  参数逐个传递。

fn.call(thisArg, arg1, arg2)

• apply()
  立即执行函数。
  参数以数组传递。

fn.apply(thisArg, [arg1, arg2])

• bind()
  不立即执行，返回一个新函数。
  永久绑定 this。

let newFn = fn.bind(thisArg)
newFn()

	总结:
	立即执行用：call / apply
	后续执行用：bind

四、继承六种方式

原型链继承

• 优点：实现简单、共享原型方法。
• 缺点：所有实例共享引用类型属性。

借用构造函数继承

• 优点：避免引用共享。
• 缺点：无法继承原型方法。

组合继承

• 结合前两者优点，最常用。

原型式继承

• 浅拷贝式继承。

寄生式继承

• 在原型式基础上增加属性 / 方法。

寄生组合继承

• 最优继承，无缺陷，底层源码常用。
  ES6 class 继承（工作最常用）

class Parent {
    constructor(name) {
        this.name = name;
    }
}
class Child extends Parent {
    constructor(name, age) {
        super(name); // 必须调用，继承父类属性
        this.age = age;
    }
}

五、JS 执行机制：事件循环 EventLoop

1. 核心特点

• JS 是单线程，同一时间只能做一件事。
• 为了不阻塞，引入异步任务。

2. 执行顺序

• 执行同步代码。
• 同步执行完 → 执行所有微任务。
• 微任务清空 → 执行一个宏任务。
• 循环执行 → 事件循环。

3. 宏任务 vs 微任务

• 宏任务（优先级低）
  setTimeout、setInterval、AJAX、DOM 事件、IO
• 微任务（优先级高）
  Promise.then/catch/finally、async/await、queueMicrotask

4. 注意：await 后面的代码属于微任务。

六、异步编程

1. 发展历程

• 回调函数 → 回调地狱。
• Promise → 解决回调地狱。
• Generator → 分段执行。
• async/await → 终极方案。

2. Promise

1. 三种状态

• pending（进行中）
• fulfilled（成功）
• rejected（失败）
• 状态一旦改变，不可逆转。

2. 常用 API

• .then() 成功
• .catch() 失败
• Promise.all() 全部成功才成功
• Promise.race() 谁快执行谁

3. async/await

• async 函数返回 Promise。
• await 暂停执行，等待 Promise 结果。
• 优点：代码像同步一样简洁、易读、好调试。

七、深浅拷贝

1. 浅拷贝

• 只拷贝第一层。
• 深层对象共用地址，一改全改。
• 实现：...、Object.assign、slice、concat。

2. 深拷贝

• 拷贝所有层级，新旧数据完全独立。
• 简易实现：

JSON.parse(JSON.stringify(obj))

• 缺点：无法拷贝函数、正则、日期、undefined。
• 面试必考：手写递归深拷贝。

八、防抖与节流

1. 防抖 debounce

• 频繁触发 → 只执行最后一次。
• 场景：搜索框输入、窗口缩放。

2. 节流 throttle

• 固定时间 → 只执行一次。
• 场景：页面滚动、鼠标移动、高频点击。

九、垃圾回收机制 GC

1. 内存

• 栈：基本类型，自动释放。
• 堆：引用类型，GC 回收。

2. 回收算法

1. 引用计数

• 引用为 0 回收
• 缺点：循环引用无法回收。

2. 标记清除（主流）

• 标记无用对象，统一回收。

3. 内存泄漏场景
   1. 意外全局变量
   2. 闭包滥用
   3. 定时器未清除
   4. DOM 事件未解绑

十、ES6+

• let/const：块级作用域、无变量提升。
• 解构赋值：快速取对象 / 数组。
• 模板字符串 ${}。
• 展开运算符 ...。
• Set 去重、Map 任意键名。
• 模块化 import/export。
• 可选链 ?.、空值合并 ??。

十一、数组高级方法

• forEach：遍历无返回值。
• map：返回新数组。
• filter：过滤。
• reduce：累加、统计、去重。
• find：查找元素。
• every：全部满足。
• some：任一满足。

十二、前端跨域

1. 跨域原因
   浏览器同源策略：协议、域名、端口任一不同即跨域。
2. 解决方案
   1. CORS（主流）
   2. proxy 代理（Vue/React）
   3. JSONP（仅 GET）
   4. Nginx 反向代理

十三、回流与重绘

1. 重绘
   改变样式（颜色、背景），不改变布局。
2. 回流（重排）
   改变宽高、位置、结构，重新布局。
3. 重点
   回流一定触发重绘，重绘不一定回流。
   回流性能消耗极大。