前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
  • 基础进阶

    • 基础篇
    • 进阶篇
      • 一、JS基础
        • 1 类型及检测方式
        • 2 This
        • 3 apply/call/bind 原理
        • 4 变量提升
        • 5 执行上下文
        • 6 作用域
        • 7 闭包
        • 8 New的原理
        • 9 原型/原型链
        • 10 继承
        • 11 面向对象
        • 12 事件机制
        • 13 模块化
        • 14 Iterator迭代器
        • 15 Promise
        • 16 Generator
        • 17 async/await
        • 18 事件循环
        • 19 垃圾回收
        • 20 内存泄露
        • 21 深浅拷贝
        • 22 节流与防抖
        • 23 Proxy代理
        • 24 Ajax
        • 25 深入数组
      • 二、HTML
        • 1 meta 标签:自动刷新/跳转
        • 2 viewport
        • 3 性能优化
        • 4 如何高效操作DOM
      • 三、CSS基础
        • 1 盒模型
        • 2 BFC
        • 3 层叠上下文
        • 4 左右居中方案
        • 5 上下垂直居中方案
        • 6 选择器权重计算方式
        • 7 清除浮动
        • 8 左边定宽,右边自适应方案
        • 9 左右两边定宽,中间自适应
        • 10 CSS动画和过渡
        • 11 CSS3的新特性
        • 12 列举几个css中可继承和不可继承的元素
      • 四、浏览器
        • 1 浏览器架构
        • 2 JavaScript单线程模型
        • 3 Chrome 打开一个页面需要启动多少进程?分别有哪些进程?
        • 4 渲染机制
        • 5 缓存机制
        • 6 浏览器存储
        • 7 跨域方案
        • 8 XSS 和 CSRF
        • 9 Service Worker
        • 10 DOM 节点操作
        • 11 掌握页面的加载过程
        • 12 从输入URL到页面展示过程
        • 13 渲染引擎什么情况下才会为特定的节点创建新的图层
        • 14 定时器与requestAnimationFrame、requestIdleCallback
      • 五、框架通识
      • 六、Vue
        • 1 Vue 响应式原理
        • 2 发布订阅模式和观察者模式
        • 3 为什么使用 Virtual DOM
        • 4 VDOM:三个 part
        • 5 vue 和 react技术选型
        • 6 nextTick
        • 7 生命周期
        • 8 vue-router
        • 9 vuex
        • 10 vue3带来的新特性/亮点
        • 11 Compositon api
        • 12 computed 的实现原理
        • 13 watch 的理解
        • 14 vue 渲染过程
        • 15 说一说keep-alive实现原理
        • 16 为什么访问data属性不需要带data
        • 17 template预编译是什么
        • 18 介绍一下Vue中的Diff算法
        • 19 说说Vue2.0和Vue3.0有什么区别
      • 七、React
        • 0 对虚拟DOM的理解
        • 1 谈谈你对React的理解
        • 2 如何避免React生命周期中的坑
        • 3 React Fiber架构
        • 4 createElement过程
        • 5 调和阶段 setState内部干了什么
        • 6 setState
        • 7 setState原理分析
        • 8 React事务机制
        • 9 React组件和渲染更新过程
        • 10 如何解释 React 的渲染流程
        • 11 diff算法是怎么运作
        • 12 合成事件原理
        • 13 JSX语法糖本质
        • 14 为什么 React 元素有一个 $$typeof 属性
        • 15 Virtual DOM 的工作原理是什么
        • 16 React有哪些优化性能的手段
        • 17 Redux实现原理解析
        • 18 谈谈你对状态管理的理解
        • 19 connect组件原理分析
        • 20 React Hooks
        • 21 受控组件和非受控组件
        • 22 如何避免ajax数据请求重新获取
        • 23 组件之间通信
        • 24 类组件与函数组件有什么区别呢?
        • 25 如何设计React组件
        • 26 组件的协同及(不)可控组件
        • 27 React-Router 的实现原理及工作方式分别是什么
        • 28 React 17 带来了哪些改变
      • 八、性能
        • 1 DNS 预解析
        • 2 缓存
        • 3 使用 HTTP / 2.0
        • 4 预加载
        • 5 预渲染
        • 6 懒执行与懒加载
        • 7 文件优化
        • 8 其他
        • 9 如何根据chrome的timing优化
        • 10 移动端优化
      • 九、工程化
        • 1 介绍一下 webpack 的构建流程
        • 2 介绍 Loader
        • 3 介绍 plugin
        • 4 webpack 热更新实现原理
        • 5 webpack 层面如何做性能优化
        • 6 介绍一下 Tree Shaking
        • 7 介绍一下 webpack scope hosting
        • 8 Webpack Proxy工作原理?为什么能解决跨域
        • 9 介绍一下 babel原理
        • 10 介绍一下Rollup
      • 十、HTTP
        • HTTP状态码
        • 1 HTTP前生今世
        • 2 HTTP世界全览
        • 3 HTTP分层
        • 4 HTTP报文是什么样子的
        • 5 HTTP之URL
        • 6 HTTP实体数据
        • 7 谈一谈HTTP协议优缺点
        • 8 说一说HTTP 的请求方法
        • 9 谈一谈GET 和 POST 的区别
        • 10 谈一谈队头阻塞问题
        • 11 谈一谈HTTP数据传输
        • 12 cookie 和 session
        • 13 介绍一下HTTPS和HTTP区别
        • 14 HTTPS握手过程
        • 15 介绍一个HTTPS工作原理
        • 16 SSL 连接断开后如何恢复
        • 17 谈一谈你对HTTP/2理解
        • 18 HTTP3
        • 19 HTTP/1.0 HTTP1.1 HTTP2.0版本之间的差异
        • 20 DNS如何工作的
        • 21 短轮询、长轮询和 WebSocket 间的区别
        • 22 说一说正向代理和反向代理
        • 23 介绍一下Connection:keep-alive
        • 24 http/https 协议总结
        • 25 TCP为什么要三次握手
        • 26 为什么要有 WebSocket
        • 27 UDP和TCP有什么区别
      • 十一、9种前端常见的设计模式
        • 1. 外观模式
        • 2. 代理模式
        • 3. 工厂模式
        • 4. 单例模式
        • 5. 策略模式
        • 6. 迭代器模式
        • 7. 观察者模式
        • 8. 中介者模式
        • 9. 访问者模式
      • 十二、综合问题
        • 前端常见面试流程
        • 面试一定要问这几个问题
        • 经历
        • 项目相关
        • 项目难点问题分析
        • 项目流程相关面试题
        • 把握投递简历的黄金时间段
        • 把握面试时的关键点
        • 工作交接流程 & 福利衔接
      • 十三、人事面
        • 第一个要点: 你是否胜任这份工作?
        • 第二个要点:你是怎样的人?
        • 第三个要点:你是否适合这个企业?
        • 第四个要点:聘用你,公司需付出多少?
    • 高频篇
    • 手写篇
    • 综合题型
    • 其他问题
    • 设计模式
  • 精选模块

