前端JS基础知识

它的类型:

全局执行上下文
• 函数执行上下文

• eval

  执行上下文

代码执行过程:

创建 全局上下文 (global EC)
• 全局执行上下文 (caller) 逐行 自上而下 执行。遇到函数时，函数执行上下文 (callee) 被

  push

  到执行栈顶层
• 函数执行上下文被激活，成为 active EC, 开始执行函数中的代码，caller 被挂起
• 函数执行完后，callee 被

  pop

  移除出执行栈，控制权交还全局上下文 (caller)，继续执行

2.变量对象

变量对象，是执行上下文中的一部分，可以抽象为一种 数据作用域，其实也可以理解为就是一个简单的对象，它存储着该执行上下文中的所有 变量和函数声明(不包含函数表达式)。

3. 作用域

执行上下文中还包含作用域链。理解作用域之前，先介绍下作用域。作用域其实可理解为该上下文中声明的 变量和声明的作用范围。可分为 块级作用域 和 函数作用域

特性:

• 声明提前: 一个声明在函数体内都是可见的, 函数优先于变量
• 非匿名自执行函数，函数变量为 只读 状态，无法修改

let foo = function() { console.log(1) }
(function foo() {
foo = 10  // 由于foo在函数中只为可读，因此赋值无效
console.log(foo)
}())

// 结果打印：  ƒ foo() { foo = 10 ; console.log(foo) }

4.作用域链

我们知道，我们可以在执行上下文中访问到父级甚至全局的变量，这便是作用域链的功劳。作用域链可以理解为一组对象列表，包含 父级和自身的变量对象，因此我们便能通过作用域链访问到父级里声明的变量或者函数。

• 由两部分组成:

  [[scope]]

  属性: 指向父级变量对象和作用域链，也就是包含了父级的

  [[scope]]

  和

  AO

• AO: 自身活动对象

如此

[[scopr]]

[[scope]]

5. 闭包

闭包属于一种特殊的作用域，称为 静态作用域。它的定义可以理解为: 父函数被销毁 的情况下，返回出的子函数的

[[scope]]

• 闭包会产生一个很经典的问题:

  多个子函数的

  [[scope]]

  都是同时指向父级，是完全共享的。因此当父级的变量对象被修改时，所有子函数都受到影响。

解决:

变量可以通过 函数参数的形式 传入，避免使用默认的

[[scope]]

向上查找
• 使用

  setTimeout

  包裹，通过第三个参数传入
• 使用 块级作用域，让变量成为自己上下文的属性，避免共享

6. script 引入方式：

• html 静态

  <script>

  引入
• js 动态插入

  <script>

• <script defer>

  : 异步加载，元素解析完成后执行

• <script async>

  : 异步加载，但执行时会阻塞元素渲染

7. 对象的拷贝

• 浅拷贝: 以赋值的形式拷贝引用对象，仍指向同一个地址，修改时原对象也会受到影响

  Object.assign

• 展开运算符(...)

深拷贝: 完全拷贝一个新对象，修改时原对象不再受到任何影响

JSON.parse(JSON.stringify(obj))

: 性能最快 具有循环引用的对象时，报错
• 当值为函数、

  undefined

  、或

  symbol

  时，无法拷贝

[1].toString() === '1'

{}.toString() === '[object object]'

NaN

NaN

+undefined 为 NaN

require

import

require

支持 动态导入，

import

不支持，正在提案 (babel 下可支持)

• require

  是 同步 导入，

  import

  属于 异步 导入

• require

  是 值拷贝，导出值变化不会影响导入值；

  import

  指向 内存地址，导入值会随导出值而变化

15. 防抖与节流

防抖与节流函数是一种最常用的 高频触发优化方式，能对性能有较大的帮助。

• 防抖 (debounce): 将多次高频操作优化为只在最后一次执行，通常使用的场景是：用户输入，只需再输入完成后做一次输入校验即可。

function debounce(fn, wait, immediate) {
let timer = null

return function() {
let args = arguments
let context = this

if (immediate && !timer) {
fn.apply(context, args)
}

if (timer) clearTimeout(timer)
timer = setTimeout(() => {
fn.apply(context, args)
}, wait)
}
}

