总览

前端基础知识

基本数据类型以及 typeof 的结果

基本数据类型：

null，undefined，string，boolean，number，symbol，还有一种复杂的 object

typeof 的结果：

undefined，number，string，boolean，object，function，symbol

querySelectorAll 和 getElementByClassName 的区别

querySelectorAll 是没有性能问题的，因为它不是动态的

getElementByClassName 是有性能问题的，他会动态刷新

闭包

就是在函数的最后返回一个函数回去，返回的函数拥有访问原函数内部变量以及参数的能力，如果不手动设置为 null 的话，垃圾回收器是无法回收的。

他的价值在于可以用来生成模块模式，搞出一个只有返回的闭包本身才能访问到的私有变量和函数。

阻止冒泡和默认事件

冒泡：e.stopPropagation,IE 下位 cancelBubble=true，

默认事件，e.preventDefault(),e.returnValue=false,return false(用来取消对象属性注册的处理程序)

addEventListener 的第三个参数

只有在有父元素，并且有同样类型的处理事件时才有用，默认为 false，默认为 bubble，从内向外，设置为 true 后，就从外向内触发了。

类型检测

其实就是 typeof 嘛，最简单的类型检测

还有就是 instanceof,这个三目运算符是用来看是否在原型链上

但是对于多全局对象，内置的全局构造函数是不同的，所以 instanceof 会有问题，使用 Array.isArray 倒是可以，不过这东西 ie9 才支持，所以两种：

• Object.prototype.toString.call([]) == [object array]
• 先 typeof [].length == ‘number’然后[].propertyIsEnumable(‘length’)==fasle，因为 array 的 length 属性是不可枚举的

继承

到现在写个继承居然自己写错了！！！唉..

function A() {}
function B() {}
A.prototype = new B();

这是最简单的

最简单的原型继承就是上面的，但是这样父原型的实例属性变成原型属性，且无法传参数

所以可以借用构造函数继承，就是在子类中调用父类型的构造函数，但是没有原型关系，父类的原型方法子类继承不到

所以混合着用的一般比较比较多

function Super() {}
function Sub() {
  Super.call(this);
}
Sub.prototype = new Super();

Polyfill 温习一下

就是感觉涨了见识吧，比如用 x-qsa，expresssion 的 css 属性来抓取元素模仿 querySelectorAll 方法，还有 defineProperty 这个东西实际上调用了defineGetter等，还有 bind 方法，一般直接写个 this.apply(obj,[].slice.call(arguments)),为了让 bind 方法支持 new，还在里面写了一个原型继承。

shrinkwrap 怎么管理项目依赖的

因为很有可能第三方的没有按照规范来定义版本号，npm shinkwrap 可以根据当前的 package.json 中稳定的版本进行构建一个文件，写死了版本，以后 npm install 的时候，拿取的就是老版本的了。最新的包管理 yarn 其实是默认锁住版本号的

克隆一个对象

有奇葩的方法：

• eval(uneval(o))//firefox 才支持非标准的 uneval
• JSON.parse(JSON.stringify(o))//还行，深度复制的速度是最快的(和 extends 其实差不多)，浅度复制的话还是 assign 吧，但是函数对象，date 对象等等 json 不支持的都没戏咧
• Object.create(o)//虽然是加了层原型链，但是我感觉还是不错的，不过前者的对象变化会影响到后面，基本不算是复制了
• Object.assign(就是一个浅复制呗，writable 特性无法复制)
• $.extends(第一个参数为 true 的话是支持深度复制的)
• replaceState(奇葩啊，这也行..)

const structuredClone = obj => {
  const oldState = history.state;
  history.replaceState(obj, null);
  const clonedObj = history.state;
  history.replaceState(oldState, null);
  return clonedObj;
};

function clone(obj) {
  var newObj;
  if (obj instanceof Array) {
    newObj = [];
    for (var i = 0; i < obj.length; i++) {
      newObj[i] = clone(obj[i]);
    }
  } else if (obj instanceof Object) {
    newObj = {};
    for (var k in obj) {
      newObj[k] = clone(obj[k]);
    }
  } else {
    newObj = obj;
  }
  return obj;
}

AMD 和 CMD 规范

AMD 依赖前置，所以异步并行加载

CMD 按需依赖，所以还是顺序加载

node 端是 Commonjs

##前端安全
永远不相信前端输入，1 个是前端的验证要通过正则啊等等的验证，后端也必须得再校验一遍

XSS 攻击

就是在网页上插入 html 标签或者 javascript 代码。

解决：

• 针对提交的结果后端设置一层 filter,对<>进行过滤
• 东西写到页面上的时候都进行一次 encode，放置将 html 标签显示出来
• 不在 cookie 里面存重要的信息

