面试总结（2019/03/17更新）

本来想分一期二期写的，想想第一篇博客要特殊点，哈哈。那就像流水账一样一直往下写吧。

题目不分先后不分重要，包括自己面试的一些比较有代表的知识点和别处看到的面试点。

1、JS继承（原型链继承）

继承这个题目其实挺大的，继承的方式也有很多种，目前我也不是全部理解各种方法的继承，以后摸透了写个继承专题吧。

直接挂代码

// 声明 人 这个类
function People(sex) {
  this.sex = sex;
  this.saySex = function saySex() {
    console.log(`我的性别是${this.sex}`);
  }
}

// 创建女性
function Woman() {

}
Woman.prototype = new People('女');
// 这样Woman这个类别的原型对象是 人 构造的；
const girl = new Woman();
girl.saySex();

2、什么是闭包，手写一个闭包

这又是一个很大的问题啊，哈哈以后写个闭包专题详解。其实简单理解一下就是：一个函数记住并能够访问他所在的词法作用域时，即使函数在其他的作用域调用，这就产生了闭包。

贴一个典型的闭包例子

function fn () {
  const str = 'HelloWorld';
  function bar () {
    console.log(str);
  };
  return bar;
}

var fo = fn();
fo() // 输出HelloWorld;

fo其实就是fn作用域中的函数bar，但是fo在调用的时候并不是在fn内部作用域中调用，即使如此依旧访问到了str这个变量，在这里产生了闭包。

3、使用闭包实现数据缓存

废话不多说，直接上代码

const foo = (() => {
  const cache = {};
  return {
    getCache(key) {
      return cache[key];
    },
    setCache(key, val) {
      cache[key] = val;
    },
  };
})();

foo.setCache('name', 'dsj')；
console.log(foo.getCache('name'));

直接用IIEF返回了一个对象，只暴露出两个方法用来存和取，在这里就用了闭包，函数调用时所在的词法作用域并不是函数声明所在的域，依旧访问到了想要的变量，产生了闭包。

4、url->页面生成过程

分为两大块来答
一个是网络http层面
首先输入url，进行DNS解析
DNS解析首先会进行缓存查找，分为以下5部
1. 浏览器先会在浏览器缓存中去查找该域名是否有对应的IP信息
2. 接着搜索操作系统中有没有相应的缓存信息，比如hosts文件中
3. 接着在路由器缓存中进行查找
4. 接着从网络服务商那边的缓存信息中进行查找
5. 以上方法如果找到就直接返回IP信息，如果都没有找到就会发起一个迭代DNS解析请求
1> 向根域名服务器发送请求，该服务器没有域名的全部信息，但是可以返回顶级域名服务器地址，如com域的顶级域名服务器地址
2> 接着向顶级域名服务器发送请求最终获取IP地址
6. 本地域名服务器（也就是网络服务商）将IP返回给操作系统同时把该IP缓存起来
7. 操作系统把IP返给浏览器，同时把IP缓存起来
8. 最后浏览器得到了IP开始建立连接
建立连接 => 3次握手
客户端发送带有SYN标志的数据包给服务端（请求连接）
服务端发送带有SYN/ACK标志的数据包给客户端（同意建立连接）
客户端发送带有ACK标志的数据包给服务端（开始连接）
PS：如果三次握手中某次某一方没接到信号，TCP协议会要求重新发送信号

建立连接后会开始数据的传递，比如相应的js文件，css文件，图片文件等。同时浏览器开始渲染页面
当数据传递全部完成，开始四次挥手，断开连接。

其中浏览器渲染页面过程如下：
解析HTML，遍历文档节点生成DOM树;
解析CSS文件生成 CSSOM规则树;
然后DOM树和和CSSOM树结合生成渲染Render树；
渲染树开始布局，计算每个节点的位置大小等信息；
然后绘制每个节点到屏幕上
PS：在生成DOM树的过程中，如果遇到script标签，会产生阻塞；
如果JS脚本中还对CSSOM进行了操作，浏览器会延迟脚本的执行和DOM的渲染，先生成CSSOM树；
渲染树进行绘制的时候，涉及到了重绘和回流
回流：当元素的大小布局等发生改变的时候就会触发回流，回流必然引发重绘；
重绘：当元素的颜色背景之类发生改变的时候触发重绘
每个页面必然发生一次回流，所以必然有一次重绘，也就是页面加载渲染的时候；
因为回流会导致渲染树重新构建，花销较大，所以应该尽可能的避免回流；
比如减少DOM操作等。