• 节流(throttle): 每隔一段时间后执行一次，也就是降低频率，将高频操作优化成低频操作，通常使用场景: 滚动条事件 或者 resize 事件，通常每隔 100~500 ms执行一次即可。

function throttle(fn, wait, immediate) {
let timer = null
let callNow = immediate

return function() {
let context = this,
args = arguments

if (callNow) {
fn.apply(context, args)
callNow = false
}

if (!timer) {
timer = setTimeout(() => {
fn.apply(context, args)
timer = null
}, wait)
}
}
}

16. 函数执行改变this

由于 JS 的设计原理: 在函数中，可以引用运行环境中的变量。因此就需要一个机制来让我们可以在函数体内部获取当前的运行环境，这便是

this

因此要明白

this

• obj.fn()

  ，便是

  obj

  调用了函数，既函数中的

  this === obj

• fn()

  ，这里可以看成

  window.fn()

  ，因此

  this === window

但这种机制并不完全能满足我们的业务需求，因此提供了三种方式可以手动修改

this

• call: fn.call(target, 1, 2)

• apply: fn.apply(target, [1, 2])

• bind: fn.bind(target)(1,2)

17. ES6/ES7

由于 Babel 的强大和普及，现在 ES6/ES7 基本上已经是现代化开发的必备了。通过新的语法糖，能让代码整体更为简洁和易读。

• 声明

  let / const

  : 块级作用域、不存在变量提升、暂时性死区、不允许重复声明

• const

  : 声明常量，无法修改

解构赋值

class / extend

Set / Map

异步解决方案:

Promise

的使用与实现

• generator

  :

  yield

  : 暂停代码

• next()

  : 继续执行代码

function* helloWorld() {
yield 'hello';
yield 'world';
return 'ending';
}

const generator = helloWorld();

generator.next()  // { value: 'hello', done: false }

generator.next()  // { value: 'world', done: false }

generator.next()  // { value: 'ending', done: true }

generator.next()  // { value: undefined, done: true }

• await / async

  : 是

  generator

  的语法糖， babel中是基于

  promise

  实现。

async function getUserByAsync(){
let user = await fetchUser();
return user;
}

const user = await getUserByAsync()
console.log(user)

18. AST

抽象语法树 (Abstract Syntax Tree)，是将代码逐字母解析成 树状对象 的形式。这是语言之间的转换、代码语法检查，代码风格检查，代码格式化，代码高亮，代码错误提示，代码自动补全等等的基础。例如:

function square(n){
return n * n
}

通过解析转化成的AST

19. babel编译原理

• babylon 将 ES6/ES7 代码解析成 AST
• babel-traverse 对 AST 进行遍历转译，得到新的 AST
• 新 AST 通过 babel-generator 转换成 ES5

20. 函数柯里化

在一个函数中，首先填充几个参数，然后再返回一个新的函数的技术，称为函数的柯里化。通常可用于在不侵入函数的前提下，为函数 预置通用参数，供多次重复调用。

const add = function add(x) {
return function (y) {
return x + y
}
}

const add1 = add(1)

add1(2) === 3
add1(20) === 21

21. 数组(array)

• map

  : 遍历数组，返回回调返回值组成的新数组

• forEach

  : 无法

  break

  ，可以用

  try/catch

  中

  throw new Error

  来停止

• filter

  : 过滤

• some

  : 有一项返回

  true

  ，则整体为

  true

• every

  : 有一项返回

  false

  ，则整体为

  false

• join

  : 通过指定连接符生成字符串

• push / pop

  : 末尾推入和弹出，改变原数组， 返回推入/弹出项

• unshift / shift

  : 头部推入和弹出，改变原数组，返回操作项

• sort(fn) / reverse

  : 排序与反转，改变原数组

• concat

  : 连接数组，不影响原数组， 浅拷贝

• slice(start, end)

  : 返回截断后的新数组，不改变原数组

• splice(start, number, value...)

  : 返回删除元素组成的数组，value 为插入项，改变原数组

• indexOf / lastIndexOf(value, fromIndex)

  : 查找数组项，返回对应的下标