CSRF(跨站点请求伪造)

• 传一个 token
• 判断来源 referer

机器人的攻击

进行验证码的验证

两者的区别在于 XSS 是访问，不需要什么数据，CSRF 是一次动作，是需要一些数据包的

manifest

就是在 html 元素里定义了这个属性，就可以进行缓存了，当做离线应用进行缓存

web worker

运营在后台的 js，独立于页面，可以不阻塞主线程

BFC

块级格式化上下文，是一个独立的布局环境，其中的元素布局不受外部的影响。
float 不是 none，position 是 absolute 或者 fixed，或者 overflow 不是 visible，display 的值是 inline-block，flex，table-cell 等等

他的作用：
避免外边距折叠，在外面加上一层 BFC
也能触发包含了浮动元素，内部不被撑开的情况
避免文字环绕

点击穿透

就是点击之后上层 DOM 改变，下层中同样位置的元素触发点击事件，就是点击穿透。

一般就是 touchstart–touchmove–touchend，然后 touchend 之后浏览器会延迟 300ms 来监听是否触发了 dbclick 事件。

tudo：如何解决？？

如果构造函数里有 return 语句

如果构造函数 return 的不是引用类型，那么就会当没有 return；

如果返回的是引用类型，那就会替换掉返回的东西；

如果是 return this，那么当做构造函数调用的话等于就是没有写。

==和===的区别

重点内容就是不同类型的值进行比较的时候，字符串和布尔值都会转化为数值进行比较，如果是对象与原始类型的值比较，对象转化为原始类型的值，然后再进行比较。

之所以建议用===的原因就是因为===没有歧义，当后面的开发者看到的时候，不会去想是不是有什么深意。

HTTPS 的好处

全站 HTTPS：
主要为了摆脱运营商的劫持

因为发一个 http 请求，属于明文传输，中间代理服务器，路由器，网关出口，通信运营商，都可以劫持到请求，就可以拿到放在 url 里的一些参数，cookie 也可以拿到，返回的内容，他也可以添加一些第三方的内容

HTTPs 就是进行了数据的保密，数据的完整，身份的校验，就是 http+ssl，发了请求，会先 302 到 https 服务，然后生成一个 crt，然后客户端进行验证，然后生成一个随机的加密形式发回后端，后端将加密内容发回来，客户端再进行解密进行展示。

主要问题是请求的响应速度影响明显还有 cpu 的计算能力的消耗，主要是私钥解密阶段，因为非对称私钥计算很需要时间，而且每次生成的都不一样，而且一定程度上也不利于 SEO

只听说过会话复用

HTTP2

他是二进制的，代替了原有的文本；

交换两个值，不用额外临时变量

就三种方法咯，异或的最快

var a = 123;
var b = 456;
a = a + b;
b = a - b;
a = a - b; //加法
a = a * b;
b = a / b;
a = a / b; //除法
a ^= b;
b ^= a;
a ^= b; //异或是位操作，速度肯定是最快的啦，相同为1，不同为0，因为异或的反操作还是本身

webpack 与 gulp，grunt 的区别

webpack 带有一套 loader 机制，gulp，grunt 没有这种机制。

yarn 与 npm 的比较

yarn 自动缓存了他下载过的模块，就是说他只要下载过，即使你删去了，他也能够离线下载下来。(其实也就是保存在了本地的目录)而且是并行资源管理，速度很快。

yarn 号称自己非常可依赖，如果在一个机器上能够运行，在另外的机器上也能运行。(npm 的下载可能是杂乱无章的，yarn 根据他的 lockfile 和安装算法保证了位置，顺序都是一样的)

yarn 非常安全，会校验模块的完整性。

yarn 自动 shrinkwrap。

纯函数

纯函数其实就是你输入什么东西，得到的结果是必定的，不会更改的就叫做纯函数。

模块跟闭包的区别

模块的表现很像闭包。但是模块是比闭包更高级的东西。就是说他其实是有他自己的上下文环境的。

迭代器

generator 函数返回了一个可迭代的迭代器，比如为 c 的话。c[Symbol.iterator]() === c，其实就形成了一个循环了。

Iterable -- object
    [Symbol.iterator] -- function
        return -- Iterator --object
            [next] -- function
Generator Function
    Generator <Iterable, Iterator>

HTTPS 如何实现

客户端发起一个请求。服务器端有一个公钥和一个私钥，服务器端将公钥传过来；客户端校验公钥是否失效，如果合格，就生成一串随机值，然后用公钥加密传给后端；后端根据私钥进行解密，得到这串随机值，然后用随机值将内容加密传给前端；客户端拿到值后使用随机值解密，得到具体的内容。

---

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 981909093@qq.com