完整面试题地址:
作者:程序员poetry
扫码关注作者公众号:「前端进阶之旅」 每天分享技术干货
前端进阶之旅公众号二维码

# 进阶篇

# 一、JS基础

# 1 类型及检测方式

1. JS内置类型

JavaScript 的数据类型有下图所示

其中,前 7 种类型为基础类型,最后 1 种(Object)为引用类型,也是你需要重点关注的,因为它在日常工作中是使用得最频繁,也是需要关注最多技术细节的数据类型

  • JavaScript一共有8种数据类型,其中有7种基本数据类型:Undefined、Null、Boolean、Number、String、Symbol(es6新增,表示独一无二的值)和BigInt(es10新增);
  • 1种引用数据类型——Object(Object本质上是由一组无序的名值对组成的)。里面包含 function、Array、Date等。JavaScript不支持任何创建自定义类型的机制,而所有值最终都将是上述 8 种数据类型之一。
    • 引用数据类型: 对象Object(包含普通对象-Object,数组对象-Array,正则对象-RegExp,日期对象-Date,数学函数-Math,函数对象-Function)

在这里,我想先请你重点了解下面两点,因为各种 JavaScript 的数据类型最后都会在初始化之后放在不同的内存中,因此上面的数据类型大致可以分成两类来进行存储:

  • 原始数据类型:基础类型存储在栈内存,被引用或拷贝时,会创建一个完全相等的变量;占据空间小、大小固定,属于被频繁使用数据,所以放入栈中存储。
  • 引用数据类型:引用类型存储在堆内存,存储的是地址,多个引用指向同一个地址,这里会涉及一个“共享”的概念;占据空间大、大小不固定。引用数据类型在栈中存储了指针,该指针指向堆中该实体的起始地址。当解释器寻找引用值时,会首先检索其在栈中的地址,取得地址后从堆中获得实体。

JavaScript 中的数据是如何存储在内存中的?

在 JavaScript 中,原始类型的赋值会完整复制变量值,而引用类型的赋值是复制引用地址。