• reduce / reduceRight(fn(prev, cur)， defaultPrev)

  : 两两执行，prev 为上次化简函数的

  return

  值，cur 为当前值(从第二项开始)

• 数组乱序：

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
arr.sort(function () {
return Math.random() - 0.5;
});

• 数组拆解: flat: [1,[2,3]] --> [1, 2, 3]

Array.prototype.flat = function() {
this.toString().split(',').map(item => +item )
}

浏览器

1. 跨标签页通讯

不同标签页间的通讯，本质原理就是去运用一些可以 共享的中间介质，因此比较常用的有以下方法:

• 通过父页面

  window.open()

  和子页面

  postMessage

  异步下，通过

  window.open('about: blank')

  和

  tab.location.href = '*'

设置同域下共享的

localStorage

window.onstorage

重复写入相同的值无法触发
• 会受到浏览器隐身模式等的限制

设置共享

cookie

setInterval

借助服务端或者中间层实现

消息队列 微任务
• 宏任务

解析 css 代码，生成样式树

结合 dom树 与 style树，生成渲染树

javascript

避免频繁操作样式，可汇总后统一 一次修改
• 尽量使用

  class

  进行样式修改
• 减少

  dom

  的增删次数，可使用 字符串 或者

  documentFragment

  一次性插入
• 极限优化时，修改样式可将其

  display: none

  后修改
• 避免多次触发上面提到的那些会触发回流的方法，可以的话尽量用 变量存住

6. 存储

我们经常需要对业务中的一些数据进行存储，通常可以分为 短暂性存储 和 持久性储存。

• 短暂性的时候，我们只需要将数据存在内存中，只在运行时可用

• 持久性存储，可以分为 浏览器端 与 服务器端

  浏览器:

  cookie

  : 通常用于存储用户身份，登录状态等 http 中自动携带， 体积上限为 4K， 可自行设置过期时间

localStorage / sessionStorage

indexDB

分布式缓存 redis
• 数据库

7. Web Worker

现代浏览器为

JavaScript

worker

基本用法:

// 创建 worker
const worker = new Worker('work.js');

// 向主进程推送消息
worker.postMessage('Hello World');

// 监听主进程来的消息
worker.onmessage = function (event) {
console.log('Received message ' + event.data);
}

限制:

• 同源限制
• 无法使用

  document

  /

  window

  /

  alert

  /

  confirm

• 无法加载本地资源

8. V8垃圾回收机制

垃圾回收: 将内存中不再使用的数据进行清理，释放出内存空间。V8 将内存分成 新生代空间 和 老生代空间。

• 新生代空间: 用于存活较短的对象 又分成两个空间: from 空间 与 to 空间
• Scavenge GC算法: 当 from 空间被占满时，启动 GC 算法 存活的对象从 from space 转移到 to space
• 清空 from space
• from space 与 to space 互换
• 完成一次新生代GC

从 新生代空间 转移到 老生代空间 的条件 经历过一次以上 Scavenge GC 的对象
• 当 to space 体积超过25%

增量标记: 小模块标记，在代码执行间隙执，GC 会影响性能
• 并发标记(最新技术): 不阻塞 js 执行

1.1 改进:

长连接(默认 keep-alive)，复用
• host 字段指定对应的虚拟站点
• 新增功能: 断点续传
• 身份认证
• 状态管理
• cache 缓存 Cache-Control
• Expires
• Last-Modified
• Etag

2.0:

多路复用
• 二进制分帧层: 应用层和传输层之间
• 首部压缩
• 服务端推送

https: 较为安全的网络传输协议

证书(公钥)
• SSL 加密
• 端口 443

TCP:

三次握手
• 四次挥手
• 滑动窗口: 流量控制
• 拥塞处理 慢开始
• 拥塞避免
• 快速重传
• 快速恢复

缓存策略: 可分为 强缓存 和 协商缓存

Cache-Control/Expires: 浏览器判断缓存是否过期，未过期时，直接使用强缓存，Cache-Control的 max-age 优先级高于 Expires

