笔试指南

题目：类型判断用到哪些方法？
typeof和instanceof

题目：值类型和引用类型的区别？
根据 JavaScript中的变量类型传递方式，又分为值类型和引用类型，在参数传递方式上，值类型是按值传递，引用类型是按共享传递。

说出下面代码的执行结果，并分析其原因？

function foo(a){
    a = a * 10;
}
function bar(b){
    b.value = 'new';
}
var a = 1;
var b = {value: 'old'};
foo(a);
bar(b);
console.log(a); // 1
console.log(b); // value: new

如何理解 JavaScript 的原型？
所有的引用类型（数组、对象、函数），都具有对象特性，即可自由扩展属性（null除外），都有一个__proto__属性，属性值是一个普通的对象，__proto__属性值指向它的构造函数的prototype属性值。所有的函数，都有一个prototype属性，属性值也是一个普通的对象

如何理解 JS 的原型链？

当试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么会去它的__proto__（即它的构造函数的prototype）中寻找，若没有找到，会一直往上找，发现是一个链式的结构，所以叫做“原型链”

题目：现在有个 HTML 片段，要求编写代码，点击编号为几的链接就alert弹出其编号？（闭包题目）

<ul>
    <li>编号1，点击我请弹出1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

var list = document.getElementsByTagName('li');
for (var i = 0; i < list.length; i++) {
    list[i].addEventListener('click', function(i){
        return function(){
            alert(i + 1)
        }
    }(i), true)
}

题目：说出下面执行的结果（执行上下文，这里笔者直接注释输出了）

console.log(a)  // undefined
var a = 100

fn('zhangsan')  // 'zhangsan' 20
function fn(name) {
    age = 20
    console.log(name, age)
    var age
}

console.log(b); // 这里报错
// Uncaught ReferenceError: b is not defined
b = 100;

题目：如何理解 JS 的作用域和作用域链？

JS 没有块级作用域，只有全局作用域和函数作用域，ES6才有块级作用域，全局作用域就是最外层的作用域，如果我们写了很多行 JS 代码，变量定义都没有用函数包括，那么它们就全部都在全局作用域中。这样的坏处就是很容易冲突。 jQuery、Zepto 等库的源码，所有的代码都会放在(function(){....})()中。因为放在里面的所有变量，都不会被外泄和暴露，不会污染到外面，不会对其他的库或者 JS 脚本造成影响。这是函数作用域的一个体现。
当前作用域没有定义的变量，这成为 自由变量 。自由变量如何得到 —— 向父级作用域寻找。如果父级也没呢？再一层一层向上寻找，直到找到全局作用域还是没找到，就宣布放弃。这种一层一层的关系，就是 作用域链 。自由变量将从作用域链中去寻找，但是依据的是函数定义时的作用域链，而不是函数执行时

闭包主要有哪些应用场景？

①函数作为返回值
②函数作为参数传递

题目：讲解下面代码的执行过程和结果？

var a = true;
setTimeout(function(){
    a = false;
}, 100)
while(a){
    console.log('while执行了')
}

因为JS是单线程的，所以进入while循环之后，没有「时间」（线程）去跑定时器了，所以这个代码跑起来是个死循环！

题目：ES6 箭头函数中的this和普通函数中的有什么不同？
第一写起来更加简洁，第二 this是父作用域的 this

function MathHandle(x, y) {
  this.x = x;
  this.y = y;
}

MathHandle.prototype.add = function () {
  return this.x + this.y;
};

var m = new MathHandle(1, 2);
console.log(m.add())


class MathHandle {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  add() {
    return this.x + this.y;
  }
}
const m = new MathHandle(1, 2);
console.log(m.add())

JS 构造函数实现继承

// 动物
function Animal() {
    this.eat = function () {
        console.log('animal eat')
    }
}
// 狗
function Dog() {
    this.bark = function () {
        console.log('dog bark')
    }
}
Dog.prototype = new Animal()
// 哈士奇
var hashiqi = new Dog()

ES6 class 实现继承

class Animal {
    constructor(name) {
        this.name = name
    }
    eat() {
        console.log(`${this.name} eat`)
    }
}

