推荐下我自己的小册 React SSR 服务端渲染原理解析与实践

全网最完整的 React SSR 同构技术原理解析与实践，从零开始手把手带你打造自己的同构应用开发骨架，帮助大家彻底深入理解服务端渲染及底层实现原理，学完本课程，你也可以打造自己的同构框架。

写在前面

现在面试文章已很多，更不觉得新鲜，本文可能有点不同，正因为“多”也就才有了本文的输出。

相信很多前端小伙伴也包括我在内，面试前都要做一些准备，而做做面试题是最平常不过的事儿了，然而每次面试前都要现找面试题，而且答案也不是现成的，其实这样重复的事情在不知不觉中浪费你很多时间。

也就因为发现了这个问题，才有了把面试题进行整理的想法，希望能对一些人有所帮助，节省一点时间吧。

题目整理

这1个多月来一直在整理前端领域相关的面试题，阅读查看了将近100多篇的面试文章，文章大多来自技术社区，如掘金、思否等，由于很多文章的题目重复性较大，所以整理起来比较费事。

到目前为止已经收集了将近500道，包含问答题、代码题、高频基础、大厂题目等。

下面是部分问题：

第1题 谈谈变量提升？
第2题 说说bind、call、apply的 区别？
第3题 如何实现一个 bind 函数？
第4题 请实现一个 call 函数
第5题 如何实现一个 apply 函数？
第6题 简单说下原型链？
第7题 怎么判断对象类型？
第8题 说说箭头函数的特点
第9题 如何确定This指向
第10题 async、await 的优缺点
第11题 generator 原理
第12题 对Promise的理解
第13题 == 和 ===区别，什么情况用 ==
第14题 垃圾回收 新生代算法，老生代算法
第15题 说说你对闭包的理解
第16题 基本数据类型和引⽤类型在存储上的差别
第17题 浏览器 Eventloop 和 Node 中的有什么区别
第18题 怎样理解setTimeout 执行误差
第19题 说说函数节流和防抖
第20题 数组降维
第21题 请实现一个深拷贝
第22题 typeof 于 instanceof 区别
第23题 cookie和localSrorage、session、indexDB 的区别
第24题 怎么判断页面是否加载完成？
第25题 说说 jsonp 原理
第26题 说说你对Service worker的理解
第27题 说说浏览器缓存机制
第28题 怎样选择合适的缓存策略
第29题 说说重绘（Repaint）和回流（Reflow）
第30题 如何优化图片
第31题 页面首屏渲染性能优化方案有哪些
第32题 浏览器性能问题-使用 Webpack 优化项目
第33题 Babel 原理
第34题 介绍下React 生命周期
第35题 react setState 机制
第36题 Vue的 nextTick 原理
第37题 Vue 生命周期
第38题 Vue 双向绑定
第39题 v-model原理
第40题 watch 和 computed 的区别和运用的场景
第41题 Vue 的父子通信
第42题 简述路由原理
第43题 MVVM-脏数据检测
第44题 MVVM-数据劫持
第45题 React V16 生命周期函数用法
第46题 Vue 和 React 区别
第47题 介绍下虚拟 DOM，对虚拟 DOM 的理解
第48题 路由鉴权
第49题 TCP 3次握手
第50题 TCP 拥塞控制
第51题 慢开始算法
第52题 拥塞避免算法
第53题 tcp 快速重传
第54题 TCP New Ren 改进后的快恢复
第55题 HTTPS 握手
第56题 从输入 URL 到页面加载全过程
第57题 HTTP 常用状态码 301 302 304 403
第58题 常见排序-冒泡排序
第59题 常见排序-插入排序
第60题 常见排序-选择排序
第61题 常见排序-归并排序
第62题 常见排序-快排
第63题 常见排序-堆排序
第64题 常见排序-系统自带排序实现
第65题 介绍下设计模式-工厂模式
第66题 介绍下设计模式-单例模式
第67题 介绍下设计模式-适配器模式
第68题 介绍下设计模式-装饰模式
第69题 介绍下设计模式-代理模式
第70题 介绍下设计模式-发布-订阅模式
第71题 Vue 响应式原理
第72题 实现一个new操作符
第73题 实现一个JSON.stringify
第74题 实现一个JSON.parse
第75题 手写一个继承
第76题 实现一个JS函数柯里化
第77题 请手写一个Promise(中高级必考)
第78题 手写防抖(Debouncing)和节流(Throttling)
第79题 实现一个instanceOf
第80题 实现一个私有变量
第81题 使用setTimeout代替setInterval进行间歇调用
第82题 数组中的forEach和map的区别
第83题 for in和for of的区别
第84题 写一个发布订阅 EventEmitter方法
第85题 let、var、const区别
第86题 typeof和instanceof 区别
第87题 常见的继承的几种方法
第88题 常见的浏览器内核有哪些?
第89题 浏览器的主要组成部分是什么？
第90题 浏览器是如何渲染UI的？
第91题 浏览器如何解析css选择器？
第92题 DOM Tree是如何构建的？
第93题 重绘与重排的区别？
第94题 如何触发重排和重绘？
第95题 如何避免重绘或者重排？
第96题 前端如何实现即时通讯？
第97题 什么是浏览器同源策略？
第98题 怎样解决跨域问题？
第99题 时间格式化
第100题 说说对html 语义化的理解
第101题 说说常用的 meta 标签
第102题 说说两种盒模型以及区别
第103题 css reset 和 normalize.css 有什么区别
第104题 怎样让元素水平垂直居中
第105题 说说选择器的权重计算方式
第106题 清除浮动的方法
第107题 说说你对 BFC 的理解
第108题 import 和 link 区别
第109题 说下 [1, 2, 3].map(parseInt) 结果
第110题 介绍下浏览器事件委托
第111题 10w 条记录的数组，一次性渲染到页面上，如何处理可以不冻结UI？
第112题 如何实现一个左右固定，中间自适应的三栏布局
第113题 如何实现一个自适应的正方形
第114题 如何用css实现一个三角形
第115题 介绍下 positon 属性
第116题 说说渐进增强和优雅降级
第117题 defer和async区别
第118题 实现sleep函数
第119题 实现 lazyMan
第120题 获取元素的最终background-color
....

解析呢？请继续往下看。

利用碎片时间系统刷题

为了方便管理和维护这些题目，同时为前端小伙伴儿提供更好看题体验，我简单做了一个题库网站-大前端面试题库，宗旨是充分利用大家的碎片时间，在上下班，地铁公交上刷刷题，日积月累，尽量避免临时抱佛脚的局面。

另外对面试题做了一个简单的类型划分，进行分类划分的重要性不言而喻，碎片化的信息会极大的消耗我们精力，同时也不利于我们记忆，人脑自然的更喜欢结构化的，有规则的信息，通过系统的只处理同一种类型的问题来降低大脑的损耗，加强我们对知识的理解和记忆。

分类大概为js、经典高频、编程题、大厂题、html、css、布局、浏览器、性能、前端框架、react、vue、web 安全、数据结构和算法、http、tcp、node、设计模式等。

这个网站是用的我自己的 react ssr 开发骨架做的，目前支持 pc 和移动端浏览。

看下页面效果

解析/答案

由于个人精力有限，一时无法写完所有的问题解析。目前仍在继续完善中，这个过程也是对自己一种提升和沉淀，我觉得这个价值很大。

不过为了方便大家校对答案，大部分问题的解析我单独做了链接跳转，指向了原文，可直接跳转到来源文章查看解析。

一点心得

这个题库的价值不只是用来刷题，他的价值在于问题本身，问题本身比答案更重要。

通过问题来验证自己的知识技能，核对自己对知识的掌握程度，这完全可以当做一种学习方法来执行。

当我们遇到的问题越多，理解和解决的问题越多，相对的我们的能力就会越强。
这500+看上去确实挺多的了，覆盖面也挺广了，但是前端技术日新月异，新技术新思路层出不穷，相关的问题也会不断的更新迭代，所以这个题库还要继续更新，后面继续把更有针对性的问题收集进来。

以上一些观点有些属于本人自嗨，现在回归初心，收集题库并创建题库站的最终目的是希望帮一些人提升一点效率，节约一点时间，利用碎片时间，上下班地铁上刷个题，如果还能帮你提升技能，提升搞定面试的几率，那就最好不过了。

题库入口1

为了方便大家找到入口不迷路，题库入口绑定到了公众号的独立菜单。

我的公众号是-《前端技术江湖》，主要是个人的原创和一些工作心得的输出，可以及时的获得题库的更新通知，另外还有很多优质文章和前端学习资料，希望大家多多关注。

题库入口2

网站入口 - 大前端面试题库- http://bigerfe.com/，内有福利哦。

最后一件事

我正在打造一个纯技术交流群，面向初中级前端开发者，以学习、交流、思考、提升能力为目标，因为一个人学不如大家一起学，有了更多的交流才会进步的更快。

我理想的模式是，每期让一个人深入学习一个技术，然后自己再转述给大家听，类似一个分享课堂，这样可以成倍的提升学习效率。

或者可以按照题库的顺序依次进行，每人每天对对一个问题进行思考和总结性的输出，锻炼技术的同时提升表达能力。

在这个群里不用担心自己的能力不足，不用担心问题是否太小白而不敢说，大胆的说出问题， 让更多的人一起来分析，说错了也没关系。

有想加入请的关注公众号《前端技术江湖》，回复‘进群’，我拉你进群，另外还有各种学习资料和学习视频

希望本文可以给你带了一些帮助和便利，文中如有错误，欢迎在评论区指。
如果这篇文章帮助到了你，欢迎点赞和关注。

组件

组件是 UI + 逻辑的复用，但逻辑复用能力等于 0。

一个 React 项目，是由无数个大大小小的组件组合而成的。在 React 的世界中，组件是一等公民。而我们平时拆分组件的依据无非是：尽量的复用代码。

组件是 UI + 逻辑的复用，你不能将 UI 和逻辑拆开。比如 Antd 的 Cascader 级联选择 组件，内置了样式和级联选择的逻辑，用户使用的时候相当于一个黑盒，只管用就行了。但是有一个很现实的问题，当该组件的样式不能满足我们需求的时候，我们需要从 0 重新实现一个组件，重写 UI + 逻辑，哪怕逻辑真的一模一样。组件的逻辑复用能力等于 0。我可以想到一个可怕的事实，社区上的同类组件，大部分的逻辑都是可以复用的，只是在样式上有差异，但逻辑共享在社区上并没有很流行。

HOC 与 Render Props

HOC 与 Render Props 可以把逻辑抽出来复用，但并没有让逻辑复用流行起来。

当然，我上面说的不能复用有点夸张，React 提供了 HOC 与 Render Props 两种方式来解决逻辑复用的问题。比如下面的监听鼠标位置的逻辑，我们就可以通过 Render Props 来复用。

<Mouse>
  (position)=> <OurComponent />
</Mouse>

同类逻辑包括监听 window size，监听 scroll 位置等等。但是我们一般很少用 render props 来封装逻辑，更少去和其它项目去共享逻辑。为什么呢？想想多个逻辑复用会怎么样，你就知道多可怕了。

<WindowSize>
  (size)=> (
        <Mouse>
        (position)=> <OurComponent size={size} mouse={position}/>
    </Mouse>
    )
</WindowSize> 

嵌套地狱的代码是我们不能忍受的，同时 HOC 也存在类似的问题，这可能是导致逻辑复用不能流行起来的一个重要原因。

React Hooks

React Hooks 很好的解决了逻辑复用的问题，同时社区中诞生了一批比较好的 React Hooks 库。

React Hooks 是今年 React 的一个重磅炸弹，在社区引起了激烈的回响。随着 Hooks 的诞生，我们可以通过 Custom Hooks 很方便的封装逻辑，逻辑共享也成为了潮流。比如上面的例子，我们就可以通过 react-use 很方便的实现。

import {useMouse, useWindowSize, useScroll} from 'react-use'

function Demo(){
  const mousePosition = useMouse();
  const windowSize = useWindowSize();
}