• 当缓存已经过期时，使用协商缓存

  唯一标识方案: Etag(response 携带) & If-None-Match(request携带，上一次返回的 Etag): 服务器判断资源是否被修改，
• 最后一次修改时间: Last-Modified(response) & If-Modified-Since (request，上一次返回的Last-Modified) 如果一致，则直接返回 304 通知浏览器使用缓存
• 如不一致，则服务端返回新的资源

Last-Modified 缺点：

周期性修改，但内容未变时，会导致缓存失效
• 最小粒度只到 s， s 以内的改动无法检测到

Etag 的优先级高于 Last-Modified

new WebSocket(url)

ws.onerror = fn

ws.onclose = fn

ws.onopen = fn

ws.onmessage = fn

ws.send()

执行

setImmediate

get 不修改数据
• 不被第三方网站访问到用户的 cookie
• 设置白名单，不被第三方网站请求
• 请求校验

框架：Vue

1. nextTick

在下次

dom

dom

• 新版本中默认是

  mincrotasks

  ,

  v-on

  中会使用

  macrotasks

• macrotasks

  任务的实现:

  setImmediate / MessageChannel / setTimeout

2. 生命周期

• _init_

  initLifecycle/Event

  ，往

  vm

  上挂载各种属性

• callHook: beforeCreated

  : 实例刚创建

• initInjection/initState

  : 初始化注入和 data 响应性

• created

  : 创建完成，属性已经绑定， 但还未生成真实

  dom

• 进行元素的挂载：

  $el / vm.$mount()

• 是否有

  template

  : 解析成

  render function

  *.vue

  文件:

  vue-loader

  会将

  <template>

  编译成

  render function

beforeMount

render function

dom

dom tree

mounted

update

执行

diff

算法，比对改变是否需要触发UI更新

• flushScheduleQueue

  watcher.before

  : 触发

  beforeUpdate

  钩子 -

  watcher.run()

  : 执行

  watcher

  中的

  notify

  ，通知所有依赖项更新UI

updated

actived / deactivated(keep-alive)

destroy

beforeDestroy

: 销毁开始
• 销毁自身且递归销毁子组件以及事件监听

  remove()

  : 删除节点

• watcher.teardown()

  : 清空依赖

• vm.$off()

  : 解绑监听

destroyed

defineProperty

defineReactive

get

: 收集依赖

Dep.depend()

watcher.addDep()

set

Dep.notify()

• watcher.update()

• queenWatcher()

• nextTick

• flushScheduleQueue

• watcher.run()

• updateComponent()

大家可以先看下面的数据相应的代码实现后，理解后就比较容易看懂上面的简单脉络了。

let data = {a: 1}
// 数据响应性
observe(data)

// 初始化观察者
new Watcher(data, 'name', updateComponent)
data.a = 2

// 简单表示用于数据更新后的操作
function updateComponent() {
vm._update() // patchs
}

// 监视对象
function observe(obj) {
// 遍历对象，使用 get/set 重新定义对象的每个属性值
Object.keys(obj).map(key => {
defineReactive(obj, key, obj[key])
})
}

function defineReactive(obj, k, v) {
// 递归子属性
if (type(v) == 'object') observe(v)

// 新建依赖收集器
let dep = new Dep()
// 定义get/set
Object.defineProperty(obj, k, {
enumerable: true,
configurable: true,
get: function reactiveGetter() {
// 当有获取该属性时，证明依赖于该对象，因此被添加进收集器中
if (Dep.target) {
dep.addSub(Dep.target)
}
return v
},
// 重新设置值时，触发收集器的通知机制
set: function reactiveSetter(nV) {
v = nV
dep.nofify()
},
})
}

// 依赖收集器
class Dep {
constructor() {
this.subs = []
}
addSub(sub) {
this.subs.push(sub)
}
notify() {
this.subs.map(sub => {
sub.update()
})
}
}

Dep.target = null

// 观察者
class Watcher {
constructor(obj, key, cb) {
Dep.target = this
this.cb = cb
this.obj = obj
this.key = key
this.value = obj[key]
Dep.target = null
}
addDep(Dep) {
Dep.addSub(this)
}
update() {
this.value = this.obj[this.key]
this.cb(this.value)
}
before() {
callHook('beforeUpdate')
}
}