5、JS的数据类型，基本类型哪些，和引用类型的区别

数据类型： null, undefined, Number, String, Object, Boolean, Symbol
基本类型： undefined, null, boolean, number, String, 指的是保存在栈内存中的简单数据
引用类型： Array, Object等对象类型，指的是保存在堆内存中的对象，变量实际保存的是一个指针，指针指向内存中的一个位置，该位置保存对象

6、节流和防抖

节流和防抖都是用来预防某些操作重复触发函数，比如重复请求，造成性能卡顿问题。
防抖原理：无论如何触发事件，在n秒后我才执行这个函数，如果n秒内再次触发该函数就以新触发的为准，n秒后再执行

function debounce(fuc, delay = 300) {
  let timer = null;
  return function fn() {
    const self = this; // 保存调用函数的this，防止setTimeout改变this指向
    const args = arguments; // 保存函数调用的传参
    if (timer) clearTimeout(timer); // 清除定时器
    timer = setTimeout(() => {
      fuc.apply(self, args); // 函数指定this，同时把参数传入
    }, delay);
  };
}

// 比如给一个div绑上一个mousemove事件，
function move(event) {
  console.log(1, event);
}
div.onmousemove = debounce(move);

可以直接试一下。

节流原理：一段时间内某个函数只能触发一次，比如3秒内fn函数只能触发一次，便会在0秒是触发一次该函数直至3秒都不会再次触发
目前主流采用时间戳或者定时器来实现
时间戳方法会让函数立刻执行一次，但是在停止触发的时候并不会再执行了，如下

function throttle(fuc, delay = 300) {
  let timer = 0;
  return function fn() {
    const self = this;
    const now = +new Date();
    const args = Array.prototype.slice.apply(arguments);
    if (now - timer > delay) {
      fuc.apply(self, args);
      timer = now;
    }
  };
}

7、手写bind实现

这个问题真的非常常见，但是知识点还蛮多的。写了一年业务代码很少用到 bind, call, apply这些函数，也对这些理解得不咋深，结果面试问到就露馅，回过头来多理解一下，多写写也搞懂了一些。

首先讲一下bind的用法，bind一般用来改变一个函数中this的指向，该方法会返回改变this后的函数，以下是一个范例 

var obj = {
  name: '阿狸',
  age: '18',
};
function fuc(sex, from) {
  console.log(`我叫${this.name}`);
  console.log(`我是${sex}孩子，来自${from}`);
  console.log(`今年${this.age}岁啦`);
  return '哈哈哈哈哈';
}

fuc.bind(obj, '女')('瓦罗兰大陆');

输出肯定是没啥问题的，可以直接贴f12试下，用法试了一回那么怎么手写一个实现怎么做呢？

Function.prototype.bindHandler = function (ctx) {
  const self = this;
  // ctx也就是this要指向的对象
  return function() {
    self.apply(ctx);
  }
}
// 试验一下
fuc.bindHandler(obj, '女', '瓦罗兰大陆');
// 发现结果有点不对，参数没有拿到，而且还有一个点没考虑到，fuc函数如果返回一个值，能拿到吗？明显不能，改进一下函数
Function.prototype.bindHandler = function (ctx) {
  // ctx也就是this要指向的对象
  const self = this;
  // 保存一下除了ctx以外传进来的参数，
  const args = Array.prototype.slice.apply(arguments, [1]);
  return function() {
    const argsOther = Array.prototype.slice.apply(arguments);
    const result = self.apply(ctx, args.concat(argsOther));
    return result;
  }
}
// 再试一下, 完全objk。
fuc.bindHandler(obj, '女', '瓦罗兰大陆');
fuc.bindHandler(obj, '女')('瓦罗兰大陆');