在 JavaScript 的执行过程中, 主要有三种类型内存空间,分别是代码空间、栈空间、堆空间。其中的代码空间主要是存储可执行代码的,原始类型(Number、String、Null、Undefined、Boolean、Symbol、BigInt)的数据值都是直接保存在“栈”中的,引用类型(Object)的值是存放在“堆”中的。因此在栈空间中(执行上下文),原始类型存储的是变量的值,而引用类型存储的是其在"堆空间"中的地址,当 JavaScript 需要访问该数据的时候,是通过栈中的引用地址来访问的,相当于多了一道转手流程。

在编译过程中,如果 JavaScript 引擎判断到一个闭包,也会在堆空间创建换一个“closure(fn)”的对象(这是一个内部对象,JavaScript 是无法访问的),用来保存闭包中的变量。所以闭包中的变量是存储在“堆空间”中的。

JavaScript 引擎需要用栈来维护程序执行期间上下文的状态,如果栈空间大了话,所有的数据都存放在栈空间里面,那么会影响到上下文切换的效率,进而又影响到整个程序的执行效率。通常情况下,栈空间都不会设置太大,主要用来存放一些原始类型的小数据。而引用类型的数据占用的空间都比较大,所以这一类数据会被存放到堆中,堆空间很大,能存放很多大的数据,不过缺点是分配内存和回收内存都会占用一定的时间。因此需要“栈”和“堆”两种空间。

题目一:初出茅庐

let a = {
  name: 'lee',
  age: 18
}
let b = a;
console.log(a.name);  //第一个console
b.name = 'son';
console.log(a.name);  //第二个console
console.log(b.name);  //第三个console
@前端进阶之旅: 代码已经复制到剪贴板

这道题比较简单,我们可以看到第一个 console 打出来 name 是 ‘lee’,这应该没什么疑问;但是在执行了 b.name=‘son’ 之后,结果你会发现 a 和 b 的属性 name 都是 ‘son’,第二个和第三个打印结果是一样的,这里就体现了引用类型的“共享”的特性,即这两个值都存在同一块内存中共享,一个发生了改变,另外一个也随之跟着变化。

你可以直接在 Chrome 控制台敲一遍,深入理解一下这部分概念。下面我们再看一段代码,它是比题目一稍复杂一些的对象属性变化问题。

题目二:渐入佳境