react-use 是社区中比较优秀的 Hooks 库，封装了很多常用的基础逻辑，在日常开发中必不可少。但是只用 react-use 就够了吗？显然不是。react-use 中的 Hooks 粒度比较小，类似于工具库。

而在中台产品中，有很多特定的场景逻辑，需要多个 Hooks 进行组合，或者定制特定的逻辑。在蚂蚁内部，有非常多的中台应用，开发者在各自项目中沉淀了各种好用的 custom Hooks，我们把这些好用的逻辑拿出来，创建了 @umijs/hooks ，定位为为中台场景服务的 Hooks 库。

@umijs/hooks

@umijs/hooks 是面向中台应用场景的 Hooks 库，封装了中台常见场景的逻辑，让中台开发变得超级简单。@umijs/hooks 已经在蚂蚁金服多个产品中落地，口碑很好，提效明显。当然，你可能不信，口说无凭，那就用例子来说话。

useAntdTable

中台开发中，table 页面应该算最多的一个了，我们一般会使用 Antd 的 Table 组件来搭建，但是其中还是有很多逻辑，我们是无法避免的。

1. page，pageSize管理
2. page，pageSize 变化时重新进行异步请求
3. 筛选条件变化时，重置 page，并重新请求数据
4. 异步请求的 loading 处理
5. 异步请求的竞态处理
6. 组件卸载时丢弃进行中的异步请求（很多人通常不处理，在某些情况会报警告）

上面的逻辑，我们在几乎所有的 table 页是必须要处理的，想想都可怕。useAntdTable 至少封装了上面 6 个逻辑，一行代码封装所有逻辑，列表页开发从未变得如此简单。

const { tableProps } = useAntdTable(asyncFn);
const columns = [];
return (
  <Table columns={columns} rowKey="id" {...tableProps} />
)

useSearch

常见的异步搜索场景，我们一般要处理：

1. 防抖
2. 异步请求的 loading 处理
3. 异步请求的请求时序控制
4. 组件卸载时取消防抖及异步请求等逻辑

现在一切变得如此简单：

const { data, loading, onChange } = useSearch(asyncFn);

<Select
  onSearch={onChange}
  loading={loading}
>
  {data.map((item)=><Option />)}
</Select>

更多的 Custom Hooks

当然，我们还有更多极大提效的 Custom Hooks，你能想象不用写一行逻辑，就能实现异步 loadmore 功能吗？(useLoadMore)

你能想象不用写一行逻辑，就能实现动态增删，排序的表单吗？(useDynamicList)

各种常见场景，通通不用写逻辑，通通不用写逻辑。你可以在@umijs/hooks发现更多好用的 Hooks。

基础 Hooks

react-use 应该是目前发展最好的 Hooks 库，但是我们正在逐渐放弃它，最大的原因是版本升级太快，你能想象几个月之前我项目中用的是 v9，现在已经是 v13 了吗？我已经不知道怎么去升级了。

为了解决这个问题，@umijs/hooks 也沉淀了日常工作中频繁使用的基础 Hooks，包括常用的 useAsync，useDebounce，useBoolean，useMouse 等等，并且还在不断发展。也许只用 umi hooks 就够了。

写在最后

umi hooks 让中台开发变得如此简单，我能想象，不久的将来，中台开发可以不用写一行逻辑，这也是我们为之奋斗的目标。

同时，希望更多的人参与进来，你可以提供好的 idea，也可以将日常封装的 Hooks 贡献上来，让 umi hooks 更加丰满，让更多的人收益。

如果你觉得不错，动动手指，点个 star，鼓励下我们，万分感谢！

本文以CentOS 7/Mac 为例，介绍zsh的配置使用教程。

准备

查看当前环境shell

echo $SHELL

<!-- more -->

查看系统自带哪些shell

cat /etc/shells

安装zsh

yum install zsh # CentOS
brew install zsh # mac安装

将zsh设置为默认shell

chsh -s /bin/zsh # CentOS

# Mac如下
# 在 /etc/shells 文件中加入如下一行
/usr/local/bin/zsh
# 接着运行
chsh -s /usr/local/bin/zsh

可以通过echo $SHELL查看当前默认的shell，如果没有改为/bin/zsh，那么需要重启shell。

oh-my-zsh

配置zsh是一件麻烦的事儿，爱折腾的程序猿怎么可能忍受？！于是，oh-my-zsh出现了，有了这个东东，zsh配置起来就方便多了！

安装oh-my-zsh

有若干安装方式，介绍三种：
1.自动安装

wget https://github.com/robbyrussell/oh-my-zsh/raw/master/tools/install.sh -O - | sh

2.手动安装

git clone git://github.com/robbyrussell/oh-my-zsh.git ~/.oh-my-zsh
cp ~/.oh-my-zsh/templates/zshrc.zsh-template ~/.zshrc

3.真-手动安装

• 在oh-my-zsh的github主页，手动将zip包下载下来。
• 将zip包解压，拷贝至~/.oh-my-zsh目录。此处省略拷贝的操作步骤。
• 执行cp ~/.oh-my-zsh/templates/zshrc.zsh-template ~/.zshrc

三选一即可，适合各种环境下的安装，然后需要source ~/.zshrc将配置生效。以下修改了.zshrc文件之后，都执行一下这个命令。

zsh主题

通过如下命令可以查看可用的Theme：

# ls ~/.oh-my-zsh/themes

如何修改zsh主题呢？
编辑~/.zshrc文件，将ZSH_THEME="candy",即将主题修改为candy。我采用的steeef。

zsh扩展

在~/.zshrc中找到plugins关键字，就可以自定义启用的插件了，系统默认加载git。

git插件

命令内容可以参考cat ~/.oh-my-zsh/plugins/git/git.plugin.zsh。

常用的：

gapa    git add --patch
gc!    git commit -v --amend
gcl    git clone --recursive
gclean    git reset --hard && git clean -dfx
gcm    git checkout master
gcmsg    git commit -m
gco    git checkout
gd    git diff
gdca    git diff --cached
gp    git push
grbc    git rebase --continue
gst    git status
gup    git pull --rebase

完整列表：https://github.com/robbyrussell/oh-my-zsh/wiki/Plugin:git

extract

解压文件用的，所有的压缩文件，都可以直接x filename，不用记忆参数

当然，如果你想要用tar命令，可以使用tar -加tab键，zsh会列出参数的含义。

autojump

按照官方文档介绍，需要使用如下命令安装，而不是一些博客中的介绍：

yum install autojump-zsh # CentOS
brew install autojump # Mac

CentOS安装好之后，需要在~/.zshrc中配置一下，除了在plugins中增加autojump之外，还需要添加一行：

[[ -s ~/.autojump/etc/profile.d/autojump.sh ]] && . ~/.autojump/etc/profile.d/autojump.sh

安装好之后，记得source ~/.zshrc，然后你就可以通过j+目录名快速进行目录跳转。支持目录名的模糊匹配和自动补全。

• j -stat：可以查看历史路径库

zsh-autosuggestions

zsh-autosuggestions

git clone git://github.com/zsh-users/zsh-autosuggestions $ZSH_CUSTOM/plugins/zsh-autosuggestions

在 ~/.zshrc 中配置

plugins=(其他的插件 zsh-autosuggestions)

因为箭头→不太方便，在.zshrc中自定义补全快捷键为逗号，但是又一次遇到了需要输入逗号的情况，所以，并不太推荐如下修改：

bindkey ',' autosuggest-accept

zsh-syntax-highlighting

zsh-syntax-highlighting

git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting

~/.zshrc文件中配置：

plugins=(其他的插件 zsh-syntax-highlighting)

git-open

git-open插件可以在你git项目下打开远程仓库浏览项目。

git clone https://github.com/paulirish/git-open.git $ZSH_CUSTOM/plugins/git-open

bat

bat 代替 cat
cat 某个文件，可以在终端直接输出文件内容，bat 相比 cat 增加了行号和颜色高亮 👍

brew install bat

常用快捷键

• 命令历史记录

  • 一旦在 shell 敲入正确命令并能执行后，shell 就会存储你所敲入命令的历史记录（存放在~/.zsh_history 文件中），方便再次运行之前的命令。可以按方向键↑和↓来查看之前执行过的命令
  • 可以用 r来执行上一条命令
  • 使用 ctrl-r 来搜索命令历史记录

• 命令别名

  • 可以简化命令输入，在 .zshrc 中添加 alias shortcut='this is the origin command' 一行就相当于添加了别名
  • 在命令行中输入 alias 可以查看所有的命令别名

使用技巧

• 连按两次Tab会列出所有的补全列表并直接开始选择，补全项可以使用 ctrl+n/p/f/b上下左右切换
• 智能跳转，安装了 autojump 之后，zsh 会自动记录你访问过的目录，通过 j 目录名 可以直接进行目录跳转，而且目录名支持模糊匹配和自动补全，例如你访问过 hadoop-1.0.0 目录，输入j hado 即可正确跳转。j --stat 可以看你的历史路径库。
• 命令选项补全。在zsh中只需要键入 tar -<tab> 就会列出所有的选项和帮助说明
• 在当前目录下输入 .. 或 ... ，或直接输入当前目录名都可以跳转，你甚至不再需要输入 cd 命令了。在你知道路径的情况下，比如 /usr/local/bin 你可以输入 cd /u/l/b 然后按进行补全快速输入
• 目录浏览和跳转：输入 d，即可列出你在这个会话里访问的目录列表，输入列表前的序号，即可直接跳转。
• 命令参数补全。键入 kill <tab> 就会列出所有的进程名和对应的进程号
• 更智能的历史命令。在用或者方向上键查找历史命令时，zsh支持限制查找。比如，输入ls,然后再按方向上键，则只会查找用过的ls命令。而此时使用则会仍然按之前的方式查找，忽略 ls
• 多个终端会话共享历史记录
• 通配符搜索：ls -l **/*.sh，可以递归显示当前目录下的 shell 文件，文件少时可以代替 find。使用 **/ 来递归搜索
• 扩展环境变量，输入环境变量然后按 就可以转换成表达的值
• 在 .zshrc 中添加 setopt HIST_IGNORE_DUPS 可以消除重复记录，也可以利用 sort -t ";" -k 2 -u ~/.zsh_history | sort -o ~/.zsh_history 手动清除

最后

• Github-Michael728/my-config-files 附上我的配置文件地址；
• zsh+on-my-zsh配置教程指南 本文地址

参考

• wting/autojump--官方文档
• powerline/fonts

Linux

• 终极 Shell
• Ubuntu 16.04下安装zsh和oh-my-zsh
• Ubuntu 下安装oh-my-zsh
• 掘金-Shell 中的极品-- Zsh
• CentOS 7下autojump无法使用的可能原因
• oh-my-zsh配置你的zsh提高shell逼格终极选择

Mac

• zsh oh-my-zsh 插件推荐
• zsh 全程指南-推荐
• iterm主题下载
• 程序员内功系列--iTerm与Zsh篇
• Mac 下配置终端环境 iTerm2 + Zsh + Oh My Zsh + tmux

本文以CentOS 7/Mac 为例，介绍zsh的配置使用教程。

准备

查看当前环境shell

echo $SHELL

<!-- more -->

查看系统自带哪些shell

cat /etc/shells

安装zsh

yum install zsh # CentOS
brew install zsh # mac安装

将zsh设置为默认shell

chsh -s /bin/zsh # CentOS

# Mac如下
# 在 /etc/shells 文件中加入如下一行
/usr/local/bin/zsh
# 接着运行
chsh -s /usr/local/bin/zsh

可以通过echo $SHELL查看当前默认的shell，如果没有改为/bin/zsh，那么需要重启shell。

oh-my-zsh

配置zsh是一件麻烦的事儿，爱折腾的程序猿怎么可能忍受？！于是，oh-my-zsh出现了，有了这个东东，zsh配置起来就方便多了！

安装oh-my-zsh

有若干安装方式，介绍三种：
1.自动安装

wget https://github.com/robbyrussell/oh-my-zsh/raw/master/tools/install.sh -O - | sh

2.手动安装

git clone git://github.com/robbyrussell/oh-my-zsh.git ~/.oh-my-zsh
cp ~/.oh-my-zsh/templates/zshrc.zsh-template ~/.zshrc