class Dog extends Animal {
    constructor(name) {
        super(name)
        this.name = name
    }
    say() {
        console.log(`${this.name} say`)
    }
}
const dog = new Dog('哈士奇')
dog.say()
dog.eat()

ES6 中新增的数据类型有哪些？

Set 和 Map

DOM 和 HTML 区别和联系？

HTML 是一个有既定标签标准的 XML 格式，标签的名字、层级关系和属性，都被标准化（否则浏览器无法解析），它也是一棵树。HTML 是一棵树，DOM 也是一棵树。可以认为 DOM 就是 JS 能识别的 HTML 结构，一个普通的 JS 对象或者数组。

property 和 attribute 的区别是什么？
两种有很大的区别，property 的获取和修改，是直接改变 JS 对象，而 attribute 是直接改变 HTML 的属性，attribute 就是对 HTML 属性的 get 和 set，和 DOM 节点的 JS 范畴的 property 没有关系。

什么是事件冒泡？
DOM 结构中，事件会沿着 DOM 树向上级节点冒泡，如果我们在上级节点中都绑定了事件，它是会根据 DOM 的结构来冒泡，从下到上挨个执行的。但是我们可以使用e.stopPropagation()来阻止冒泡

如何使用事件代理？有何好处？

若有如下场景，一个<div>中包含了若干个<a>，而且还能继续增加。那如何快捷方便地为所有<a>绑定事件呢？

<div id="div1">
    <a href="#">a1</a>
    <a href="#">a2</a>
    <a href="#">a3</a>
    <a href="#">a4</a>
</div>
<button>点击增加一个 a 标签</button>

这里就会用到事件代理。我们要监听<a>的事件，但要把具体的事件绑定到<div>上，然后看事件的触发点是不是<a>

var div1 = document.getElementById('div1')
div1.addEventListener('click', function (e) {
    // e.target 可以监听到触发点击事件的元素是哪一个
    var target = e.target
    if (e.nodeName === 'A') {
        // 点击的是 <a> 元素
        alert(target.innerHTML)
    }
})

使用代理的优点如下：使代码简洁，减少浏览器的内存占用

手写 XMLHttpRequest 不借助任何库？

var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function () {
    // 这里的函数异步执行，可参考之前 JS 基础中的异步模块
    if (xhr.readyState == 4) {
        if (xhr.status == 200) {
            alert(xhr.responseText)
        }
    }
}
xhr.open("GET", "/api", false)
xhr.send(null)

HTTP 协议中，response 的状态码，常见的有哪些？

xhr.status即 HTTP 状态码，有 2xx 3xx 4xx 5xx 这几种，比较常用的有以下几种：

200 正常
3xx
301 永久重定向。如http://xxx.com这个 GET 请求（最后没有/），就会被301到http://xxx.com/（最后是/）
302 临时重定向。临时的，不是永久的
304 资源找到但是不符合请求条件，不会返回任何主体。如发送 GET 请求时，head 中有If-Modified-Since: xxx（要求返回更新时间是xxx时间之后的资源），如果此时服务器 端资源未更新，则会返回304，即不符合要求
404 找不到资源
5xx 服务器端出错了

另：
xhr.readyState是浏览器判断请求过程中各个阶段的，xhr.status是 HTTP 协议中规定的不同结果的返回状态说明。

xhr.readyState的状态码说明：

0 -代理被创建，但尚未调用 open() 方法。
1 -open() 方法已经被调用。
2 -send() 方法已经被调用，并且头部和状态已经可获得。
3 -下载中， responseText 属性已经包含部分数据。
4 -下载操作已完成

什么是跨域，如何实现跨域？
浏览器中有 同源策略，url 协议、域名、端口不同算跨域

解决跨域 - 服务器端设置 http header
1、JSONP
但是 HTML 中几个标签能逃避过同源策略——<script src="xxx">、<img src="xxxx"/>、<link href="xxxx">，这三个标签的src/href可以加载其他域的资源，不受同源策略限制。

2、服务器端设置 http header

response.setHeader("Access-Control-Allow-Origin", "http://m.juejin.com/"); // 第二个参数填写允许跨域的域名称，不建议直接写 "*"
response.setHeader("Access-Control-Allow-Headers", "X-Requested-With");
response.setHeader("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");