4. virtual dom 原理实现

• 创建 dom 树

• 树的

  diff

  ，同层对比，输出

  patchs(listDiff/diffChildren/diffProps)

  没有新的节点，返回
• 新的节点

  tagName

  与

  key

  不变， 对比

  props

  ，继续递归遍历子树 对比属性(对比新旧属性列表): 旧属性是否存在与新属性列表中
• 都存在的是否有变化
• 是否出现旧列表中没有的新属性

tagName

key

渲染差异

遍历

patchs

， 把需要更改的节点取出来
• 局部更新

  dom

// diff算法的实现
function diff(oldTree, newTree) {
// 差异收集
let pathchs = {}
dfs(oldTree, newTree, 0, pathchs)
return pathchs
}

function dfs(oldNode, newNode, index, pathchs) {
let curPathchs = []
if (newNode) {
// 当新旧节点的 tagName 和 key 值完全一致时
if (oldNode.tagName === newNode.tagName && oldNode.key === newNode.key) {
// 继续比对属性差异
let props = diffProps(oldNode.props, newNode.props)
curPathchs.push({ type: 'changeProps', props })
// 递归进入下一层级的比较
diffChildrens(oldNode.children, newNode.children, index, pathchs)
} else {
// 当 tagName 或者 key 修改了后，表示已经是全新节点，无需再比
curPathchs.push({ type: 'replaceNode', node: newNode })
}
}

// 构建出整颗差异树
if (curPathchs.length) {
if(pathchs[index]){
pathchs[index] = pathchs[index].concat(curPathchs)
} else {
pathchs[index] = curPathchs
}
}
}

// 属性对比实现
function diffProps(oldProps, newProps) {
let propsPathchs = []
// 遍历新旧属性列表
// 查找删除项
// 查找修改项
// 查找新增项
forin(olaProps, (k, v) => {
if (!newProps.hasOwnProperty(k)) {
propsPathchs.push({ type: 'remove', prop: k })
} else {
if (v !== newProps[k]) {
propsPathchs.push({ type: 'change', prop: k , value: newProps[k] })
}
}
})
forin(newProps, (k, v) => {
if (!oldProps.hasOwnProperty(k)) {
propsPathchs.push({ type: 'add', prop: k, value: v })
}
})
return propsPathchs
}

// 对比子级差异
function diffChildrens(oldChild, newChild, index, pathchs) {
// 标记子级的删除/新增/移动
let { change, list } = diffList(oldChild, newChild, index, pathchs)
if (change.length) {
if (pathchs[index]) {
pathchs[index] = pathchs[index].concat(change)
} else {
pathchs[index] = change
}
}

// 根据 key 获取原本匹配的节点，进一步递归从头开始对比
oldChild.map((item, i) => {
let keyIndex = list.indexOf(item.key)
if (keyIndex) {
let node = newChild[keyIndex]
// 进一步递归对比
dfs(item, node, index, pathchs)
}
})
}

// 列表对比，主要也是根据 key 值查找匹配项
// 对比出新旧列表的新增/删除/移动
function diffList(oldList, newList, index, pathchs) {
let change = []
let list = []
const newKeys = getKey(newList)
oldList.map(v => {
if (newKeys.indexOf(v.key) > -1) {
list.push(v.key)
} else {
list.push(null)
}
})

// 标记删除
for (let i = list.length - 1; i>= 0; i--) {
if (!list[i]) {
list.splice(i, 1)
change.push({ type: 'remove', index: i })
}
}

// 标记新增和移动
newList.map((item, i) => {
const key = item.key
const index = list.indexOf(key)
if (index === -1 || key == null) {
// 新增
change.push({ type: 'add', node: item, index: i })
list.splice(i, 0, key)
} else {
// 移动
if (index !== i) {
change.push({
type: 'move',
form: index,
to: i,
})
move(list, index, i)
}
}
})

return { change, list }
}

5. Proxy 相比于 defineProperty 的优势

• 数组变化也能监听到
• 不需要深度遍历监听