3.真-手动安装

• 在oh-my-zsh的github主页，手动将zip包下载下来。
• 将zip包解压，拷贝至~/.oh-my-zsh目录。此处省略拷贝的操作步骤。
• 执行cp ~/.oh-my-zsh/templates/zshrc.zsh-template ~/.zshrc

三选一即可，适合各种环境下的安装，然后需要source ~/.zshrc将配置生效。以下修改了.zshrc文件之后，都执行一下这个命令。

zsh主题

通过如下命令可以查看可用的Theme：

# ls ~/.oh-my-zsh/themes

如何修改zsh主题呢？
编辑~/.zshrc文件，将ZSH_THEME="candy",即将主题修改为candy。我采用的steeef。

zsh扩展

在~/.zshrc中找到plugins关键字，就可以自定义启用的插件了，系统默认加载git。

git插件

命令内容可以参考cat ~/.oh-my-zsh/plugins/git/git.plugin.zsh。

常用的：

gapa    git add --patch
gc!    git commit -v --amend
gcl    git clone --recursive
gclean    git reset --hard && git clean -dfx
gcm    git checkout master
gcmsg    git commit -m
gco    git checkout
gd    git diff
gdca    git diff --cached
gp    git push
grbc    git rebase --continue
gst    git status
gup    git pull --rebase

完整列表：https://github.com/robbyrussell/oh-my-zsh/wiki/Plugin:git

extract

解压文件用的，所有的压缩文件，都可以直接x filename，不用记忆参数

当然，如果你想要用tar命令，可以使用tar -加tab键，zsh会列出参数的含义。

autojump

按照官方文档介绍，需要使用如下命令安装，而不是一些博客中的介绍：

yum install autojump-zsh # CentOS
brew install autojump # Mac

CentOS安装好之后，需要在~/.zshrc中配置一下，除了在plugins中增加autojump之外，还需要添加一行：

[[ -s ~/.autojump/etc/profile.d/autojump.sh ]] && . ~/.autojump/etc/profile.d/autojump.sh

安装好之后，记得source ~/.zshrc，然后你就可以通过j+目录名快速进行目录跳转。支持目录名的模糊匹配和自动补全。

• j -stat：可以查看历史路径库

zsh-autosuggestions

zsh-autosuggestions

git clone git://github.com/zsh-users/zsh-autosuggestions $ZSH_CUSTOM/plugins/zsh-autosuggestions

在 ~/.zshrc 中配置

plugins=(其他的插件 zsh-autosuggestions)

因为箭头→不太方便，在.zshrc中自定义补全快捷键为逗号，但是又一次遇到了需要输入逗号的情况，所以，并不太推荐如下修改：

bindkey ',' autosuggest-accept

zsh-syntax-highlighting

zsh-syntax-highlighting

git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting

~/.zshrc文件中配置：

plugins=(其他的插件 zsh-syntax-highlighting)

git-open

git-open插件可以在你git项目下打开远程仓库浏览项目。

git clone https://github.com/paulirish/git-open.git $ZSH_CUSTOM/plugins/git-open

bat

bat 代替 cat
cat 某个文件，可以在终端直接输出文件内容，bat 相比 cat 增加了行号和颜色高亮 👍

brew install bat

常用快捷键

• 命令历史记录

  • 一旦在 shell 敲入正确命令并能执行后，shell 就会存储你所敲入命令的历史记录（存放在~/.zsh_history 文件中），方便再次运行之前的命令。可以按方向键↑和↓来查看之前执行过的命令
  • 可以用 r来执行上一条命令
  • 使用 ctrl-r 来搜索命令历史记录

• 命令别名

  • 可以简化命令输入，在 .zshrc 中添加 alias shortcut='this is the origin command' 一行就相当于添加了别名
  • 在命令行中输入 alias 可以查看所有的命令别名

使用技巧

• 连按两次Tab会列出所有的补全列表并直接开始选择，补全项可以使用 ctrl+n/p/f/b上下左右切换
• 智能跳转，安装了 autojump 之后，zsh 会自动记录你访问过的目录，通过 j 目录名 可以直接进行目录跳转，而且目录名支持模糊匹配和自动补全，例如你访问过 hadoop-1.0.0 目录，输入j hado 即可正确跳转。j --stat 可以看你的历史路径库。
• 命令选项补全。在zsh中只需要键入 tar -<tab> 就会列出所有的选项和帮助说明
• 在当前目录下输入 .. 或 ... ，或直接输入当前目录名都可以跳转，你甚至不再需要输入 cd 命令了。在你知道路径的情况下，比如 /usr/local/bin 你可以输入 cd /u/l/b 然后按进行补全快速输入
• 目录浏览和跳转：输入 d，即可列出你在这个会话里访问的目录列表，输入列表前的序号，即可直接跳转。
• 命令参数补全。键入 kill <tab> 就会列出所有的进程名和对应的进程号
• 更智能的历史命令。在用或者方向上键查找历史命令时，zsh支持限制查找。比如，输入ls,然后再按方向上键，则只会查找用过的ls命令。而此时使用则会仍然按之前的方式查找，忽略 ls
• 多个终端会话共享历史记录
• 通配符搜索：ls -l **/*.sh，可以递归显示当前目录下的 shell 文件，文件少时可以代替 find。使用 **/ 来递归搜索
• 扩展环境变量，输入环境变量然后按 就可以转换成表达的值
• 在 .zshrc 中添加 setopt HIST_IGNORE_DUPS 可以消除重复记录，也可以利用 sort -t ";" -k 2 -u ~/.zsh_history | sort -o ~/.zsh_history 手动清除

最后

• Github-Michael728/my-config-files 附上我的配置文件地址；
• zsh+on-my-zsh配置教程指南 本文地址

参考

• wting/autojump--官方文档
• powerline/fonts

Linux

• 终极 Shell
• Ubuntu 16.04下安装zsh和oh-my-zsh
• Ubuntu 下安装oh-my-zsh
• 掘金-Shell 中的极品-- Zsh
• CentOS 7下autojump无法使用的可能原因
• oh-my-zsh配置你的zsh提高shell逼格终极选择

Mac

• zsh oh-my-zsh 插件推荐
• zsh 全程指南-推荐
• iterm主题下载
• 程序员内功系列--iTerm与Zsh篇
• Mac 下配置终端环境 iTerm2 + Zsh + Oh My Zsh + tmux

互联网寒冬之际，各大公司都缩减了HC，甚至是采取了“裁员”措施，在这样的大环境之下，想要获得一份更好的工作，必然需要付出更多的努力。

一年前，也许你搞清楚闭包，this，原型链，就能获得认可。但是现在，很显然是不行了。本文梳理出了一些面试中有一定难度的高频原生JS问题，部分知识点可能你之前从未关注过，或者看到了，却没有仔细研究，但是它们却非常重要。本文将以真实的面试题的形式来呈现知识点，大家在阅读时，建议不要先看我的答案，而是自己先思考一番。尽管，本文所有的答案，都是我在翻阅各种资料，思考并验证之后，才给出的(绝非复制粘贴而来)。但因水平有限，本人的答案未必是最优的，如果您有更好的答案，欢迎给我留言。

本文篇幅较长，但是满满的都是干货！并且还埋伏了可爱的表情包，希望小伙伴们能够坚持读完。

衷心的祝愿大家都能找到心仪的工作。

1. 原始类型有哪几种？null 是对象吗？原始数据类型和复杂数据类型存储有什么区别？

• 原始类型有6种，分别是undefined,null,bool,string,number,symbol(ES6新增)。
• 虽然 typeof null 返回的值是 object,但是null不是对象，而是基本数据类型的一种。
• 原始数据类型存储在栈内存，存储的是值。
• 复杂数据类型存储在堆内存，存储的是地址。当我们把对象赋值给另外一个变量的时候，复制的是地址，指向同一块内存空间，当其中一个对象改变时，另一个对象也会变化。

2. typeof 是否正确判断类型? instanceof呢？ instanceof 的实现原理是什么？

首先 typeof 能够正确的判断基本数据类型，但是除了 null, typeof null输出的是对象。

但是对象来说，typeof 不能正确的判断其类型， typeof 一个函数可以输出 'function',而除此之外，输出的全是 object,这种情况下，我们无法准确的知道对象的类型。