// 接收跨域的cookie
response.setHeader("Access-Control-Allow-Credentials", "true");

cookie 和 localStorage 有何区别？

它是设计用来在服务器和客户端进行信息传递的，因此我们的每个 HTTP 请求都带着 cookie。但是 cookie 也具备浏览器端存储的能力（例如记住用户名和密码），因此就被开发者用上了。
使用方法：document.cookie = '···'

缺点：
存储量太小，只有 4KB
所有 HTTP 请求都带着，会影响获取资源的效率
API 简单，需要封装才能用

locationStorage 和 sessionStorage
两者的区别就在于sessionStorage根据 session 过去时间而实现，而localStorage会永久有效。一些需要及时失效的重要信息放在sessionStorage中，一些不重要但是不经常设置的信息，放在localStorage中。

优点
存储量增大到 5MB
不会带到 HTTP 请求中
API 适用于数据存储 localStorage.setItem(key, value) localStorage.getItem(key)

什么是盒子模型？
内边距、边框和外边距。它们三者就构成了一个“盒子”

盒子模型的宽度如何计算？
固定宽度的盒子：内容宽度（固定的宽度） + border宽度 + padding宽度 + margin宽度之和
充满父容器的盒子：内容宽度 + border宽度 + padding宽度 + margin宽度之和，内容宽度=父容器的内容宽度-（自己的 border宽度 + 自己的padding宽度 + 自己的margin宽度）
包裹内容的盒子：内容的宽度按照内容计算，盒子的宽度=内容宽度的基础上+padding宽度 + border宽度 + margin宽度之和。

为何 float 会导致父元素塌陷？
被设置了 float 的元素会脱离文档流，破坏了父标签的原本结构，使得父标签出现了坍塌现象

float 的重要的特性是什么？
包裹性和清空格

手写 clearfix？

.clearfix:after {
    content: '';
    display: table;
    clear: both;
}
.clearfix {
    *zoom: 1; /* 兼容 IE 低版本 */
}

relative、absolute 和 fixed 有何区别？什么是定位上下文？

relative 会导致自身位置的相对变化，而不会影响其他元素的位置、大小，就是 relative 产生一个新的定位上下文。

absolute 元素脱离了文档结构，只要元素会脱离文档结构，它就会产生破坏性，导致父元素坍塌，absolute 元素具有“包裹性”。bsolute 元素具有“跟随性”。虽然 absolute 元素脱离了文档结构，若我们没有设置 top、left 的值，它的位置并不发生变化，呆在它原本的位置。absolute 元素会悬浮在页面上方，会遮挡住下方的页面内容。置了 top、left 值时，元素是相对于最近的定位上下文来定位的，而不是相对于浏览器定位。
fixed 和 absolute 是一样的，唯一的区别在于：absolute 元素是根据最近的定位上下文确定位置，而 fixed 根据 window （或者 iframe）确定位置。

relative 元素的定位永远是相对于元素自身位置的，和其他元素没关系，也不会影响其他元素。

absolute 设置了 top、left，浏览器会递归查找该元素的所有父元素，如果找到一个设置了position:relative/absolute/fixed的元素，就以该元素为基准定位，如果没找到，就以浏览器边界定位。

fixed 元素的定位是相对于 window （或 iframe）边界的，和其他元素没有关系。但是它具有破坏性，会导致其他元素位置的变化。

相对于flex布局，传统布局的方式是什么？
布局的传统解决方案基于盒子模型，依赖 display 属性 + position 属性 + float 属性

如何实现水平居中？
inline 元素用text-align: center;
block 元素可使用margin: auto;
绝对定位元素可结合left和margin实现，但是必须知道宽度

.container {  //container是item的父级
    position: relative;
    width: 500px;
}
.item {
    width: 300px;
    height: 100px;
    position: absolute;
    left: 50%;  
    margin: -150px;   
}

如何实现垂直居中？
inline 元素可设置line-height的值等于height值
绝对定位元素，可结合left和margin实现，但是必须知道尺寸（优点：兼容性好
缺点：需要提前知道尺寸）

.container {
    position: relative;
    height: 200px;
}
.item {
    width: 80px;
    height: 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -20px;
    margin-left: -40px;
}