let data = { a: 1 }
let reactiveData = new Proxy(data, {
get: function(target, name){
// ...
},
// ...
})

6. vue-router

• mode

  hash

• history

this.$router.push()

• <router-link to=""></router-link>

<router-view></router-view>

7. vuex

• state

  : 状态中心

• mutations

  : 更改状态

• actions

  : 异步更改状态

• getters

  : 获取状态

• modules

  : 将

  state

  分成多个

  modules

  ，便于管理

算法

其实算法方面在前端的实际项目中涉及得并不多，但还是需要精通一些基础性的算法，一些公司还是会有这方面的需求和考核，建议大家还是需要稍微准备下，这属于加分题。

1. 五大算法

• 贪心算法: 局部最优解法
• 分治算法: 分成多个小模块，与原问题性质相同
• 动态规划: 每个状态都是过去历史的一个总结
• 回溯法: 发现原先选择不优时，退回重新选择
• 分支限界法

2. 基础排序算法

• 冒泡排序: 两两比较

function bubleSort(arr) {
var len = arr.length;
for (let outer = len ; outer >= 2; outer--) {
for(let inner = 0; inner <=outer - 1; inner++) {
if(arr[inner] > arr[inner + 1]) {
[arr[inner],arr[inner+1]] = [arr[inner+1],arr[inner]]
}
}
}
return arr;
}

• 选择排序: 遍历自身以后的元素，最小的元素跟自己调换位置

function selectSort(arr) {
var len = arr.length;
for(let i = 0 ;i < len - 1; i++) {
for(let j = i ; j<len; j++) {
if(arr[j] < arr[i]) {
[arr[i],arr[j]] = [arr[j],arr[i]];
}
}
}
return arr
}

• 插入排序: 即将元素插入到已排序好的数组中

function insertSort(arr) {
for(let i = 1; i < arr.length; i++) {  //外循环从1开始，默认arr[0]是有序段
for(let j = i; j > 0; j--) {  //j = i,将arr[j]依次插入有序段中
if(arr[j] < arr[j-1]) {
[arr[j],arr[j-1]] = [arr[j-1],arr[j]];
} else {
break;
}
}
}
return arr;
}

3. 高级排序算法

• 快速排序 选择基准值(base)，原数组长度减一(基准值)，使用 splice
• 循环原数组，小的放左边(left数组)，大的放右边(right数组);
• concat(left, base, right)
• 递归继续排序 left 与 right

function quickSort(arr) {
if(arr.length <= 1) {
return arr;  //递归出口
}
var left = [],
right = [],
current = arr.splice(0,1);
for(let i = 0; i < arr.length; i++) {
if(arr[i] < current) {
left.push(arr[i])  //放在左边
} else {
right.push(arr[i]) //放在右边
}
}
return quickSort(left).concat(current,quickSort(right));
}

• 希尔排序：不定步数的插入排序，插入排序

• 口诀: 插冒归基稳定，快选堆希不稳定

稳定性： 同大小情况下是否可能会被交换位置, 虚拟dom的diff，不稳定性会导致重新渲染；

4. 递归运用(斐波那契数列)： 爬楼梯问题

初始在第一级，到第一级有1种方法(s(1) = 1)，到第二级也只有一种方法(s(2) = 1)， 第三级(s(3) = s(1) + s(2))

function cStairs(n) {
if(n === 1 || n === 2) {
return 1;
} else {
return cStairs(n-1) + cStairs(n-2)
}
}

5. 数据树

• 二叉树: 最多只有两个子节点 完全二叉树
• 满二叉树 深度为 h, 有 n 个节点，且满足 n = 2^h - 1

小值在左，大值在右
• 节点 n 的所有左子树值小于 n，所有右子树值大于 n

• 遍历节点 前序遍历
  根节点
• 访问左子节点，回到 1
• 访问右子节点，回到 1

先访问到最左的子节点
• 访问该节点的父节点
• 访问该父节点的右子节点， 回到 1

先访问到最左的子节点
• 访问相邻的右节点
• 访问父节点， 回到 1

首屏渲染优化
• 用户体验优化
• webpack 性能优化

webview 加载过程
• bridge 原理
• hybrid app 经验