instanceof可以准确的判断复杂数据类型，但是不能正确判断基本数据类型。(正确判断数据类型请戳：https://github.com/YvetteLau/...

instanceof 是通过原型链判断的，A instanceof B, 在A的原型链中层层查找，是否有原型等于B.prototype，如果一直找到A的原型链的顶端(null;即Object.prototype.__proto__),仍然不等于B.prototype，那么返回false，否则返回true.

instanceof的实现代码:

// L instanceof R
function instance_of(L, R) {//L 表示左表达式，R 表示右表达式
    var O = R.prototype;// 取 R 的显式原型
    L = L.__proto__;    // 取 L 的隐式原型
    while (true) { 
        if (L === null) //已经找到顶层
            return false;  
        if (O === L)   //当 O 严格等于 L 时，返回 true
            return true; 
        L = L.__proto__;  //继续向上一层原型链查找
    } 
}

3. for of , for in 和 forEach,map 的区别。

• for...of循环：具有 iterator 接口，就可以用for...of循环遍历它的成员(属性值)。for...of循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象、Generator 对象，以及字符串。for...of循环调用遍历器接口，数组的遍历器接口只返回具有数字索引的属性。对于普通的对象，for...of结构不能直接使用，会报错，必须部署了 Iterator 接口后才能使用。可以中断循环。
• for...in循环：遍历对象自身的和继承的可枚举的属性, 不能直接获取属性值。可以中断循环。
• forEach: 只能遍历数组，不能中断，没有返回值(或认为返回值是undefined)。
• map: 只能遍历数组，不能中断，返回值是修改后的数组。

PS: Object.keys()：返回给定对象所有可枚举属性的字符串数组。

关于forEach是否会改变原数组的问题，有些小伙伴提出了异议，为此我写了代码测试了下(注意数组项是复杂数据类型的情况)。
除了forEach之外，map等API，也有同样的问题。

let arry = [1, 2, 3, 4];

arry.forEach((item) => {
    item *= 10;
});
console.log(arry); //[1, 2, 3, 4]

arry.forEach((item) => {
    arry[1] = 10; //直接操作数组
});
console.log(arry); //[ 1, 10, 3, 4 ]

let arry2 = [
    { name: "Yve" },
    { age: 20 }
];
arry2.forEach((item) => {
    item.name = 10;
});
console.log(arry2);//[ { name: 10 }, { age: 20, name: 10 } ]

如还不了解 iterator 接口或 for...of, 请先阅读ES6文档: Iterator 和 for...of 循环

更多细节请戳: https://github.com/YvetteLau/...

4. 如何判断一个变量是不是数组？

• 使用 Array.isArray 判断，如果返回 true, 说明是数组
• 使用 instanceof Array 判断，如果返回true, 说明是数组
• 使用 Object.prototype.toString.call 判断，如果值是 [object Array], 说明是数组
• 通过 constructor 来判断，如果是数组，那么 arr.constructor === Array. (不准确，因为我们可以指定 obj.constructor = Array)

function fn() {
    console.log(Array.isArray(arguments));   //false; 因为arguments是类数组，但不是数组
    console.log(Array.isArray([1,2,3,4]));   //true
    console.log(arguments instanceof Array); //fasle
    console.log([1,2,3,4] instanceof Array); //true
    console.log(Object.prototype.toString.call(arguments)); //[object Arguments]
    console.log(Object.prototype.toString.call([1,2,3,4])); //[object Array]
    console.log(arguments.constructor === Array); //false
    arguments.constructor = Array;
    console.log(arguments.constructor === Array); //true
    console.log(Array.isArray(arguments));        //false
}
fn(1,2,3,4);

5. 类数组和数组的区别是什么？

类数组:

1）拥有length属性，其它属性（索引）为非负整数（对象中的索引会被当做字符串来处理）;

2）不具有数组所具有的方法；

类数组是一个普通对象，而真实的数组是Array类型。

常见的类数组有: 函数的参数 arugments, DOM 对象列表(比如通过 document.querySelectorAll 得到的列表), jQuery 对象 (比如 $("div")).

类数组可以转换为数组:

//第一种方法
Array.prototype.slice.call(arrayLike, start);
//第二种方法
[...arrayLike];
//第三种方法:
Array.from(arrayLike);

PS: 任何定义了遍历器（Iterator）接口的对象，都可以用扩展运算符转为真正的数组。

Array.from方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象。

6. == 和 === 有什么区别？

=== 不需要进行类型转换，只有类型相同并且值相等时，才返回 true.

== 如果两者类型不同，首先需要进行类型转换。具体流程如下:

1. 首先判断两者类型是否相同，如果相等，判断值是否相等.
2. 如果类型不同，进行类型转换
3. 判断比较的是否是 null 或者是 undefined, 如果是, 返回 true .
4. 判断两者类型是否为 string 和 number, 如果是, 将字符串转换成 number
5. 判断其中一方是否为 boolean, 如果是, 将 boolean 转为 number 再进行判断
6. 判断其中一方是否为 object 且另一方为 string、number 或者 symbol , 如果是, 将 object 转为原始类型再进行判断

let person1 = {
    age: 25
}
let person2 = person1;
person2.gae = 20;
console.log(person1 === person2); //true,注意复杂数据类型，比较的是引用地址

思考: [] == ![]

我们来分析一下: [] == ![] 是true还是false？

1. 首先，我们需要知道 ! 优先级是高于 == (更多运算符优先级可查看: 运算符优先级)
2. ![] 引用类型转换成布尔值都是true,因此![]的是false
3. 根据上面的比较步骤中的第五条，其中一方是 boolean，将 boolean 转为 number 再进行判断，false转换成 number，对应的值是 0.
4. 根据上面比较步骤中的第六条，有一方是 number，那么将object也转换成Number,空数组转换成数字，对应的值是0.(空数组转换成数字，对应的值是0，如果数组中只有一个数字，那么转成number就是这个数字，其它情况，均为NaN)
5. 0 == 0; 为true

7. ES6中的class和ES5的类有什么区别？

1. ES6 class 内部所有定义的方法都是不可枚举的;
2. ES6 class 必须使用 new 调用;
3. ES6 class 不存在变量提升;
4. ES6 class 默认即是严格模式;
5. ES6 class 子类必须在父类的构造函数中调用super()，这样才有this对象;ES5中类继承的关系是相反的，先有子类的this，然后用父类的方法应用在this上。

8. 数组的哪些API会改变原数组？

修改原数组的API有:

splice/reverse/fill/copyWithin/sort/push/pop/unshift/shift

不修改原数组的API有:

slice/map/forEach/every/filter/reduce/entries/find

注: 数组的每一项是简单数据类型，且未直接操作数组的情况下。

9. let、const 以及 var 的区别是什么？

• let 和 const 定义的变量不会出现变量提升，而 var 定义的变量会提升。
• let 和 const 是JS中的块级作用域
• let 和 const 不允许重复声明(会抛出错误)
• let 和 const 定义的变量在定义语句之前，如果使用会抛出错误(形成了暂时性死区)，而 var 不会。
• const 声明一个只读的常量。一旦声明，常量的值就不能改变(如果声明是一个对象，那么不能改变的是对象的引用地址)

10. 在JS中什么是变量提升？什么是暂时性死区？

变量提升就是变量在声明之前就可以使用，值为undefined。

在代码块内，使用 let/const 命令声明变量之前，该变量都是不可用的(会抛出错误)。这在语法上，称为“暂时性死区”。暂时性死区也意味着 typeof 不再是一个百分百安全的操作。

typeof x; // ReferenceError(暂时性死区，抛错)
let x;

typeof y; // 值是undefined,不会报错

暂时性死区的本质就是，只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。

11. 如何正确的判断this? 箭头函数的this是什么？

this的绑定规则有四种：默认绑定，隐式绑定，显式绑定，new绑定.

1. 函数是否在 new 中调用(new绑定)，如果是，那么 this 绑定的是新创建的对象。
2. 函数是否通过 call,apply 调用，或者使用了 bind (即硬绑定)，如果是，那么this绑定的就是指定的对象。
3. 函数是否在某个上下文对象中调用(隐式绑定)，如果是的话，this 绑定的是那个上下文对象。一般是 obj.foo()
4. 如果以上都不是，那么使用默认绑定。如果在严格模式下，则绑定到 undefined，否则绑定到全局对象。
5. 如果把 null 或者 undefined 作为 this 的绑定对象传入 call、apply 或者 bind, 这些值在调用时会被忽略，实际应用的是默认绑定规则。
6. 箭头函数没有自己的 this, 它的this继承于上一层代码块的this。

测试下是否已经成功Get了此知识点(浏览器执行环境):

var number = 5;
var obj = {
    number: 3,
    fn1: (function () {
        var number;
        this.number *= 2;
        number = number * 2;
        number = 3;
        return function () {
            var num = this.number;
            this.number *= 2;
            console.log(num);
            number *= 3;
            console.log(number);
        }
    })()
}
var fn1 = obj.fn1;
fn1.call(null);
obj.fn1();
console.log(window.number);

如果this的知识点，您还不太懂，请戳: 嗨，你真的懂this吗？

12. 词法作用域和this的区别。

• 词法作用域是由你在写代码时将变量和块作用域写在哪里来决定的
• this 是在调用时被绑定的，this 指向什么，完全取决于函数的调用位置(关于this的指向问题，本文已经有说明)

13. 谈谈你对JS执行上下文栈和作用域链的理解。

执行上下文就是当前 JavaScript 代码被解析和执行时所在环境, JS执行上下文栈可以认为是一个存储函数调用的栈结构，遵循先进后出的原则。

• JavaScript执行在单线程上，所有的代码都是排队执行。
• 一开始浏览器执行全局的代码时，首先创建全局的执行上下文，压入执行栈的顶部。
• 每当进入一个函数的执行就会创建函数的执行上下文，并且把它压入执行栈的顶部。当前函数执行-完成后，当前函数的执行上下文出栈，并等待垃圾回收。
• 浏览器的JS执行引擎总是访问栈顶的执行上下文。
• 全局上下文只有唯一的一个，它在浏览器关闭时出栈。

作用域链: 无论是 LHS 还是 RHS 查询，都会在当前的作用域开始查找，如果没有找到，就会向上级作用域继续查找目标标识符，每次上升一个作用域，一直到全局作用域为止。

题难不难？不难！继续挑战一下难！知道难，就更要继续了！

14. 什么是闭包？闭包的作用是什么？闭包有哪些使用场景？

闭包是指有权访问另一个函数作用域中的变量的函数，创建闭包最常用的方式就是在一个函数内部创建另一个函数。

闭包的作用有:

1. 封装私有变量
2. 模仿块级作用域(ES5中没有块级作用域)
3. 实现JS的模块

15. call、apply有什么区别？call,aplly和bind的内部是如何实现的？

call 和 apply 的功能相同，区别在于传参的方式不一样:

• fn.call(obj, arg1, arg2, ...),调用一个函数, 具有一个指定的this值和分别地提供的参数(参数的列表)。
• fn.apply(obj, [argsArray]),调用一个函数，具有一个指定的this值，以及作为一个数组（或类数组对象）提供的参数。

call核心:

• 将函数设为传入参数的属性
• 指定this到函数并传入给定参数执行函数
• 如果不传入参数或者参数为null，默认指向为 window / global
• 删除参数上的函数

Function.prototype.call = function (context) {
    /** 如果第一个参数传入的是 null 或者是 undefined, 那么指向this指向 window/global */
    /** 如果第一个参数传入的不是null或者是undefined, 那么必须是一个对象 */
    if (!context) {
        //context为null或者是undefined
        context = typeof window === 'undefined' ? global : window;
    }
    context.fn = this; //this指向的是当前的函数(Function的实例)
    let args = [...arguments].slice(1);//获取除了this指向对象以外的参数, 空数组slice后返回的仍然是空数组
    let result = context.fn(...args); //隐式绑定,当前函数的this指向了context.
    delete context.fn;
    return result;
}

//测试代码
var foo = {
    name: 'Selina'
}
var name = 'Chirs';
function bar(job, age) {
    console.log(this.name);
    console.log(job, age);
}
bar.call(foo, 'programmer', 20);
// Selina programmer 20
bar.call(null, 'teacher', 25);
// 浏览器环境: Chirs teacher 25; node 环境: undefined teacher 25

apply:

apply的实现和call很类似，但是需要注意他们的参数是不一样的，apply的第二个参数是数组或类数组.

Function.prototype.apply = function (context, rest) {
    if (!context) {
        //context为null或者是undefined时,设置默认值
        context = typeof window === 'undefined' ? global : window;
    }
    context.fn = this;
    let result;
    if(rest === undefined || rest === null) {
        //undefined 或者 是 null 不是 Iterator 对象，不能被 ...
        result = context.fn(rest);
    }else if(typeof rest === 'object') {
        result = context.fn(...rest);
    }
    delete context.fn;
    return result;
}
var foo = {
    name: 'Selina'
}
var name = 'Chirs';
function bar(job, age) {
    console.log(this.name);
    console.log(job, age);
}
bar.apply(foo, ['programmer', 20]);
// Selina programmer 20
bar.apply(null, ['teacher', 25]);
// 浏览器环境: Chirs programmer 20; node 环境: undefined teacher 25

bind

bind 和 call/apply 有一个很重要的区别，一个函数被 call/apply 的时候，会直接调用，但是 bind 会创建一个新函数。当这个新函数被调用时，bind() 的第一个参数将作为它运行时的 this，之后的一序列参数将会在传递的实参前传入作为它的参数。

Function.prototype.my_bind = function(context) {
    if(typeof this !== "function"){
        throw new TypeError("not a function");
    }
    let self = this;
    let args = [...arguments].slice(1);
    function Fn() {};
    Fn.prototype = this.prototype;
    let bound = function() {
        let res = [...args, ...arguments]; //bind传递的参数和函数调用时传递的参数拼接
        context = this instanceof Fn ? this : context || this;
        return self.apply(context, res);
    }
    //原型链
    bound.prototype = new Fn();
    return bound;
}

var name = 'Jack';
function person(age, job, gender){
    console.log(this.name , age, job, gender);
}
var Yve = {name : 'Yvette'};
let result = person.my_bind(Yve, 22, 'enginner')('female');    

16. new的原理是什么？通过new的方式创建对象和通过字面量创建有什么区别？

new:

1. 创建一个新对象。
2. 这个新对象会被执行[[原型]]连接。
3. 将构造函数的作用域赋值给新对象，即this指向这个新对象.
4. 如果函数没有返回其他对象，那么new表达式中的函数调用会自动返回这个新对象。

function new(func) {
    lat target = {};
    target.__proto__ = func.prototype;
    let res = func.call(target);
    if (typeof(res) == "object" || typeof(res) == "function") {
        return res;
    }
    return target;
}

字面量创建对象，不会调用 Object构造函数, 简洁且性能更好;

new Object() 方式创建对象本质上是方法调用，涉及到在proto链中遍历该方法，当找到该方法后，又会生产方法调用必须的 堆栈信息，方法调用结束后，还要释放该堆栈，性能不如字面量的方式。

通过对象字面量定义对象时，不会调用Object构造函数。

17. 谈谈你对原型的理解？

在 JavaScript 中，每当定义一个对象（函数也是对象）时候，对象中都会包含一些预定义的属性。其中每个函数对象都有一个prototype 属性，这个属性指向函数的原型对象。使用原型对象的好处是所有对象实例共享它所包含的属性和方法。

18. 什么是原型链？【原型链解决的是什么问题？】

原型链解决的主要是继承问题。

每个对象拥有一个原型对象，通过 proto (读音: dunder proto) 指针指向其原型对象，并从中继承方法和属性，同时原型对象也可能拥有原型，这样一层一层，最终指向 null(Object.proptotype.__proto__ 指向的是null)。这种关系被称为原型链 (prototype chain)，通过原型链一个对象可以拥有定义在其他对象中的属性和方法。

构造函数 Parent、Parent.prototype 和 实例 p 的关系如下:(p.__proto__ === Parent.prototype)

19. prototype 和 __proto__ 区别是什么？

prototype是构造函数的属性。

__proto__ 是每个实例都有的属性，可以访问 [[prototype]] 属性。

实例的__proto__ 与其构造函数的prototype指向的是同一个对象。

function Student(name) {
    this.name = name;
}
Student.prototype.setAge = function(){
    this.age=20;
}
let Jack = new Student('jack');
console.log(Jack.__proto__);
//console.log(Object.getPrototypeOf(Jack));;
console.log(Student.prototype);
console.log(Jack.__proto__ === Student.prototype);//true

20. 使用ES5实现一个继承？

组合继承(最常用的继承方式)

function SuperType() {
    this.name = name;
    this.colors = ['red', 'blue', 'green'];
}
SuperType.prototype.sayName = function() {
    console.log(this.name);
}

function SubType(name, age) {
    SuperType.call(this, name);
    this.age = age;
}
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;

SubType.prototype.sayAge = function() {
    console.log(this.age);
}

其它继承方式实现，可以参考《JavaScript高级程序设计》

21. 什么是深拷贝？深拷贝和浅拷贝有什么区别？

浅拷贝是指只复制第一层对象，但是当对象的属性是引用类型时，实质复制的是其引用，当引用指向的值改变时也会跟着变化。

深拷贝复制变量值，对于非基本类型的变量，则递归至基本类型变量后，再复制。深拷贝后的对象与原来的对象是完全隔离的，互不影响，对一个对象的修改并不会影响另一个对象。

实现一个深拷贝:

function deepClone(obj) { //递归拷贝
    if(obj === null) return null; //null 的情况
    if(obj instanceof RegExp) return new RegExp(obj);
    if(obj instanceof Date) return new Date(obj);
    if(typeof obj !== 'object') {
        //如果不是复杂数据类型，直接返回
        return obj;
    }
    /**
     * 如果obj是数组，那么 obj.constructor 是 [Function: Array]
     * 如果obj是对象，那么 obj.constructor 是 [Function: Object]
     */
    let t = new obj.constructor();
    for(let key in obj) {
        //如果 obj[key] 是复杂数据类型，递归
        t[key] = deepClone(obj[key]);
    }
    return t;
}

看不下去了？别人的送分题会成为你的送命题

22. 防抖和节流的区别是什么？防抖和节流的实现。

防抖和节流的作用都是防止函数多次调用。区别在于，假设一个用户一直触发这个函数，且每次触发函数的间隔小于设置的时间，防抖的情况下只会调用一次，而节流的情况会每隔一定时间调用一次函数。

防抖(debounce): n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间

function debounce(func, wait, immediate=true) {
    let timeout, context, args;
        // 延迟执行函数
        const later = () => setTimeout(() => {
            // 延迟函数执行完毕，清空定时器
            timeout = null
            // 延迟执行的情况下，函数会在延迟函数中执行
            // 使用到之前缓存的参数和上下文
            if (!immediate) {
                func.apply(context, args);
                context = args = null;
            }
        }, wait);
        let debounced = function (...params) {
            if (!timeout) {
                timeout = later();
                if (immediate) {
                    //立即执行
                    func.apply(this, params);
                } else {
                    //闭包
                    context = this;
                    args = params;
                }
            } else {
                clearTimeout(timeout);
                timeout = later();
            }
        }
    debounced.cancel = function () {
        clearTimeout(timeout);
        timeout = null;
    };
    return debounced;
};

防抖的应用场景:

• 每次 resize/scroll 触发统计事件
• 文本输入的验证（连续输入文字后发送 AJAX 请求进行验证，验证一次就好）

节流(throttle): 高频事件在规定时间内只会执行一次，执行一次后，只有大于设定的执行周期后才会执行第二次。

//underscore.js
function throttle(func, wait, options) {
    var timeout, context, args, result;
    var previous = 0;
    if (!options) options = {};

    var later = function () {
        previous = options.leading === false ? 0 : Date.now() || new Date().getTime();
        timeout = null;
        result = func.apply(context, args);
        if (!timeout) context = args = null;
    };

    var throttled = function () {
        var now = Date.now() || new Date().getTime();
        if (!previous && options.leading === false) previous = now;
        var remaining = wait - (now - previous);
        context = this;
        args = arguments;
        if (remaining <= 0 || remaining > wait) {
            if (timeout) {
                clearTimeout(timeout);
                timeout = null;
            }
            previous = now;
            result = func.apply(context, args);
            if (!timeout) context = args = null;
        } else if (!timeout && options.trailing !== false) {
            // 判断是否设置了定时器和 trailing
            timeout = setTimeout(later, remaining);
        }
        return result;
    };

    throttled.cancel = function () {
        clearTimeout(timeout);
        previous = 0;
        timeout = context = args = null;
    };

    return throttled;
};

函数节流的应用场景有:

• DOM 元素的拖拽功能实现（mousemove）
• 射击游戏的 mousedown/keydown 事件（单位时间只能发射一颗子弹）
• 计算鼠标移动的距离（mousemove）
• Canvas 模拟画板功能（mousemove）
• 搜索联想（keyup）
• 监听滚动事件判断是否到页面底部自动加载更多：给 scroll 加了 debounce 后，只有用户停止滚动后，才会判断是否到了页面底部；如果是 throttle 的话，只要页面滚动就会间隔一段时间判断一次

23. 取数组的最大值（ES5、ES6）

// ES5 的写法
Math.max.apply(null, [14, 3, 77, 30]);

// ES6 的写法
Math.max(...[14, 3, 77, 30]);

// reduce
[14,3,77,30].reduce((accumulator, currentValue)=>{
    return accumulator = accumulator > currentValue ? accumulator : currentValue
});

24. ES6新的特性有哪些？

1. 新增了块级作用域(let,const)
2. 提供了定义类的语法糖(class)
3. 新增了一种基本数据类型(Symbol)
4. 新增了变量的解构赋值
5. 函数参数允许设置默认值，引入了rest参数，新增了箭头函数
6. 数组新增了一些API，如 isArray / from / of 方法;数组实例新增了 entries()，keys() 和 values() 等方法
7. 对象和数组新增了扩展运算符
8. ES6 新增了模块化(import/export)
9. ES6 新增了 Set 和 Map 数据结构
10. ES6 原生提供 Proxy 构造函数，用来生成 Proxy 实例
11. ES6 新增了生成器(Generator)和遍历器(Iterator)

25. setTimeout倒计时为什么会出现误差？

setTimeout() 只是将事件插入了“任务队列”，必须等当前代码（执行栈）执行完，主线程才会去执行它指定的回调函数。要是当前代码消耗时间很长，也有可能要等很久，所以并没办法保证回调函数一定会在 setTimeout() 指定的时间执行。所以， setTimeout() 的第二个参数表示的是最少时间，并非是确切时间。

HTML5标准规定了 setTimeout() 的第二个参数的最小值不得小于4毫秒，如果低于这个值，则默认是4毫秒。在此之前。老版本的浏览器都将最短时间设为10毫秒。另外，对于那些DOM的变动（尤其是涉及页面重新渲染的部分），通常是间隔16毫秒执行。这时使用 requestAnimationFrame() 的效果要好于 setTimeout();

26. 为什么 0.1 + 0.2 != 0.3 ?

0.1 + 0.2 != 0.3 是因为在进制转换和进阶运算的过程中出现精度损失。

下面是详细解释:

JavaScript使用 Number 类型表示数字(整数和浮点数)，使用64位表示一个数字。

图片说明:

• 第0位：符号位，0表示正数，1表示负数(s)
• 第1位到第11位：储存指数部分（e）
• 第12位到第63位：储存小数部分（即有效数字）f

计算机无法直接对十进制的数字进行运算, 需要先对照 IEEE 754 规范转换成二进制，然后对阶运算。

1.进制转换

0.1和0.2转换成二进制后会无限循环

0.1 -> 0.0001100110011001...(无限循环)
0.2 -> 0.0011001100110011...(无限循环)

但是由于IEEE 754尾数位数限制，需要将后面多余的位截掉，这样在进制之间的转换中精度已经损失。

2.对阶运算

由于指数位数不相同，运算时需要对阶运算 这部分也可能产生精度损失。

按照上面两步运算（包括两步的精度损失），最后的结果是

0.0100110011001100110011001100110011001100110011001100

结果转换成十进制之后就是 0.30000000000000004。

27. promise 有几种状态, Promise 有什么优缺点 ?

promise有三种状态: fulfilled, rejected, pending.

Promise 的优点:

1. 一旦状态改变，就不会再变，任何时候都可以得到这个结果
2. 可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数

Promise 的缺点:

1. 无法取消 Promise
2. 当处于pending状态时，无法得知目前进展到哪一个阶段

28. Promise构造函数是同步还是异步执行，then中的方法呢 ?promise如何实现then处理 ?

Promise的构造函数是同步执行的。then中的方法是异步执行的。

promise的then实现，详见: Promise源码实现

29. Promise和setTimeout的区别 ?

Promise 是微任务，setTimeout 是宏任务，同一个事件循环中，promise总是先于 setTimeout 执行。

30. 如何实现 Promise.all ?

要实现 Promise.all,首先我们需要知道 Promise.all 的功能：

1. 如果传入的参数是一个空的可迭代对象，那么此promise对象回调完成(resolve),只有此情况，是同步执行的，其它都是异步返回的。
2. 如果传入的参数不包含任何 promise，则返回一个异步完成.

promises 中所有的promise都“完成”时或参数中不包含 promise 时回调完成。

1. 如果参数中有一个promise失败，那么Promise.all返回的promise对象失败
2. 在任何情况下，Promise.all 返回的 promise 的完成状态的结果都是一个数组

Promise.all = function (promises) {
    return new Promise((resolve, reject) => {
        let index = 0;
        let result = [];
        if (promises.length === 0) {
            resolve(result);
        } else {
            setTimeout(() => {
                function processValue(i, data) {
                    result[i] = data;
                    if (++index === promises.length) {
                        resolve(result);
                    }
                }
                for (let i = 0; i < promises.length; i++) {
                    //promises[i] 可能是普通值
                    Promise.resolve(promises[i]).then((data) => {
                        processValue(i, data);
                    }, (err) => {
                        reject(err);
                        return;
                    });
                }
            })
        }
    });
}

如果想了解更多Promise的源码实现，可以参考我的另一篇文章：Promise的源码实现（完美符合Promise/A+规范）

31.如何实现 Promise.finally ?

不管成功还是失败，都会走到finally中,并且finally之后，还可以继续then。并且会将值原封不动的传递给后面的then.

Promise.prototype.finally = function (callback) {
    return this.then((value) => {
        return Promise.resolve(callback()).then(() => {
            return value;
        });
    }, (err) => {
        return Promise.resolve(callback()).then(() => {
            throw err;
        });
    });
}

32. 什么是函数柯里化？实现 sum(1)(2)(3) 返回结果是1,2,3之和

函数柯里化是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。

function sum(a) {
    return function(b) {
        return function(c) {
            return a+b+c;
        }
    }
}
console.log(sum(1)(2)(3)); // 6

引申：实现一个curry函数，将普通函数进行柯里化:

function curry(fn, args = []) {
    return function(){
        let rest = [...args, ...arguments];
        if (rest.length < fn.length) {
            return curry.call(this,fn,rest);
        }else{
            return fn.apply(this,rest);
        }
    }
}
//test
function sum(a,b,c) {
    return a+b+c;
}
let sumFn = curry(sum);
console.log(sumFn(1)(2)(3)); //6
console.log(sumFn(1)(2, 3)); //6

如果您在面试中遇到了更多的原生JS问题，或者有一些本文未涉及到且有一定难度的JS知识，请给我留言。您的问题将会出现在后续文章中~

本文的写成耗费了非常多的时间，在这个过程中，我也学习到了很多知识，谢谢各位小伙伴愿意花费宝贵的时间阅读本文，如果本文给了您一点帮助或者是启发，请不要吝啬你的赞和Star，您的肯定是我前进的最大动力。https://github.com/YvetteLau/...

后续写作计划

1.《寒冬求职季之你必须要懂的原生JS》(中)(下)

2.《寒冬求职季之你必须要知道的CSS》

3.《寒冬求职季之你必须要懂的前端安全》

4.《寒冬求职季之你必须要懂的一些浏览器知识》

5.《寒冬求职季之你必须要知道的性能优化》

针对React技术栈:

1.《寒冬求职季之你必须要懂的React》系列

2.《寒冬求职季之你必须要懂的ReactNative》系列

参考文章:

1. https://www.ibm.com/developer...
2. https://juejin.im/post/5c7736...
3. 选用了面试之道上的部分面试题
4. 选用了木易杨说文中提及的部分面试题: https://juejin.im/post/5bc92e...
5. 特别说明: 0.1 + 0.2 !== 0.3 此题答案大量使用了此篇文章的图文: https://juejin.im/post/5b90e0...
6. 选用了朋友面试大厂时遇到的一些面试题
7. 《你不知道的JavaSctipt》
8. 《JavaScript高级程序设计》
9. https://github.com/hanzichi/u...

推荐关注本人公众号：

互联网寒冬之际，各大公司都缩减了HC，甚至是采取了“裁员”措施，在这样的大环境之下，想要获得一份更好的工作，必然需要付出更多的努力。

一年前，也许你搞清楚闭包，this，原型链，就能获得认可。但是现在，很显然是不行了。本文梳理出了一些面试中有一定难度的高频原生JS问题，部分知识点可能你之前从未关注过，或者看到了，却没有仔细研究，但是它们却非常重要。本文将以真实的面试题的形式来呈现知识点，大家在阅读时，建议不要先看我的答案，而是自己先思考一番。尽管，本文所有的答案，都是我在翻阅各种资料，思考并验证之后，才给出的(绝非复制粘贴而来)。但因水平有限，本人的答案未必是最优的，如果您有更好的答案，欢迎给我留言。

本文篇幅较长，但是满满的都是干货！并且还埋伏了可爱的表情包，希望小伙伴们能够坚持读完。

衷心的祝愿大家都能找到心仪的工作。

1. 原始类型有哪几种？null 是对象吗？原始数据类型和复杂数据类型存储有什么区别？

• 原始类型有6种，分别是undefined,null,bool,string,number,symbol(ES6新增)。
• 虽然 typeof null 返回的值是 object,但是null不是对象，而是基本数据类型的一种。
• 原始数据类型存储在栈内存，存储的是值。
• 复杂数据类型存储在堆内存，存储的是地址。当我们把对象赋值给另外一个变量的时候，复制的是地址，指向同一块内存空间，当其中一个对象改变时，另一个对象也会变化。

2. typeof 是否正确判断类型? instanceof呢？ instanceof 的实现原理是什么？

首先 typeof 能够正确的判断基本数据类型，但是除了 null, typeof null输出的是对象。

但是对象来说，typeof 不能正确的判断其类型， typeof 一个函数可以输出 'function',而除此之外，输出的全是 object,这种情况下，我们无法准确的知道对象的类型。

instanceof可以准确的判断复杂数据类型，但是不能正确判断基本数据类型。(正确判断数据类型请戳：https://github.com/YvetteLau/...

instanceof 是通过原型链判断的，A instanceof B, 在A的原型链中层层查找，是否有原型等于B.prototype，如果一直找到A的原型链的顶端(null;即Object.prototype.__proto__),仍然不等于B.prototype，那么返回false，否则返回true.

instanceof的实现代码:

// L instanceof R
function instance_of(L, R) {//L 表示左表达式，R 表示右表达式
    var O = R.prototype;// 取 R 的显式原型
    L = L.__proto__;    // 取 L 的隐式原型
    while (true) { 
        if (L === null) //已经找到顶层
            return false;  
        if (O === L)   //当 O 严格等于 L 时，返回 true
            return true; 
        L = L.__proto__;  //继续向上一层原型链查找
    } 
}

3. for of , for in 和 forEach,map 的区别。

• for...of循环：具有 iterator 接口，就可以用for...of循环遍历它的成员(属性值)。for...of循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象、Generator 对象，以及字符串。for...of循环调用遍历器接口，数组的遍历器接口只返回具有数字索引的属性。对于普通的对象，for...of结构不能直接使用，会报错，必须部署了 Iterator 接口后才能使用。可以中断循环。
• for...in循环：遍历对象自身的和继承的可枚举的属性, 不能直接获取属性值。可以中断循环。
• forEach: 只能遍历数组，不能中断，没有返回值(或认为返回值是undefined)。
• map: 只能遍历数组，不能中断，返回值是修改后的数组。

PS: Object.keys()：返回给定对象所有可枚举属性的字符串数组。

关于forEach是否会改变原数组的问题，有些小伙伴提出了异议，为此我写了代码测试了下(注意数组项是复杂数据类型的情况)。
除了forEach之外，map等API，也有同样的问题。

let arry = [1, 2, 3, 4];

arry.forEach((item) => {
    item *= 10;
});
console.log(arry); //[1, 2, 3, 4]

arry.forEach((item) => {
    arry[1] = 10; //直接操作数组
});
console.log(arry); //[ 1, 10, 3, 4 ]

let arry2 = [
    { name: "Yve" },
    { age: 20 }
];
arry2.forEach((item) => {
    item.name = 10;
});
console.log(arry2);//[ { name: 10 }, { age: 20, name: 10 } ]

如还不了解 iterator 接口或 for...of, 请先阅读ES6文档: Iterator 和 for...of 循环

更多细节请戳: https://github.com/YvetteLau/...

4. 如何判断一个变量是不是数组？

• 使用 Array.isArray 判断，如果返回 true, 说明是数组
• 使用 instanceof Array 判断，如果返回true, 说明是数组
• 使用 Object.prototype.toString.call 判断，如果值是 [object Array], 说明是数组
• 通过 constructor 来判断，如果是数组，那么 arr.constructor === Array. (不准确，因为我们可以指定 obj.constructor = Array)

function fn() {
    console.log(Array.isArray(arguments));   //false; 因为arguments是类数组，但不是数组
    console.log(Array.isArray([1,2,3,4]));   //true
    console.log(arguments instanceof Array); //fasle
    console.log([1,2,3,4] instanceof Array); //true
    console.log(Object.prototype.toString.call(arguments)); //[object Arguments]
    console.log(Object.prototype.toString.call([1,2,3,4])); //[object Array]
    console.log(arguments.constructor === Array); //false
    arguments.constructor = Array;
    console.log(arguments.constructor === Array); //true
    console.log(Array.isArray(arguments));        //false
}
fn(1,2,3,4);

5. 类数组和数组的区别是什么？

类数组:

1）拥有length属性，其它属性（索引）为非负整数（对象中的索引会被当做字符串来处理）;

2）不具有数组所具有的方法；

类数组是一个普通对象，而真实的数组是Array类型。

常见的类数组有: 函数的参数 arugments, DOM 对象列表(比如通过 document.querySelectorAll 得到的列表), jQuery 对象 (比如 $("div")).

类数组可以转换为数组:

//第一种方法
Array.prototype.slice.call(arrayLike, start);
//第二种方法
[...arrayLike];
//第三种方法:
Array.from(arrayLike);

PS: 任何定义了遍历器（Iterator）接口的对象，都可以用扩展运算符转为真正的数组。

Array.from方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象。

6. == 和 === 有什么区别？

=== 不需要进行类型转换，只有类型相同并且值相等时，才返回 true.

== 如果两者类型不同，首先需要进行类型转换。具体流程如下:

1. 首先判断两者类型是否相同，如果相等，判断值是否相等.
2. 如果类型不同，进行类型转换
3. 判断比较的是否是 null 或者是 undefined, 如果是, 返回 true .
4. 判断两者类型是否为 string 和 number, 如果是, 将字符串转换成 number
5. 判断其中一方是否为 boolean, 如果是, 将 boolean 转为 number 再进行判断
6. 判断其中一方是否为 object 且另一方为 string、number 或者 symbol , 如果是, 将 object 转为原始类型再进行判断

let person1 = {
    age: 25
}
let person2 = person1;
person2.gae = 20;
console.log(person1 === person2); //true,注意复杂数据类型，比较的是引用地址

思考: [] == ![]

我们来分析一下: [] == ![] 是true还是false？

1. 首先，我们需要知道 ! 优先级是高于 == (更多运算符优先级可查看: 运算符优先级)
2. ![] 引用类型转换成布尔值都是true,因此![]的是false
3. 根据上面的比较步骤中的第五条，其中一方是 boolean，将 boolean 转为 number 再进行判断，false转换成 number，对应的值是 0.
4. 根据上面比较步骤中的第六条，有一方是 number，那么将object也转换成Number,空数组转换成数字，对应的值是0.(空数组转换成数字，对应的值是0，如果数组中只有一个数字，那么转成number就是这个数字，其它情况，均为NaN)
5. 0 == 0; 为true

7. ES6中的class和ES5的类有什么区别？

1. ES6 class 内部所有定义的方法都是不可枚举的;
2. ES6 class 必须使用 new 调用;
3. ES6 class 不存在变量提升;
4. ES6 class 默认即是严格模式;
5. ES6 class 子类必须在父类的构造函数中调用super()，这样才有this对象;ES5中类继承的关系是相反的，先有子类的this，然后用父类的方法应用在this上。

8. 数组的哪些API会改变原数组？

修改原数组的API有:

splice/reverse/fill/copyWithin/sort/push/pop/unshift/shift

不修改原数组的API有:

slice/map/forEach/every/filter/reduce/entries/find

注: 数组的每一项是简单数据类型，且未直接操作数组的情况下。

9. let、const 以及 var 的区别是什么？

• let 和 const 定义的变量不会出现变量提升，而 var 定义的变量会提升。
• let 和 const 是JS中的块级作用域
• let 和 const 不允许重复声明(会抛出错误)
• let 和 const 定义的变量在定义语句之前，如果使用会抛出错误(形成了暂时性死区)，而 var 不会。
• const 声明一个只读的常量。一旦声明，常量的值就不能改变(如果声明是一个对象，那么不能改变的是对象的引用地址)

10. 在JS中什么是变量提升？什么是暂时性死区？

变量提升就是变量在声明之前就可以使用，值为undefined。

在代码块内，使用 let/const 命令声明变量之前，该变量都是不可用的(会抛出错误)。这在语法上，称为“暂时性死区”。暂时性死区也意味着 typeof 不再是一个百分百安全的操作。

typeof x; // ReferenceError(暂时性死区，抛错)
let x;

typeof y; // 值是undefined,不会报错

暂时性死区的本质就是，只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。

11. 如何正确的判断this? 箭头函数的this是什么？

this的绑定规则有四种：默认绑定，隐式绑定，显式绑定，new绑定.

1. 函数是否在 new 中调用(new绑定)，如果是，那么 this 绑定的是新创建的对象。
2. 函数是否通过 call,apply 调用，或者使用了 bind (即硬绑定)，如果是，那么this绑定的就是指定的对象。
3. 函数是否在某个上下文对象中调用(隐式绑定)，如果是的话，this 绑定的是那个上下文对象。一般是 obj.foo()
4. 如果以上都不是，那么使用默认绑定。如果在严格模式下，则绑定到 undefined，否则绑定到全局对象。
5. 如果把 null 或者 undefined 作为 this 的绑定对象传入 call、apply 或者 bind, 这些值在调用时会被忽略，实际应用的是默认绑定规则。
6. 箭头函数没有自己的 this, 它的this继承于上一层代码块的this。

测试下是否已经成功Get了此知识点(浏览器执行环境):

var number = 5;
var obj = {
    number: 3,
    fn1: (function () {
        var number;
        this.number *= 2;
        number = number * 2;
        number = 3;
        return function () {
            var num = this.number;
            this.number *= 2;
            console.log(num);
            number *= 3;
            console.log(number);
        }
    })()
}
var fn1 = obj.fn1;
fn1.call(null);
obj.fn1();
console.log(window.number);

如果this的知识点，您还不太懂，请戳: 嗨，你真的懂this吗？

12. 词法作用域和this的区别。

• 词法作用域是由你在写代码时将变量和块作用域写在哪里来决定的
• this 是在调用时被绑定的，this 指向什么，完全取决于函数的调用位置(关于this的指向问题，本文已经有说明)

13. 谈谈你对JS执行上下文栈和作用域链的理解。

执行上下文就是当前 JavaScript 代码被解析和执行时所在环境, JS执行上下文栈可以认为是一个存储函数调用的栈结构，遵循先进后出的原则。

• JavaScript执行在单线程上，所有的代码都是排队执行。
• 一开始浏览器执行全局的代码时，首先创建全局的执行上下文，压入执行栈的顶部。
• 每当进入一个函数的执行就会创建函数的执行上下文，并且把它压入执行栈的顶部。当前函数执行-完成后，当前函数的执行上下文出栈，并等待垃圾回收。
• 浏览器的JS执行引擎总是访问栈顶的执行上下文。
• 全局上下文只有唯一的一个，它在浏览器关闭时出栈。

作用域链: 无论是 LHS 还是 RHS 查询，都会在当前的作用域开始查找，如果没有找到，就会向上级作用域继续查找目标标识符，每次上升一个作用域，一直到全局作用域为止。

题难不难？不难！继续挑战一下难！知道难，就更要继续了！

14. 什么是闭包？闭包的作用是什么？闭包有哪些使用场景？

闭包是指有权访问另一个函数作用域中的变量的函数，创建闭包最常用的方式就是在一个函数内部创建另一个函数。

闭包的作用有:

1. 封装私有变量
2. 模仿块级作用域(ES5中没有块级作用域)
3. 实现JS的模块

15. call、apply有什么区别？call,aplly和bind的内部是如何实现的？

call 和 apply 的功能相同，区别在于传参的方式不一样:

• fn.call(obj, arg1, arg2, ...),调用一个函数, 具有一个指定的this值和分别地提供的参数(参数的列表)。
• fn.apply(obj, [argsArray]),调用一个函数，具有一个指定的this值，以及作为一个数组（或类数组对象）提供的参数。

call核心:

• 将函数设为传入参数的属性
• 指定this到函数并传入给定参数执行函数
• 如果不传入参数或者参数为null，默认指向为 window / global
• 删除参数上的函数

Function.prototype.call = function (context) {
    /** 如果第一个参数传入的是 null 或者是 undefined, 那么指向this指向 window/global */
    /** 如果第一个参数传入的不是null或者是undefined, 那么必须是一个对象 */
    if (!context) {
        //context为null或者是undefined
        context = typeof window === 'undefined' ? global : window;
    }
    context.fn = this; //this指向的是当前的函数(Function的实例)
    let args = [...arguments].slice(1);//获取除了this指向对象以外的参数, 空数组slice后返回的仍然是空数组
    let result = context.fn(...args); //隐式绑定,当前函数的this指向了context.
    delete context.fn;
    return result;
}

//测试代码
var foo = {
    name: 'Selina'
}
var name = 'Chirs';
function bar(job, age) {
    console.log(this.name);
    console.log(job, age);
}
bar.call(foo, 'programmer', 20);
// Selina programmer 20
bar.call(null, 'teacher', 25);
// 浏览器环境: Chirs teacher 25; node 环境: undefined teacher 25

apply:

apply的实现和call很类似，但是需要注意他们的参数是不一样的，apply的第二个参数是数组或类数组.

Function.prototype.apply = function (context, rest) {
    if (!context) {
        //context为null或者是undefined时,设置默认值
        context = typeof window === 'undefined' ? global : window;
    }
    context.fn = this;
    let result;
    if(rest === undefined || rest === null) {
        //undefined 或者 是 null 不是 Iterator 对象，不能被 ...
        result = context.fn(rest);
    }else if(typeof rest === 'object') {
        result = context.fn(...rest);
    }
    delete context.fn;
    return result;
}
var foo = {
    name: 'Selina'
}
var name = 'Chirs';
function bar(job, age) {
    console.log(this.name);
    console.log(job, age);
}
bar.apply(foo, ['programmer', 20]);
// Selina programmer 20
bar.apply(null, ['teacher', 25]);
// 浏览器环境: Chirs programmer 20; node 环境: undefined teacher 25

bind

bind 和 call/apply 有一个很重要的区别，一个函数被 call/apply 的时候，会直接调用，但是 bind 会创建一个新函数。当这个新函数被调用时，bind() 的第一个参数将作为它运行时的 this，之后的一序列参数将会在传递的实参前传入作为它的参数。

Function.prototype.my_bind = function(context) {
    if(typeof this !== "function"){
        throw new TypeError("not a function");
    }
    let self = this;
    let args = [...arguments].slice(1);
    function Fn() {};
    Fn.prototype = this.prototype;
    let bound = function() {
        let res = [...args, ...arguments]; //bind传递的参数和函数调用时传递的参数拼接
        context = this instanceof Fn ? this : context || this;
        return self.apply(context, res);
    }
    //原型链
    bound.prototype = new Fn();
    return bound;
}

var name = 'Jack';
function person(age, job, gender){
    console.log(this.name , age, job, gender);
}
var Yve = {name : 'Yvette'};
let result = person.my_bind(Yve, 22, 'enginner')('female');    

16. new的原理是什么？通过new的方式创建对象和通过字面量创建有什么区别？

new:

1. 创建一个新对象。
2. 这个新对象会被执行[[原型]]连接。
3. 将构造函数的作用域赋值给新对象，即this指向这个新对象.
4. 如果函数没有返回其他对象，那么new表达式中的函数调用会自动返回这个新对象。

function new(func) {
    lat target = {};
    target.__proto__ = func.prototype;
    let res = func.call(target);
    if (typeof(res) == "object" || typeof(res) == "function") {
        return res;
    }
    return target;
}

字面量创建对象，不会调用 Object构造函数, 简洁且性能更好;

new Object() 方式创建对象本质上是方法调用，涉及到在proto链中遍历该方法，当找到该方法后，又会生产方法调用必须的 堆栈信息，方法调用结束后，还要释放该堆栈，性能不如字面量的方式。

通过对象字面量定义对象时，不会调用Object构造函数。

17. 谈谈你对原型的理解？

在 JavaScript 中，每当定义一个对象（函数也是对象）时候，对象中都会包含一些预定义的属性。其中每个函数对象都有一个prototype 属性，这个属性指向函数的原型对象。使用原型对象的好处是所有对象实例共享它所包含的属性和方法。

18. 什么是原型链？【原型链解决的是什么问题？】

原型链解决的主要是继承问题。

每个对象拥有一个原型对象，通过 proto (读音: dunder proto) 指针指向其原型对象，并从中继承方法和属性，同时原型对象也可能拥有原型，这样一层一层，最终指向 null(Object.proptotype.__proto__ 指向的是null)。这种关系被称为原型链 (prototype chain)，通过原型链一个对象可以拥有定义在其他对象中的属性和方法。

构造函数 Parent、Parent.prototype 和 实例 p 的关系如下:(p.__proto__ === Parent.prototype)

19. prototype 和 __proto__ 区别是什么？

prototype是构造函数的属性。

__proto__ 是每个实例都有的属性，可以访问 [[prototype]] 属性。

实例的__proto__ 与其构造函数的prototype指向的是同一个对象。

function Student(name) {
    this.name = name;
}
Student.prototype.setAge = function(){
    this.age=20;
}
let Jack = new Student('jack');
console.log(Jack.__proto__);
//console.log(Object.getPrototypeOf(Jack));;
console.log(Student.prototype);
console.log(Jack.__proto__ === Student.prototype);//true

20. 使用ES5实现一个继承？

组合继承(最常用的继承方式)

function SuperType() {
    this.name = name;
    this.colors = ['red', 'blue', 'green'];
}
SuperType.prototype.sayName = function() {
    console.log(this.name);
}

function SubType(name, age) {
    SuperType.call(this, name);
    this.age = age;
}
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;

SubType.prototype.sayAge = function() {
    console.log(this.age);
}

其它继承方式实现，可以参考《JavaScript高级程序设计》

21. 什么是深拷贝？深拷贝和浅拷贝有什么区别？

浅拷贝是指只复制第一层对象，但是当对象的属性是引用类型时，实质复制的是其引用，当引用指向的值改变时也会跟着变化。

深拷贝复制变量值，对于非基本类型的变量，则递归至基本类型变量后，再复制。深拷贝后的对象与原来的对象是完全隔离的，互不影响，对一个对象的修改并不会影响另一个对象。

实现一个深拷贝:

function deepClone(obj) { //递归拷贝
    if(obj === null) return null; //null 的情况
    if(obj instanceof RegExp) return new RegExp(obj);
    if(obj instanceof Date) return new Date(obj);
    if(typeof obj !== 'object') {
        //如果不是复杂数据类型，直接返回
        return obj;
    }
    /**
     * 如果obj是数组，那么 obj.constructor 是 [Function: Array]
     * 如果obj是对象，那么 obj.constructor 是 [Function: Object]
     */
    let t = new obj.constructor();
    for(let key in obj) {
        //如果 obj[key] 是复杂数据类型，递归
        t[key] = deepClone(obj[key]);
    }
    return t;
}

看不下去了？别人的送分题会成为你的送命题

22. 防抖和节流的区别是什么？防抖和节流的实现。

防抖和节流的作用都是防止函数多次调用。区别在于，假设一个用户一直触发这个函数，且每次触发函数的间隔小于设置的时间，防抖的情况下只会调用一次，而节流的情况会每隔一定时间调用一次函数。

防抖(debounce): n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间

function debounce(func, wait, immediate=true) {
    let timeout, context, args;
        // 延迟执行函数
        const later = () => setTimeout(() => {
            // 延迟函数执行完毕，清空定时器
            timeout = null
            // 延迟执行的情况下，函数会在延迟函数中执行
            // 使用到之前缓存的参数和上下文
            if (!immediate) {
                func.apply(context, args);
                context = args = null;
            }
        }, wait);
        let debounced = function (...params) {
            if (!timeout) {
                timeout = later();
                if (immediate) {
                    //立即执行
                    func.apply(this, params);
                } else {
                    //闭包
                    context = this;
                    args = params;
                }
            } else {
                clearTimeout(timeout);
                timeout = later();
            }
        }
    debounced.cancel = function () {
        clearTimeout(timeout);
        timeout = null;
    };
    return debounced;
};

防抖的应用场景:

• 每次 resize/scroll 触发统计事件
• 文本输入的验证（连续输入文字后发送 AJAX 请求进行验证，验证一次就好）

节流(throttle): 高频事件在规定时间内只会执行一次，执行一次后，只有大于设定的执行周期后才会执行第二次。

//underscore.js
function throttle(func, wait, options) {
    var timeout, context, args, result;
    var previous = 0;
    if (!options) options = {};

    var later = function () {
        previous = options.leading === false ? 0 : Date.now() || new Date().getTime();
        timeout = null;
        result = func.apply(context, args);
        if (!timeout) context = args = null;
    };

    var throttled = function () {
        var now = Date.now() || new Date().getTime();
        if (!previous && options.leading === false) previous = now;
        var remaining = wait - (now - previous);
        context = this;
        args = arguments;
        if (remaining <= 0 || remaining > wait) {
            if (timeout) {
                clearTimeout(timeout);
                timeout = null;
            }
            previous = now;
            result = func.apply(context, args);
            if (!timeout) context = args = null;
        } else if (!timeout && options.trailing !== false) {
            // 判断是否设置了定时器和 trailing
            timeout = setTimeout(later, remaining);
        }
        return result;
    };

    throttled.cancel = function () {
        clearTimeout(timeout);
        previous = 0;
        timeout = context = args = null;
    };

    return throttled;
};

函数节流的应用场景有:

• DOM 元素的拖拽功能实现（mousemove）
• 射击游戏的 mousedown/keydown 事件（单位时间只能发射一颗子弹）
• 计算鼠标移动的距离（mousemove）
• Canvas 模拟画板功能（mousemove）
• 搜索联想（keyup）
• 监听滚动事件判断是否到页面底部自动加载更多：给 scroll 加了 debounce 后，只有用户停止滚动后，才会判断是否到了页面底部；如果是 throttle 的话，只要页面滚动就会间隔一段时间判断一次

23. 取数组的最大值（ES5、ES6）

// ES5 的写法
Math.max.apply(null, [14, 3, 77, 30]);

// ES6 的写法
Math.max(...[14, 3, 77, 30]);

// reduce
[14,3,77,30].reduce((accumulator, currentValue)=>{
    return accumulator = accumulator > currentValue ? accumulator : currentValue
});

24. ES6新的特性有哪些？

1. 新增了块级作用域(let,const)
2. 提供了定义类的语法糖(class)
3. 新增了一种基本数据类型(Symbol)
4. 新增了变量的解构赋值
5. 函数参数允许设置默认值，引入了rest参数，新增了箭头函数
6. 数组新增了一些API，如 isArray / from / of 方法;数组实例新增了 entries()，keys() 和 values() 等方法
7. 对象和数组新增了扩展运算符
8. ES6 新增了模块化(import/export)
9. ES6 新增了 Set 和 Map 数据结构
10. ES6 原生提供 Proxy 构造函数，用来生成 Proxy 实例
11. ES6 新增了生成器(Generator)和遍历器(Iterator)

25. setTimeout倒计时为什么会出现误差？

setTimeout() 只是将事件插入了“任务队列”，必须等当前代码（执行栈）执行完，主线程才会去执行它指定的回调函数。要是当前代码消耗时间很长，也有可能要等很久，所以并没办法保证回调函数一定会在 setTimeout() 指定的时间执行。所以， setTimeout() 的第二个参数表示的是最少时间，并非是确切时间。

HTML5标准规定了 setTimeout() 的第二个参数的最小值不得小于4毫秒，如果低于这个值，则默认是4毫秒。在此之前。老版本的浏览器都将最短时间设为10毫秒。另外，对于那些DOM的变动（尤其是涉及页面重新渲染的部分），通常是间隔16毫秒执行。这时使用 requestAnimationFrame() 的效果要好于 setTimeout();

26. 为什么 0.1 + 0.2 != 0.3 ?

0.1 + 0.2 != 0.3 是因为在进制转换和进阶运算的过程中出现精度损失。

下面是详细解释:

JavaScript使用 Number 类型表示数字(整数和浮点数)，使用64位表示一个数字。

图片说明:

• 第0位：符号位，0表示正数，1表示负数(s)
• 第1位到第11位：储存指数部分（e）
• 第12位到第63位：储存小数部分（即有效数字）f

计算机无法直接对十进制的数字进行运算, 需要先对照 IEEE 754 规范转换成二进制，然后对阶运算。

1.进制转换

0.1和0.2转换成二进制后会无限循环

0.1 -> 0.0001100110011001...(无限循环)
0.2 -> 0.0011001100110011...(无限循环)

但是由于IEEE 754尾数位数限制，需要将后面多余的位截掉，这样在进制之间的转换中精度已经损失。

2.对阶运算

由于指数位数不相同，运算时需要对阶运算 这部分也可能产生精度损失。

按照上面两步运算（包括两步的精度损失），最后的结果是

0.0100110011001100110011001100110011001100110011001100

结果转换成十进制之后就是 0.30000000000000004。

27. promise 有几种状态, Promise 有什么优缺点 ?

promise有三种状态: fulfilled, rejected, pending.

Promise 的优点:

1. 一旦状态改变，就不会再变，任何时候都可以得到这个结果
2. 可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数

Promise 的缺点:

1. 无法取消 Promise
2. 当处于pending状态时，无法得知目前进展到哪一个阶段

28. Promise构造函数是同步还是异步执行，then中的方法呢 ?promise如何实现then处理 ?

Promise的构造函数是同步执行的。then中的方法是异步执行的。

promise的then实现，详见: Promise源码实现

29. Promise和setTimeout的区别 ?

Promise 是微任务，setTimeout 是宏任务，同一个事件循环中，promise总是先于 setTimeout 执行。

30. 如何实现 Promise.all ?

要实现 Promise.all,首先我们需要知道 Promise.all 的功能：

1. 如果传入的参数是一个空的可迭代对象，那么此promise对象回调完成(resolve),只有此情况，是同步执行的，其它都是异步返回的。
2. 如果传入的参数不包含任何 promise，则返回一个异步完成.

promises 中所有的promise都“完成”时或参数中不包含 promise 时回调完成。

1. 如果参数中有一个promise失败，那么Promise.all返回的promise对象失败
2. 在任何情况下，Promise.all 返回的 promise 的完成状态的结果都是一个数组

Promise.all = function (promises) {
    return new Promise((resolve, reject) => {
        let index = 0;
        let result = [];
        if (promises.length === 0) {
            resolve(result);
        } else {
            setTimeout(() => {
                function processValue(i, data) {
                    result[i] = data;
                    if (++index === promises.length) {
                        resolve(result);
                    }
                }
                for (let i = 0; i < promises.length; i++) {
                    //promises[i] 可能是普通值
                    Promise.resolve(promises[i]).then((data) => {
                        processValue(i, data);
                    }, (err) => {
                        reject(err);
                        return;
                    });
                }
            })
        }
    });
}

如果想了解更多Promise的源码实现，可以参考我的另一篇文章：Promise的源码实现（完美符合Promise/A+规范）

31.如何实现 Promise.finally ?

不管成功还是失败，都会走到finally中,并且finally之后，还可以继续then。并且会将值原封不动的传递给后面的then.

Promise.prototype.finally = function (callback) {
    return this.then((value) => {
        return Promise.resolve(callback()).then(() => {
            return value;
        });
    }, (err) => {
        return Promise.resolve(callback()).then(() => {
            throw err;
        });
    });
}

32. 什么是函数柯里化？实现 sum(1)(2)(3) 返回结果是1,2,3之和

函数柯里化是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。

function sum(a) {
    return function(b) {
        return function(c) {
            return a+b+c;
        }
    }
}
console.log(sum(1)(2)(3)); // 6

引申：实现一个curry函数，将普通函数进行柯里化:

function curry(fn, args = []) {
    return function(){
        let rest = [...args, ...arguments];
        if (rest.length < fn.length) {
            return curry.call(this,fn,rest);
        }else{
            return fn.apply(this,rest);
        }
    }
}
//test
function sum(a,b,c) {
    return a+b+c;
}
let sumFn = curry(sum);
console.log(sumFn(1)(2)(3)); //6
console.log(sumFn(1)(2, 3)); //6

如果您在面试中遇到了更多的原生JS问题，或者有一些本文未涉及到且有一定难度的JS知识，请给我留言。您的问题将会出现在后续文章中~

本文的写成耗费了非常多的时间，在这个过程中，我也学习到了很多知识，谢谢各位小伙伴愿意花费宝贵的时间阅读本文，如果本文给了您一点帮助或者是启发，请不要吝啬你的赞和Star，您的肯定是我前进的最大动力。https://github.com/YvetteLau/...

后续写作计划

1.《寒冬求职季之你必须要懂的原生JS》(中)(下)

2.《寒冬求职季之你必须要知道的CSS》

3.《寒冬求职季之你必须要懂的前端安全》

4.《寒冬求职季之你必须要懂的一些浏览器知识》

5.《寒冬求职季之你必须要知道的性能优化》

针对React技术栈:

1.《寒冬求职季之你必须要懂的React》系列

2.《寒冬求职季之你必须要懂的ReactNative》系列

参考文章:

1. https://www.ibm.com/developer...
2. https://juejin.im/post/5c7736...
3. 选用了面试之道上的部分面试题
4. 选用了木易杨说文中提及的部分面试题: https://juejin.im/post/5bc92e...
5. 特别说明: 0.1 + 0.2 !== 0.3 此题答案大量使用了此篇文章的图文: https://juejin.im/post/5b90e0...
6. 选用了朋友面试大厂时遇到的一些面试题
7. 《你不知道的JavaSctipt》
8. 《JavaScript高级程序设计》
9. https://github.com/hanzichi/u...

推荐关注本人公众号：

TL；DR

Logoly.Pro 是一个在线的 PornHub 风格 Logo 生成工具，可以帮助你快速生成类似 PornHub 风格的 Logo

目前项目已经上线：https://logoly.pro/
代码也已开源：https://github.com/bestony/lo...

欢迎各位前来试用 && 求 Star !

昨晚，我花了 5 个小时，在肝一个项目，如今，让他成功上线，我便向大家介绍一下他。

突发的灵感

我自己平时经常要做一些 Side Project ，在做 Side Project 的时候，就涉及到了要做 Logo ，但是作为一个没有设计感的程序员，在做 Logo 时总是会做出一些很丑的 Logo ，于是痛定思痛，想想有没有什么有用的工具可以帮助我生成好看的 Logo。对于我来说，也不需要太过复杂，能够满足我自己的要求就行。

那么这就要求这个 Logo 有一些特点

1. 设计简单：很多带吉祥物的 Logo 就不适合我了，因为要去准备吉祥物的图片。
2. 辨识度高：单纯的简单并没有太多的用处， Logo 需要让用户能够记住

经过一番筛选，PornHub 的 Logo 进入到我的视线。

设计产品

在开发之前，我先进行了产品方面的考虑，看看我需要做哪些功能，哪些不做，最终得到了这样一个清单：

要做的项目

1. 项目使用 Vue 开发，因为可以快速上线
2. 项目使用 Netlify 部署，这样就可以使用自己的域名，并使用 SSL，速度还要比 Github Pages 快一些。
3. 项目应当支持自定义文字，这个是最基础的功能需求，必须要做的。
4. 项目应当支持自定义颜色，毕竟可能有其他的方面，需要类似风格，但是不同的颜色的 Logo
5. 项目应当支持自定义文字大小，毕竟我导出的是 PNG，如果不能自定义大小，大家可能会很困扰。
6. 项目应当加入 Google Analytics，加入统计，就知道有多少人用过我的项目了，也是一种成就感。
7. 项目应当加入我的个人信息，用来给我自己推广，顺便刷一波脸。
8. 社会化分享，应当有个方便的分享方法，这样才能够更好的帮助项目在前期成长。

不做的项目

1. 自定义字体：原汁原味的 PH 风格，怎能瞎改字体呢？
2. 导出 JPG： 有了透明背景的 PNG，不透明的 JPG 的需求就没那么大了。

后续迭代实现的

1. 其他简单的 Logo：比如 Youtube.

设计布局

在完成了产品的功能，我又进行了布局的设计，这次我用的是 Adobe XD，最近很喜欢用这个工具来设计产品的界面，非常的方便。最终设计完成的版本如下：

设计完成后，就要开始准备开始编码了。

找库

一开始，我考虑使用一些 UI Framework ,不过，由于一开始没有引入 UI Framework， 快写完了才发现基本不需要组件库，干脆将错就错，这样用了。

在完成了基本的界面后，就是涉及到的一些库的使用了，这里要感谢前端生态圈的繁荣，我从 Picas 和 Carbon 的源码里找到了我想要用的库。

• dom-to-image: 将 Dom 元素转换成为图片，以备下载。
• file-save: 在 Vue 组件里调用系统的下载接口，下载图片

其他我用到的库还有

• v-tooltips: 用户提醒，之前用的 Vue-Tour,但是跳跃感太强了，所以弃用了。
• vue-analytics： Vue 下的 Google Analytics 工具，可以很方便的调用 GA 进行统计。

上线

在完成了开发后，将代码上传到 Github，准备部署。

在前面提到，我考虑用 Netlify 进行部署，这里非常方便，在 Netlify 上直接创建项目，选择你的项目，然后填入命令即可。

并配置一下域名，将自己的域名设置为主域名

稍等一会，就会自动为你的域名签注 Let's Encrypt 的证书。

最后

关于这个项目的故事，我已经说完了所有我能想到的了，接下来，就是你的提问时间了，欢迎你针对项目对我提问，无论是产品、设计、编码，都可以~

希望大家能够给这个项目一个 Star: https://github.com/bestony/lo...