let a = {
  name: 'Julia',
  age: 20
}
function change(o) {
  o.age = 24;
  o = {
    name: 'Kath',
    age: 30
  }
  ret
fe
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
  • 基础进阶

    • 基础篇
    • 进阶篇
      • 一、JS基础
        • 1 类型及检测方式
        • 2 This
        • 3 apply/call/bind 原理
        • 4 变量提升
        • 5 执行上下文
        • 6 作用域
        • 7 闭包
        • 8 New的原理
        • 9 原型/原型链
        • 10 继承
        • 11 面向对象
        • 12 事件机制
        • 13 模块化
        • 14 Iterator迭代器
        • 15 Promise
        • 16 Generator
        • 17 async/await
        • 18 事件循环
        • 19 垃圾回收
        • 20 内存泄露
        • 21 深浅拷贝
        • 22 节流与防抖
        • 23 Proxy代理
        • 24 Ajax
        • 25 深入数组
      • 二、HTML
        • 1 meta 标签:自动刷新/跳转
        • 2 viewport
        • 3 性能优化
        • 4 如何高效操作DOM
      • 三、CSS基础
        • 1 盒模型
        • 2 BFC
        • 3 层叠上下文
        • 4 左右居中方案
        • 5 上下垂直居中方案
        • 6 选择器权重计算方式
        • 7 清除浮动
        • 8 左边定宽,右边自适应方案
        • 9 左右两边定宽,中间自适应
        • 10 CSS动画和过渡
        • 11 CSS3的新特性
        • 12 列举几个css中可继承和不可继承的元素
      • 四、浏览器
        • 1 浏览器架构
        • 2 JavaScript单线程模型
        • 3 Chrome 打开一个页面需要启动多少进程?分别有哪些进程?
        • 4 渲染机制
        • 5 缓存机制
        • 6 浏览器存储
        • 7 跨域方案
        • 8 XSS 和 CSRF
        • 9 Service Worker
        • 10 DOM 节点操作
        • 11 掌握页面的加载过程
        • 12 从输入URL到页面展示过程
        • 13 渲染引擎什么情况下才会为特定的节点创建新的图层
        • 14 定时器与requestAnimationFrame、requestIdleCallback
      • 五、框架通识
      • 六、Vue
        • 1 Vue 响应式原理
        • 2 发布订阅模式和观察者模式
        • 3 为什么使用 Virtual DOM
        • 4 VDOM:三个 part
        • 5 vue 和 react技术选型
        • 6 nextTick
        • 7 生命周期
        • 8 vue-router
        • 9 vuex
        • 10 vue3带来的新特性/亮点
        • 11 Compositon api
        • 12 computed 的实现原理
        • 13 watch 的理解
        • 14 vue 渲染过程
        • 15 说一说keep-alive实现原理
        • 16 为什么访问data属性不需要带data
        • 17 template预编译是什么
        • 18 介绍一下Vue中的Diff算法
        • 19 说说Vue2.0和Vue3.0有什么区别
      • 七、React
        • 0 对虚拟DOM的理解
        • 1 谈谈你对React的理解
        • 2 如何避免React生命周期中的坑
        • 3 React Fiber架构
        • 4 createElement过程
        • 5 调和阶段 setState内部干了什么
        • 6 setState
        • 7 setState原理分析
        • 8 React事务机制
        • 9 React组件和渲染更新过程
        • 10 如何解释 React 的渲染流程
        • 11 diff算法是怎么运作
        • 12 合成事件原理
        • 13 JSX语法糖本质
        • 14 为什么 React 元素有一个 $$typeof 属性
        • 15 Virtual DOM 的工作原理是什么
        • 16 React有哪些优化性能的手段
        • 17 Redux实现原理解析
        • 18 谈谈你对状态管理的理解
        • 19 connect组件原理分析
        • 20 React Hooks
        • 21 受控组件和非受控组件
        • 22 如何避免ajax数据请求重新获取
        • 23 组件之间通信
        • 24 类组件与函数组件有什么区别呢?
        • 25 如何设计React组件
        • 26 组件的协同及(不)可控组件
        • 27 React-Router 的实现原理及工作方式分别是什么
        • 28 React 17 带来了哪些改变
      • 八、性能
        • 1 DNS 预解析
        • 2 缓存
        • 3 使用 HTTP / 2.0
        • 4 预加载
        • 5 预渲染
        • 6 懒执行与懒加载
        • 7 文件优化
        • 8 其他
        • 9 如何根据chrome的timing优化
        • 10 移动端优化
      • 九、工程化
        • 1 介绍一下 webpack 的构建流程
        • 2 介绍 Loader
        • 3 介绍 plugin
        • 4 webpack 热更新实现原理
        • 5 webpack 层面如何做性能优化
        • 6 介绍一下 Tree Shaking
        • 7 介绍一下 webpack scope hosting
        • 8 Webpack Proxy工作原理?为什么能解决跨域
        • 9 介绍一下 babel原理
        • 10 介绍一下Rollup
      • 十、HTTP
        • HTTP状态码
        • 1 HTTP前生今世
        • 2 HTTP世界全览
        • 3 HTTP分层
        • 4 HTTP报文是什么样子的
        • 5 HTTP之URL
        • 6 HTTP实体数据
        • 7 谈一谈HTTP协议优缺点
        • 8 说一说HTTP 的请求方法
        • 9 谈一谈GET 和 POST 的区别
        • 10 谈一谈队头阻塞问题
        • 11 谈一谈HTTP数据传输
        • 12 cookie 和 session
        • 13 介绍一下HTTPS和HTTP区别
        • 14 HTTPS握手过程
        • 15 介绍一个HTTPS工作原理
        • 16 SSL 连接断开后如何恢复
        • 17 谈一谈你对HTTP/2理解
        • 18 HTTP3
        • 19 HTTP/1.0 HTTP1.1 HTTP2.0版本之间的差异
        • 20 DNS如何工作的
        • 21 短轮询、长轮询和 WebSocket 间的区别
        • 22 说一说正向代理和反向代理
        • 23 介绍一下Connection:keep-alive
        • 24 http/https 协议总结
        • 25 TCP为什么要三次握手
        • 26 为什么要有 WebSocket
        • 27 UDP和TCP有什么区别
      • 十一、9种前端常见的设计模式
        • 1. 外观模式
        • 2. 代理模式
        • 3. 工厂模式
        • 4. 单例模式
        • 5. 策略模式
        • 6. 迭代器模式
        • 7. 观察者模式
        • 8. 中介者模式
        • 9. 访问者模式
      • 十二、综合问题
        • 前端常见面试流程
        • 面试一定要问这几个问题
        • 经历
        • 项目相关
        • 项目难点问题分析
        • 项目流程相关面试题
        • 把握投递简历的黄金时间段
        • 把握面试时的关键点
        • 工作交接流程 & 福利衔接
      • 十三、人事面
        • 第一个要点: 你是否胜任这份工作?
        • 第二个要点:你是怎样的人?
        • 第三个要点:你是否适合这个企业?
        • 第四个要点:聘用你,公司需付出多少?
    • 高频篇
    • 手写篇
    • 综合题型
    • 其他问题
    • 设计模式
  • 精选模块