搞定！

8、手写trim实现
其实就是去掉首尾空格，一个简单的正则搞定

String.prototype.trimHandler = function() {
  return this.replace(/(^s*)|(s*$)/g, '');
}

先写到这里，下次再来更新！

/* ----------------------------------------------- 2019/3/4 更新------------------------  */

又回来啦，最近这段时间一直在面试。运气不错，拿到offer了。

躺了一天不能懒了，回来记录下面试过程中印象比较深的一些题吧。

 

续上

9、如何理解Nginx代理解决跨域
跨域问题在前端算是个必考点，其实不想说这个的，一个基础的前端开发是必然要了解跨域相关的知识。

不过面试次次问，那就说一下我的理解，希望给面到这个问题的同学一点帮助。

其实在这之前还得理解一下什么是 "同源策略"，网上其实有很多解释了，不过我希望同学们记住一点，这是浏览器的一个功能！（划重点）

也就是说解决跨域，就为了绕过浏览器的这个限制。

在这里贴一个链接，里面有讲到同源策略和一些普遍的跨域方法，我就不赘述了（https://segmentfault.com/a/1190000007326671）。

我想说的主要是现在我们开发中很常用的配置nginx代理去解决跨域。

原理其实不复杂，就是绕过了浏览器的同源策略去解决。

                          

正常来说我们写代码发送请求给目标地址，会产生跨域，那么我们可以做个中转站服务器，让这个代理服务器可以我们的请求，然后这个代理服务器再转发给目标服务器。

服务器和服务器之间是可以直接请求的，之前说过同源策略是浏览器的功能嘛。这样就绕过了服务器的限制，解决了跨域，其实就这么简单。

不过一般来说正式项目上线，服务器会给配置一个网关，这个网关去过滤一部分请求，才能到目标服务器。不然服务器的安全性就太低了，任意请求被攻击怎么办？

这样我们在开发的时候就可以解决跨域问题，快乐的开发。至于上线，也可以配置Nginx代理服务器的，然后在服务器端改一下配置允许对应代理的请求即可，这部分一般是运维的工作。

 

10、JS实现事件绑定的几种方法

这个问题简单，但是经常让你手写一个兼容绑定事件的方法，可以瞟一眼。

假设有个函数

// 假设有个函数
function fn() {
  alert('Hello World !');
}
// 直线元素绑定
// html代码
 <div id='btn' @onclick='fn()'>按钮</div> 

// 或者通过js绑定
// 这是dom0级事件绑定，此方法只能绑定一个事件，绑定多个会被覆盖
 document.getElementById('btn').onclick = fn;

// dom2级事件绑定
// 如果绑定多个函数，会根据绑定的顺序来执行
 document.getElementById('btn').addEventListener('click', fn, false);
// 其中这个布尔值，true指的是在事件捕获阶段调用方法，false就是在冒泡阶段，默认为false

不过addEventListener有兼容问题，在IE8及以下版本要用attachEvent这个方法，那么最后贴一个兼容方法。

function addEventHandler(obj, type, fn) {
  // obj是元素对象，type是要绑定的事件类型，fn是函数
  // 能力判断
  if(element.addEventListener) { // Chrome，Firefox等浏览器，IE9及以上
    element.addEventListener(type, fn, false);
  } else if (element.attachEvent) { // IE8及以下 
    element.attachEvent("on" + type, fn);
  } else {
    element["on" + type] = fn;
  }
}

那么如果是移除事件呢？也有兼容性方法的，自己想想怎么写吧！基本类似。

 

11、说说对var, let, const的理解

每次面对这种XXX的理解的问题就很头大，只能尽力去把自己知道的表达出来。

我当时的回答：

var可以重复声明，存在声明提升，绑定全局作用域，例：

// 一般来说直接
console.log(test);
// 是会报错的，因为test没有声明。这大家都理解

// 那么下面这段代码缺会输出undefined
console.log(test);
var test = 1;