绝对定位可结合transform实现居中（优点：不需要提前知道尺寸
缺点：兼容性不好）

.container {
    position: relative;
    height: 200px;
}
.item {
    width: 80px;
    height: 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: blue;
}

绝对定位结合margin: auto（不需要提前知道尺寸，兼容性好）
测试：

<html>

<head>
<style>
.container {
    position: relative;
    height: 300px;
    border:1px blue solid;
}
.item {
    width: 100px;
    height: 50px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background:red
}

</style>

<title>我的第一个 HTML 页面</title>
</head>

<body>
<div class="container"><div class="item"></div></div>

</body>

</html>

如何理解 HTML 语义化？
所谓“语义”就是为了更易读懂，分两部分：让人（写程序、读程序）更易读懂和让机器（浏览器、搜索引擎）更易读懂
为了加强 HTML 语义化，HTML5 标准中又增加了header section artical等标签。

CSS 的transition和animation有何区别？
首先transition和animation都可以做动效，从语义上来理解，transition是过渡，由一个状态过渡到另一个状态，比如高度100px过渡到200px；而animation是动画，即更专业做动效的，animation有帧的概念，可以设置关键帧keyframe，一个动画可以由多个关键帧多个状态过渡组成，另外animation也包含多个属性。

什么是重绘和回流？

重绘：指的是当页面中的元素不脱离文档流，而简单地进行样式的变化，比如修改颜色、背景等，浏览器重新绘制样式
回流：指的是处于文档流中 DOM 的尺寸大小、位置或者某些属性发生变化时，导致浏览器重新渲染部分或全部文档的情况
回流要比重绘消耗性能开支更大。

找出下面代码的优化点，并且优化它？

var data = ['string1', 'string2', 'string3'];
for(var i = 0; i < data.length; i++){
    var dom = document.getElementById('list');
    dom.innerHTML += '<li>' + data[i] + '</li>';
}

var dom = document.getElementById('list');
var data = ['string1', 'string2', 'string3'];
var frag = document.createDocumentFragment();
var li;
for(var i = 0; i < data.length; i++){    
    li = document.createElement("li");
    li.innerHTML = data[i];
    frag.appendChild(li);  // 先放在 frag 中，最后一次性插入到 DOM 结构中。
}
listNode.appendChild(frag);

前端常见的安全问题有哪些？
XSS（跨站脚本攻击）和CSRF（跨站请求伪造）

何为构建工具，为什么要使用？
构建”也可理解为“编译”，就是将开发环境的代码转换成运行环境代码的过程。开发环境的代码是为了更好地阅读，而运行环境的代码是为了更快地执行，两者目的不一样，因此代码形式也不一样，为了达到这个目的，就要使用构建工具。
总结一下需要构建工具处理的几种情况：

构建工具的作用？
处理模块化、编译语法、代码压缩

何为抓包？
PC 端的网页，我们可以通过 Chrome、Firefox 等浏览器自带的开发者工具来查看网页的所有网络请求，以帮助排查 bug。这种监听、查看网络请求的操作称为抓包。

如何抓取数据？如何使用工具来配置代理？

监听请求：
Mac 系统下推荐使用 Charles，Windows 系统推荐使用 Fiddler
1、将安装好 Charles 的电脑和要抓包的手机，连接到同一个网络，保证 IP 段相同
2、手机设置网络代理，（代理IP）代理到电脑的 IP，代理的端口为8888，Charles选择“允许”代理
3、使用手机端访问的网页或者联网的请求，Charles 就能监听到

线上的地址代理到测试环境：
1、Charles 为例，点击菜单栏中 Tools 菜单，二级菜单中点击 Map Remote
2、选中 Enable Map Remote 复选框，然后点击 Add 按钮，添加一个代理项
3、将添加的代理项，map from 设置https://www.aaa.com/api/getuser?name=xxx，Map to设置http://168.1.1.100:8080/api/getuser?name=xxx
4、单击OK

本笔试指南缺乏数据结构和算法，以及性能优化内容

本文由https://juejin.im/book/5a8f9ddcf265da4e9f6fb959/section/5a8f9fcb6fb9a063417b3f9e整理而得，权利归作者所有，侵删！