// 因为上面这段代码等同于
var test;
console.log(test);
test = 1;
// var的变量提升会把声明变量提升到"当前作用域"的顶部
// 同时var还会绑定全局作用域，直接用代码理解，前提是var在全局作用域中声明使用
var test = 'test';
console.log(test); // test
console.log(window.test); // test

但是const和let不存在声明提升，也不会绑定全局作用域，那么let和const之间也有区别

const用于声明常量，值被设定以后不能修改，否则报错，

不过const可以理解为不可修改绑定，可以修改其属性值，看代码

const num = 1;
num = 2; // 报错

const obj = { name: '张三' };
obj.name = '李四';
obj.sex = '男';
console.log(obj); // { name: '李四', sex: '男' };

而且let和const还有一个特性，临时死区(Temporal Dead Zone)，简写为 TDZ （划重点！！！）。

之前在了解到let和const不会提升的时候，我就想过一个问题

var name = '张三';
function fn() {
  console.log(name);
}
fn();
// 这里会输出张三，因为js的作用域链，在自己的作用域找不到该变量时会去到上一级作用域找该变量

// 那么如果是以下情况
const name = '张三';
function fn() {
  console.log(name); // 此时fn的作用域未声明name
  const name = '李四'; // 不会提升变量
  console.log(name);
}
fn();

当初我的想法是，第一句console未声明name,那么会去上一级作用域找name，输出“张三”。
第二句console因为上一句代码声明了name，输出李四。
结果以上想法是错的，程序直接报错，就是因为临时死区的存在才会报错。
在fn中只要const或者let声明了一个变量，虽然不会提升到顶部，但会把变量放在DTZ中。
这样在声明之前访问变量就会报错，执行过变量声明语句之后才会从DTZ中移出来，我把这理解为一种另类的提升。

 

12、浏览器缓存禁用

实际开发中有这样一个场景，因为http的缓存机制，项目打包上线以后，可能页面加载的js是浏览器中的缓存，并不是最新的js文件，总不能告诉用户去手动清缓存吧？那有什么办法解决呢。

其实我对http缓存这一块了解不深，但是这个问题我觉得很实用，也是我项目中确实碰到的问题，然后查了下解决方案，有两种比较常用：

  （一） html里面通过meta标签去禁用缓存

<meta http-equiv="pragma" content="no-cache"> 
<meta http-equiv="Cache-Contro" content="no-cache, must-revalidate"> 
<meta http-equiv="expires" content="0">

　　我了解不深怕解释不清，就不详说，这几个属性值大家可以自己查查了解，这样印象也会深一些。

（二）

　　css和js带参数（形如.css?time=与.js?time=） ，加一个随机数或者时间戳，这样请求资源的路径变了，就不会加载缓存的资源。 

 

主要详写的是我容易忘或者比较特别的问题，当然面试还有很多问题，网上有非常多的解释也没有什么特别好说的，

我在此列举一些，看这篇帖子的同学们也可以去了解一下。

• 垂直水平居中的几种方法（flex, position等）
• 移动端页面适配（可以去了解一下手淘flexible.js的方案）
• http状态码，三次握手四次挥手了解一下
• 数组有哪些操作方法
• cookie和本地存储
• 页面加载性能优化（雪碧图减少http请求之类的）
• 因为我的技术栈是vue，所以还问了关于vue的东西
• vue的生命周期，各个周期代表的意义，实际运用（如mounted中获取页面数据）
• vue的组件通信 ($emit，props等)
• vue数据双向绑定实现的原理，这个问题5个面试里有3个都问，这个我没写过，一般我就说了下原理思路,可以百度看看，不过大部分说的是通过Object.defineProperty来监听，在vue3.0里面改用了proxy，建议都看看，也算体现对技术更新的热爱。后续我可能写一篇实现双向绑定的demo，也想自己啃一下。

 

虽然已经准备入职新公司，但是平常会看看有什么好玩的题，会分享在这里，或者另外写，下次再来更新！

有什么问题都可以给我留言哈~

 

/* ----------------------------------------------- 2019/3/17 更新------------------------  */