# JS部分

# 内置类型

• 6种原始类型
  • Number
  • String
  • Null
  • undefined
  • Boolean
  • Symbol（ES6新定义）
• 引用类型
  • Object
  • Function

# 介绍js有哪些内置对象

• Object是JavaScript中所有对象的父对象
• 数据封装类对象：Object、Array、Boolean、Number和String
• 其他对象：Function、Arguments、Math、Date、RegExp、Error

# JavaScript有几种类型的值

• 栈：原始数据类型（Number、String、Null、Undefined、Boolean、Symbol）
• 堆：引用数据类型（对象、数组和函数）
• 两种类型的区别是：存储位置不同
• 原始数据类型直接存储在栈(stack)中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储；
• 引用数据类型存储在堆(heap)中的对象,占据空间大、大小不固定,如果存储在栈中，将会影响程序运行的性能；引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体

# null，undefined 的区别

• undefined表示不存在这个值。
• undefined:是一个表示"无"的原始值或者说表示"缺少值"，就是此处应该有一个值，但是还没有定义。当尝试读取时会返回undefined
• 例如变量被声明了，但没有赋值时，就等于undefined
• null表示一个对象被定义了，值为“空值”
• null: 是一个对象(空对象, 没有任何属性和方法)
• 例如作为函数的参数，表示该函数的参数不是对象；
• 在验证null时，一定要使用　===，因为==无法分别null和　undefined

# Typeof

typeof对于基本类型，除了null都可以显示正确的类型

typeof 1 // 'number'
typeof '1' // 'string'
typeof undefined // 'undefined'
typeof true // 'boolean'
typeof Symbol() // 'symbol'
typeof b // b 没有声明，但是还会显示 undefined

typeof对于对象，除了函数都会显示object

typeof [] // 'object'
typeof {} // 'object'
typeof console.log // 'function'

对于null来说，虽然它是基本类型，但是会显示object，这是一个存在很久了的Bug

typeof null // 'object'

PS：为什么会出现这种情况呢？因为在JS的最初版本中，使用的是32位系统，为了性能考虑使用低位存储了变量的类型信息，000开头代表是对象，然而null表示为全零，所以将它错误的判断为object。虽然现在的内部类型判断代码已经改变了，但是对于这个Bug却是一直流传下来。

• 如果我们想获得一个变量的正确类型，可以通过Object.prototype.toString.call(xx)。这样我们就可以获得类似[object Type]的字符串

# 类型转换

转Boolean

在条件判断时，除了undefined，null，false，NaN，''，0，-0，其他所有值都转为true，包括所有对象 对象转基本类型 对象在转换基本类型时，首先会调用valueOf然后调用toString。并且这两个方法你是可以重写的

let a = {
    valueOf() {
    	return 0
    }
}

四则运算符

只有当加法运算时，其中一方是字符串类型，就会把另一个也转为字符串类型。其他运算只要其中一方是数字，那么另一方就转为数字。并且加法运算会触发三种类型转换：将值转换为原始值，转换为数字，转换为字符串

1 + '1' // '11'
2 * '2' // 4
[1, 2] + [2, 1] // '1,22,1'
// [1, 2].toString() -> '1,2'
// [2, 1].toString() -> '2,1'
// '1,2' + '2,1' = '1,22,1'

对于加号需要注意这个表达式'a' + + 'b'

'a' + + 'b' // -> "aNaN"
// 因为 + 'b' -> NaN
// 你也许在一些代码中看到过 + '1' -> 1

== 操作符

这里来解析一道题目[] == ![] // -> true，下面是这个表达式为何为true的步骤

// [] 转成 true，然后取反变成 false
[] == false
// 根据第 8 条得出
[] == ToNumber(false)
[] == 0
// 根据第 10 条得出
ToPrimitive([]) == 0
// [].toString() -> ''
'' == 0
// 根据第 6 条得出
0 == 0 // -> true

比较运算符

• 如果是对象，就通过toPrimitive转换对象
• 如果是字符串，就通过unicode字符索引来比较

# 原型

• 每个函数都有prototype属性，除了Function.prototype.bind()，该属性指向原型。
• 每个对象都有__proto__属性，指向了创建该对象的构造函数的原型。其实这个属性指向了[[prototype]]，但是[[prototype]]是内部属性，我们并不能访问到，所以使用_proto_来访问。
• 对象可以通过__proto__来寻找不属于该对象的属性，__proto__将对象连接起来组成了原型链

# This

• this总是指向函数的直接调用者（而非间接调用者）
• 如果有new关键字，this指向new出来的那个对象
• 在事件中，this指向触发这个事件的对象，特殊的是，IE中的attachEvent中的this总是指向全局对象Window

我们先来看几个函数调用的场景

function foo() {
  console.log(this.a)
}
var a = 1
foo()

const obj = {
  a: 2,
  foo: foo
}
obj.foo()

const c = new foo()

• 对于直接调用foo来说，不管foo函数被放在了什么地方，this一定是window
• 对于obj.foo()来说，我们只需要记住，谁调用了函数，谁就是this，所以在这个场景下foo函数中的this就是obj对象
• 对于new的方式来说，this被永远绑定在了c上面，不会被任何方式改变this

说完了以上几种情况，其实很多代码中的this应该就没什么问题了，下面让我们看看箭头函数中的this

function a() {
  return () => {
    return () => {
      console.log(this)
    }
  }
}
console.log(a()()())

• 首先箭头函数其实是没有this的，箭头函数中的this只取决包裹箭头函数的第一个普通函数的this。在这个例子中，因为包裹箭头函数的第一个普通函数是a，所以此时的this是window。另外对箭头函数使用bind这类函数是无效的。
• 最后种情况也就是bind这些改变上下文的API了，对于这些函数来说，this取决于第一个参数，如果第一个参数为空，那么就是window。
• 那么说到bind，不知道大家是否考虑过，如果对一个函数进行多次bind，那么上下文会是什么呢？

let a = {}
let fn = function () { console.log(this) }
fn.bind().bind(a)() // => ?

如果你认为输出结果是a，那么你就错了，其实我们可以把上述代码转换成另一种形式

// fn.bind().bind(a) 等于
let fn2 = function fn1() {
  return function() {
    return fn.apply()
  }.apply(a)
}
fn2()

可以从上述代码中发现，不管我们给函数bind几次，fn中的this永远由第一次bind决定，所以结果永远是window

let a = { name: 'poetries' }
function foo() {
  console.log(this.name)
}
foo.bind(a)() // => 'poetries'

以上就是this的规则了，但是可能会发生多个规则同时出现的情况，这时候不同的规则之间会根据优先级最高的来决定this最终指向哪里。 首先，new的方式优先级最高，接下来是bind这些函数，然后是obj.foo()这种调用方式，最后是foo这种调用方式，同时，箭头函数的this一旦被绑定，就不会再被任何方式所改变。

# 谈一谈函数中this的指向

• this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象
• 《javascript语言精髓》中大概概括了4种调用方式：
• 方法调用模式
• 函数调用模式
• 构造器调用模式
• apply/call调用模式

# ==与===有什么区别？

• 相等运算符（==）比较两个值是否相等
• 严格相等运算符（===）比较它们是否为“同一个值”
• 如果两个值不是同一类型，严格相等运算符（===）直接返回false，而相等运算符（==）会将它们转化成同一个类型，再用严格相等运算符进行比较。

# break与continue有什么区别？

• break语句用于跳出代码块或循环。
• continue语句用于立即终止本轮循环，返回循环结构的头部，开始下一轮循环。

# void 0和undefined在使用场景上有什么区别

void 运算符： void 运算符后面接一个表达式，无论表达式的内容是什么，只要跟在void之后都会被调用执行，执行完毕后void操作符返回undefined。使用void 0代替undefined原因如下：

• 兼容性；
• 减少在原形链上查找window.undefined 的时间；
• 避免undefined被误用重新赋值。

# 闭包

• 闭包就是能够读取其他函数内部变量的函数
• 闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域
• 闭包的特性：
  • 函数内再嵌套函数
  • 内部函数可以引用外层的参数和变量
  • 参数和变量不会被垃圾回收机制回收 说说你对闭包的理解
• 使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。在js中，函数即闭包，只有函数才会产生作用域的概念
• 闭包 的最大用处有两个，一个是可以读取函数内部的变量，另一个就是让这些变量始终保持在内存中
• 闭包的另一个用处，是封装对象的私有属性和私有方法
• 好处：能够实现封装和缓存等；
• 坏处：就是消耗内存、不正当使用会造成内存溢出的问题 使用闭包的注意点
• 由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露
• 解决方法是，在退出函数之前，将不使用的局部变量全部删除

# 深浅拷贝

** 浅拷贝**

首先可以通过Object.assign来解决这个问题，很多人认为这个函数是用来深拷贝的。其实并不是，Object.assign只会拷贝所有的属性值到新的对象中，如果属性值是对象的话，拷贝的是地址，所以并不是深拷贝

let a = {
  age: 1
}
let b = Object.assign({}, a)
a.age = 2
console.log(b.age) // 1

另外我们还可以通过展开运算符...来实现浅拷贝

let a = {
  age: 1
}
let b = { ...a }
a.age = 2
console.log(b.age) // 1

通常浅拷贝就能解决大部分问题了，但是当我们遇到如下情况就可能需要使用到深拷贝了

let a = {
  age: 1,
  jobs: {
    first: 'FE'
  }
}
let b = { ...a }
a.jobs.first = 'native'
console.log(b.jobs.first) // native

浅拷贝只解决了第一层的问题，如果接下去的值中还有对象的话，那么就又回到最开始的话题了，两者享有相同的地址。要解决这个问题，我们就得使用深拷贝了。 深拷贝 这个问题通常可以通过JSON.parse(JSON.stringify(object))来解决。

let a = {
  age: 1,
  jobs: {
    first: 'FE'
  }
}
let b = JSON.parse(JSON.stringify(a))
a.jobs.first = 'native'
console.log(b.jobs.first) // FE

但是该方法也是有局限性的：

• 会忽略undefined
• 会忽略symbol
• 不能序列化函数
• 不能解决循环引用的对象

let obj = {
  a: 1,
  b: {
    c: 2,
    d: 3,
  },
}
obj.c = obj.b
obj.e = obj.a
obj.b.c = obj.c
obj.b.d = obj.b
obj.b.e = obj.b.c
let newObj = JSON.parse(JSON.stringify(obj))
console.log(newObj)

# 说说你对作用域链的理解

• 作用域链的作用是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问，变量访问到window对象即被终止，作用域链向下访问变量是不被允许的
• 简单的说，作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期

# JavaScript原型，原型链 ? 有什么特点？

• 每个对象都会在其内部初始化一个属性，就是prototype(原型)，当我们访问一个对象的属性时
• 如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有自己的prototype，于是就这样一直找下去，也就是我们平时所说的原型链的概念
• 关系：instance.constructor.prototype = instance.__proto__
• 特点：
  • JavaScript对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变
• 当我们需要一个属性的时，Javascript引擎会先看当前对象中是否有这个属性， 如果没有的
• 就会查找他的Prototype对象是否有这个属性，如此递推下去，一直检索到Object内建对象

# 请解释什么是事件代理

• 事件代理（Event Delegation），又称之为事件委托。是JavaScript中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定的事件委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好处是可以提高性能
• 可以大量节省内存占用，减少事件注册，比如在table上代理所有td的click事件就非常棒
• 可以实现当新增子对象时无需再次对其绑定

# Javascript如何实现继承？

• 构造继承
• 原型继承
• 实例继承
• 拷贝继承
• 原型prototype机制或apply和call方法去实现较简单，建议使用构造函数与原型混合方式

 function Parent(){
        this.name = 'wang';
    }

    function Child(){
        this.age = 28;
    }
    Child.prototype = new Parent();//继承了Parent，通过原型

    var demo = new Child();
    alert(demo.age);
    alert(demo.name);//得到被继承的属性
  }

# var、let 及 const 区别

涉及面试题：什么是提升？什么是暂时性死区？var、let 及 const 区别？

• 函数提升优先于变量提升，函数提升会把整个函数挪到作用域顶部，变量提升只会把声明挪到作用域顶部
• var存在提升，我们能在声明之前使用。let、const因为暂时性死区的原因，不能在声明前使用
• var在全局作用域下声明变量会导致变量挂载在window上，其他两者不会
• let和const作用基本一致，但是后者声明的变量不能再次赋值

# 事件模型

W3C中定义事件的发生经历三个阶段：捕获阶段（capturing）、目标阶段（targetin）、冒泡阶段（bubbling）

• 冒泡型事件：当你使用事件冒泡时，子级元素先触发，父级元素后触发
• 捕获型事件：当你使用事件捕获时，父级元素先触发，子级元素后触发
• DOM事件流：同时支持两种事件模型：捕获型事件和冒泡型事件
• 阻止冒泡：在W3c中，使用stopPropagation（）方法；在IE下设置cancelBubble = true
• 阻止捕获：阻止事件的默认行为，例如click - <a>后的跳转。在W3c中，使用preventDefault（）方法，在IE下设置window.event.returnValue = false

# new操作符具体干了什么呢?

• 创建一个空对象，并且this变量引用该对象，同时还继承了该函数的原型
• 属性和方法被加入到this引用的对象中
• 新创建的对象由this所引用，并且最后隐式的返回this

# NaN是什么? 有什么特别之处?

NaN是JavaScript的特殊值，表示“非数字”（Not a Number），主要出现在将字符串解析成数字出错的场合。

• NaN不是一种独立的数据类型，而是一种特殊数值，它的数据类型依然属于Number；
• NaN不等于任何值，包括它本身；
• NaN与任何数（包括它自己）的运算，得到的都是NaN。

# 如何把非数值转化为数值?

• Number()
• parseInt()
• parseFloat()
• 数值运算符（Convert to number）：+x
• 负数值运算符（Negate）：-x

# Ajax原理

• Ajax的原理简单来说是在用户和服务器之间加了—个中间层(AJAX引擎)，通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。使用户操作与服务器响应异步化。这其中最关键的一步就是从服务器获得请求数据
• Ajax的过程只涉及JavaScript、XMLHttpRequest和DOM。XMLHttpRequest是ajax的核心机制

  // 1. 创建连接
  var xhr = null;
  xhr = new XMLHttpRequest()
  // 2. 连接服务器
  xhr.open('get', url, true) // 第三个参数为true，表示该请求应该以异步模式执行
  // 3. 发送请求
  xhr.send(null);
  // 4. 接受请求
  xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
      if(xhr.status == 200){
        success(xhr.responseText);
      } else { // fail
        fail && fail(xhr.status);
      }
    }
  }

ajax 有那些优缺点?

• 优点：
  • 通过异步模式，提升了用户体验.
  • 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用.
  • Ajax在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下的服务器负载。
  • Ajax可以实现动态不刷新（局部刷新）
• 缺点：
  • 安全问题AJAX暴露了与服务器交互的细节。
  • 对搜索引擎的支持比较弱。
  • 不容易调试。

# 如何解决跨域问题?

首先了解下浏览器的同源策略 同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源

那么怎样解决跨域问题的呢？

• 通过jsonp跨域

var script = document.createElement('script');
script.type = 'text/javascript';

// 传参并指定回调执行函数为onBack
script.src = 'http://www.....:8080/login?user=admin&callback=onBack';
document.head.appendChild(script);

// 回调执行函数
function onBack(res) {
  alert(JSON.stringify(res));
}

jsonp的原理

• 首先是利用script标签的src属性来实现跨域
• 通过将前端方法作为参数传递到服务器端，然后由服务器端注入参数之后再返回，实现服务器端向客户端通信
• 由于使用script标签的src属性，因此只支持get方法

• document.domain + iframe跨域

此方案仅限主域相同，子域不同的跨域应用场景

1. 父窗口：

<iframe id="iframe" src="http://child.domain.com/b.html"></iframe>
<script>
  document.domain = 'domain.com';
  var user = 'admin';
</script>

2. 子窗口：

document.domain = 'domain.com';
// 获取父窗口中变量
alert('get js data from parent ---> ' + window.parent.user);

• cors
• postMessage
• websocket
• nginx代理跨域
• nodejs中间件代理跨域

# 模块化

涉及面试题：为什么要使用模块化？都有哪几种方式可以实现模块化，各有什么特点？ 使用一个技术肯定是有原因的，那么使用模块化可以给我们带来以下好处

• 解决命名冲突
• 提供复用性
• 提高代码可维护性 立即执行函数

在早期，使用立即执行函数实现模块化是常见的手段，通过函数作用域解决了命名冲突、污染全局作用域的问题

(function(globalVariable){
   globalVariable.test = function() {}
   // ... 声明各种变量、函数都不会污染全局作用域
})(globalVariable)

AMD 和 CMD

鉴于目前这两种实现方式已经很少见到，所以不再对具体特性细聊，只需要了解这两者是如何使用的。

// AMD
define(['./a', './b'], function(a, b) {
  // 加载模块完毕可以使用
  a.do()
  b.do()
})
// CMD
define(function(require, exports, module) {
  // 加载模块
  // 可以把 require 写在函数体的任意地方实现延迟加载
  var a = require('./a')
  a.doSomething()
})

CommonJS

CommonJS最早是Node在使用，目前也仍然广泛使用，比如在Webpack中你就能见到它，当然目前在Node中的模块管理已经和CommonJS有一些区别了

// a.js
module.exports = {
    a: 1
}
// or
exports.a = 1

// b.js
var module = require('./a.js')
module.a // -> log 1

ar module = require('./a.js')
module.a
// 这里其实就是包装了一层立即执行函数，这样就不会污染全局变量了，
// 重要的是 module 这里，module 是 Node 独有的一个变量
module.exports = {
    a: 1
}
// module 基本实现
var module = {
  id: 'xxxx', // 我总得知道怎么去找到他吧
  exports: {} // exports 就是个空对象
}
// 这个是为什么 exports 和 module.exports 用法相似的原因
var exports = module.exports
var load = function (module) {
    // 导出的东西
    var a = 1
    module.exports = a
    return module.exports
};
// 然后当我 require 的时候去找到独特的
// id，然后将要使用的东西用立即执行函数包装下，over

另外虽然exports和module.exports用法相似，但是不能对exports直接赋值。因为var exports = module.exports这句代码表明了exports和module.exports享有相同地址，通过改变对象的属性值会对两者都起效，但是如果直接对exports赋值就会导致两者不再指向同一个内存地址，修改并不会对module.exports起效 ES Module ES Module是原生实现的模块化方案，与CommonJS有以下几个区别

1. CommonJS支持动态导入，也就是require(${path}/xx.js)，后者目前不支持，但是已有提案
2. CommonJS是同步导入，因为用于服务端，文件都在本地，同步导入即使卡住主线程影响也不大。而后者是异步导入，因为用于浏览器，需要下载文件，如果也采用同步导入会对渲染有很大影响
3. CommonJS在导出时都是值拷贝，就算导出的值变了，导入的值也不会改变，所以如果想更新值，必须重新导入一次。但是ES Module采用实时绑定的方式，导入导出的值都指向同一个内存地址，所以导入值会跟随导出值变化
4. ES Module会编译成require/exports来执行的

// 引入模块 API
import XXX from './a.js'
import { XXX } from './a.js'
// 导出模块 API
export function a() {}
export default function() {}

# 异步加载JS的方式有哪些？

• defer，只支持IE
• async：
• 创建script，插入到DOM中，加载完毕后callBack

# 那些操作会造成内存泄漏？

• 内存泄漏指任何对象在您不再拥有或需要它之后仍然存在
• setTimeout的第一个参数使用字符串而非函数的话，会引发内存泄漏
• 闭包使用不当

# XML和JSON的区别？

• 数据体积方面
  • JSON相对于XML来讲，数据的体积小，传递的速度更快些。
• 数据交互方面
  • JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互
• 数据描述方面
  • JSON对数据的描述性比XML较差
• 传输速度方面
  • JSON的速度要远远快于XML

# 说说你对AMD和Commonjs的理解

• CommonJS是服务器端模块的规范，Node.js采用了这个规范。CommonJS规范加载模块是同步的，也就是说，只有加载完成，才能执行后面的操作。AMD规范则是非同步加载模块，允许指定回调函数
• AMD推荐的风格通过返回一个对象做为模块对象，CommonJS的风格通过对module.exports或exports的属性赋值来达到暴露模块对象的目的

# 常见web安全及防护原理

• sql注入原理

  • 就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令

• 总的来说有以下几点

  • 永远不要信任用户的输入，要对用户的输入进行校验，可以通过正则表达式，或限制长度，对单引号和双"-"进行转换等
  • 永远不要使用动态拼装SQL，可以使用参数化的SQL或者直接使用存储过程进行数据查询存取
  • 永远不要使用管理员权限的数据库连接，为每个应用使用单独的权限有限的数据库连接
  • 不要把机密信息明文存放，请加密或者hash掉密码和敏感的信息 XSS原理及防范

• Xss(cross-site scripting)攻击指的是攻击者往Web页面里插入恶意html标签或者javascript代码。比如：攻击者在论坛中放一个看似安全的链接，骗取用户点击后，窃取cookie中的用户私密信息；或者攻击者在论坛中加一个恶意表单，当用户提交表单的时候，却把信息传送到攻击者的服务器中，而不是用户原本以为的信任站点 XSS防范方法

• 首先代码里对用户输入的地方和变量都需要仔细检查长度和对”<”,”>”,”;”,”’”等字符做过滤；其次任何内容写到页面之前都必须加以encode，避免不小心把html tag弄出来。这一个层面做好，至少可以堵住超过一半的XSS 攻击 XSS与CSRF有什么区别吗？

• XSS是获取信息，不需要提前知道其他用户页面的代码和数据包。CSRF是代替用户完成指定的动作，需要知道其他用户页面的代码和数据包。要完成一次CSRF攻击，受害者必须依次完成两个步骤

• 登录受信任网站A，并在本地生成Cookie

• 在不登出A的情况下，访问危险网站B CSRF的防御

• 服务端的CSRF方式方法很多样，但总的思想都是一致的，就是在客户端页面增加伪随机数

• 通过验证码的方法

# 为什么要有同源限制？

• 同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议
• 举例说明：比如一个黑客程序，他利用Iframe把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，他的页面就可以通过Javascript读取到你的表单中input中的内容，这样用户名，密码就轻松到手了。

# offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别

• offsetWidth/offsetHeight返回值包含content + padding + border，效果与e.getBoundingClientRect()相同
• clientWidth/clientHeight返回值只包含content + padding，如果有滚动条，也不包含滚动条
• scrollWidth/scrollHeight返回值包含content + padding + 溢出内容的尺寸

# javascript有哪些方法定义对象

• 对象字面量：var obj = {};
• 构造函数：var obj = new Object();
• Object.create():var obj = Object.create(Object.prototype);

# 常见兼容性问题？

• png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8
• 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一,，但是全局效率很低，一般是如下这样解决：

body,ul,li,ol,dl,dt,dd,form,input,h1,h2,h3,h4,h5,h6,p{
margin:0;
padding:0;
}

• IE下,event对象有x,y属性,但是没有pageX,pageY属性
• Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.

# 说你对promise的了解

• 依照Promise/A+的定义，Promise有四种状态：
  • pending:初始状态, 非fulfilled或rejected.
  • fulfilled:成功的操作.
  • rejected:失败的操作.
  • settled: Promise已被fulfilled或rejected，且不是pending
• 另外，fulfilled与rejected一起合称settled
• Promise对象用来进行延迟(deferred) 和异步(asynchronous) 计算 Promise 的构造函数
• 构造一个Promise，最基本的用法如下：

var promise = new Promise(function(resolve, reject) {
        if (...) {  // succeed
            resolve(result);
        } else {   // fails
            reject(Error(errMessage));
        }
    });

• Promise实例拥有then方法（具有then方法的对象，通常被称为thenable）。它的使用方法如下：

promise.then(onFulfilled, onRejected)

• 接收两个函数作为参数，一个在fulfilled的时候被调用，一个在rejected的时候被调用，接收参数就是future，onFulfilled对应resolve,onRejected对应reject

# 你觉得jQuery源码有哪些写的好的地方

• jquery源码封装在一个匿名函数的自执行环境中，有助于防止变量的全局污染，然后通过传入window对象参数，可以使window对象作为局部变量使用，好处是当jquery中访问window对象的时候，就不用将作用域链退回到顶层作用域了，从而可以更快的访问window对象。同样，传入undefined参数，可以缩短查找undefined时的作用域链
• jquery将一些原型属性和方法封装在了jquery.prototype中，为了缩短名称，又赋值给了jquery.fn，这是很形象的写法
• 有一些数组或对象的方法经常能使用到，jQuery将其保存为局部变量以提高访问速度
• jquery实现的链式调用可以节约代码，所返回的都是同一个对象，可以提高代码效率

# Node的应用场景

• 特点：
  • 1、它是一个Javascript运行环境
  • 2、依赖于Chrome V8引擎进行代码解释
  • 3、事件驱动
  • 4、非阻塞I/O
  • 5、单进程，单线程
• 优点：
  • 高并发（最重要的优点）
• 缺点：
  • 1、只支持单核CPU，不能充分利用CPU
  • 2、可靠性低，一旦代码某个环节崩溃，整个系统都崩溃

# 谈谈你对AMD、CMD的理解

• CommonJS是服务器端模块的规范，Node.js采用了这个规范。CommonJS规范加载模块是同步的，也就是说，只有加载完成，才能执行后面的操作。AMD规范则是非同步加载模块，允许指定回调函数
• AMD推荐的风格通过返回一个对象做为模块对象，CommonJS的风格通过对module.exports或exports的属性赋值来达到暴露模块对象的目的 es6模块 commonjs amd cmd
• CommonJS的规范中，每个JavaScript文件就是一个独立的模块上下文（module context），在这个上下文中默认创建的属性都是私有的。也就是说，在一个文件定义的变量（还包括函数和类），都是私有的，对其他文件是不可见的。
• CommonJS是同步加载模块,在浏览器中会出现堵塞情况，所以不适用
• AMD异步，需要定义回调define方式
• es6一个模块就是一个独立的文件，该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量 es6还可以导出类、方法，自动适用严格模式

# web开发中会话跟踪的方法有哪些

• cookie
• session
• url重写
• 隐藏input
• ip地址

# 说几条写JavaScript的基本规范

• 不要在同一行声明多个变量
• 请使用===/!==来比较true/false或者数值
• 使用对象字面量替代new Array这种形式
• 不要使用全局函数
• Switch语句必须带有default分支
• If语句必须使用大括号
• for-in循环中的变量 应该使用var关键字明确限定作用域，从而避免作用域污

# javascript创建对象的几种方式

javascript创建对象简单的说,无非就是使用内置对象或各种自定义对象，当然还可以用JSON；但写法有很多种，也能混合使用

• 对象字面量的方式

person={firstname:"Mark",lastname:"Yun",age:25,eyecolor:"black"};

• 用function来模拟无参的构造函数

 function Person(){}
    var person=new Person();//定义一个function，如果使用new"实例化",该function可以看作是一个Class
        person.name="Mark";
        person.age="25";
        person.work=function(){
        alert(person.name+" hello...");
    }
person.work();

• 用function来模拟参构造函数来实现（用this关键字定义构造的上下文属性）

function Pet(name,age,hobby){
       this.name=name;//this作用域：当前对象
       this.age=age;
       this.hobby=hobby;
       this.eat=function(){
          alert("我叫"+this.name+",我喜欢"+this.hobby+",是个程序员");
       }
    }
    var maidou =new Pet("麦兜",25,"coding");//实例化、创建对象
    maidou.eat();//调用eat方法

• 用工厂方式来创建（内置对象）

var wcDog =new Object();
     wcDog.name="旺财";
     wcDog.age=3;
     wcDog.work=function(){
       alert("我是"+wcDog.name+",汪汪汪......");
     }
     wcDog.work();

• 用原型方式来创建

function Dog(){

     }
     Dog.prototype.name="旺财";
     Dog.prototype.eat=function(){
     alert(this.name+"是个吃货");
     }
     var wangcai =new Dog();
     wangcai.eat();

• 用混合方式来创建

 function Car(name,price){
      this.name=name;
      this.price=price;
    }
     Car.prototype.sell=function(){
       alert("我是"+this.name+"，我现在卖"+this.price+"万元");
      }
    var camry =new Car("凯美瑞",27);
    camry.sell();

# 异步编程的实现方式

• 回调函数
  • 优点：简单、容易理解
  • 缺点：不利于维护，代码耦合高
• 事件监听(采用时间驱动模式，取决于某个事件是否发生)：
  • 优点：容易理解，可以绑定多个事件，每个事件可以指定多个回调函数
  • 缺点：事件驱动型，流程不够清晰
• 发布/订阅(观察者模式)
  • 类似于事件监听，但是可以通过‘消息中心’，了解现在有多少发布者，多少订阅者
• Promise对象
  • 优点：可以利用then方法，进行链式写法；可以书写错误时的回调函数；
  • 缺点：编写和理解，相对比较难
• Generator函数
  • 优点：函数体内外的数据交换、错误处理机制
  • 缺点：流程管理不方便
• async函数
  • 优点：内置执行器、更好的语义、更广的适用性、返回的是Promise、结构清晰。
  • 缺点：错误处理机制

# eval是做什么的

• 它的功能是把对应的字符串解析成JS代码并运行
• 应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）
• 由JSON字符串转换为JSON对象的时候可以用eval，var obj =eval('('+ str +')')

# ["1", "2", "3"].map(parseInt) 答案是多少

• [1, NaN, NaN]因为parseInt需要两个参数(val, radix)，其中radix表示解析时用的基数。
• map传了3个(element, index, array)，对应的radix不合法导致解析失败。

# javascript 代码中的"use strict";是什么意思

• use strict是一种ECMAscript 5添加的（严格）运行模式,这种模式使得 Javascript 在更严格的条件下运行,使JS编码更加规范化的模式,消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为

# JSON 的了解

• JSON(JavaScript Object Notation)是一种轻量级的数据交换格式
• 它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小
• JSON字符串转换为JSON对象:

var obj =eval('('+ str +')');
var obj = str.parseJSON();
var obj = JSON.parse(str);

• JSON对象转换为JSON字符串：

var last=obj.toJSONString();
var last=JSON.stringify(obj);

# 同步和异步的区别

• 同步：浏览器访问服务器请求，用户看得到页面刷新，重新发请求,等请求完，页面刷新，新内容出现，用户看到新内容,进行下一步操作
• 异步：浏览器访问服务器请求，用户正常操作，浏览器后端进行请求。等请求完，页面不刷新，新内容也会出现，用户看到新内容

# 谈谈你对ES6的理解

• 新增模板字符串（为JavaScript提供了简单的字符串插值功能）
• 箭头函数
• for-of（用来遍历数据—例如数组中的值。）
• arguments对象可被不定参数和默认参数完美代替。
• ES6将promise对象纳入规范，提供了原生的Promise对象。
• 增加了let和const命令，用来声明变量。
• 增加了块级作用域。
• let命令实际上就增加了块级作用域。
• 还有就是引入module模块的概念

# ECMAScript6 怎么写class么

• 这个语法糖可以让有OOP基础的人更快上手js，至少是一个官方的实现了
• 但对熟悉js的人来说，这个东西没啥大影响；一个Object.creat()搞定继承，比class简洁清晰的多

# 对web标准、可用性、可访问性的理解

• 可用性（Usability）：产品是否容易上手，用户能否完成任务，效率如何，以及这过程中用户的主观感受可好，是从用户的角度来看产品的质量。可用性好意味着产品质量高，是企业的核心竞争力
• 可访问性（Accessibility）：Web内容对于残障用户的可阅读和可理解性
• 可维护性（Maintainability）：一般包含两个层次，一是当系统出现问题时，快速定位并解决问题的成本，成本低则可维护性好。二是代码是否容易被人理解，是否容易修改和增强功能。

# 如何通过JS判断一个数组

1、instanceof操作符

var arr = [];
console.log(arr instanceof Array); // true

arr instanceof Array的含义是：判断Array的prorotype属性是不是在arr的原型链上，是返回true,否返回false;

2、对象的constructor属性

var arr = [];
console.log(arr.constructor === Array); // true

除了instanceof，每个对象还有constructor的属性，利用它似乎也能进行Array的判断

• instanceof 和 constructor 的缺陷

由于每个iframe都有一套自己的执行环境，跨frame实例化的对象彼此是不共享原型链的，因此导致instanceof和constructor失效。

3、Object.prototype.toString

function isArrayFn (o) {
  return Object.prototype.toString.call(o) === '[object Array]';
}
var arr = [1,2,3,1];
console.log(isArrayFn(arr)); // true

• 取得对象的一个内部属性[[Class]]，然后依据这个属性，返回一个类似于"[object Array]"的字符串作为结果(看过ECMA标准的应该都知道，[[]]用来表示语言内部用到的、外部不可直接访问的属性，称为“内部属性”)
• 利用这个方法，再配合call，我们可以取得任何对象的内部属性[[Class]]，然后把类型检测转化为字符串比较，以达到我们的目的
• JavaScript 标准文档中定义: [[Class]] 的值只可能是下面字符串中的一个： Arguments, Array, Boolean, Date, Error, Function, JSON, Math, Number, Object, RegExp, String

4、Array.isArray()

var a = new Array(123);
var b = new Date();
console.log(Array.isArray(a)); // true
console.log(Array.isArray(b)); // false

• ECMAScript5中引入了Array.isArray()方法，用于专门判断一个对象是不是数组，是返回true，不是返回false；目前所有主流浏览器和IE9+都对其进行了支持，IE8及以下浏览器不支持该方法

# 谈一谈let与var的区别

• let命令不存在变量提升，如果在let前使用，会导致报错
• 如果块区中存在let和const命令，就会形成封闭作用域
• 不允许重复声明，因此，不能在函数内部重新声明参数

# map与forEach的区别

• forEach方法，是最基本的方法，就是遍历与循环，默认有3个传参：分别是遍历的数组内容item、数组索引index、和当前遍历数组Array
• map方法，基本用法与forEach一致，但是不同的，它会返回一个新的数组，所以在callback需要有return值，如果没有，会返回undefined

# 谈一谈你理解的函数式编程

• 简单说，"函数式编程"是一种"编程范式"（programming paradigm），也就是如何编写程序的方法论
• 它具有以下特性：闭包和高阶函数、惰性计算、递归、函数是"第一等公民"、只用"表达式"

# 谈一谈箭头函数与普通函数的区别？

• 函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象
• 不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误
• 不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用Rest参数代替
• 不可以使用yield命令，因此箭头函数不能用作Generator函数

# Js动画与CSS动画区别及相应实现

• CSS3的动画的优点
  • 在性能上会稍微好一些，浏览器会对CSS3的动画做一些优化
  • 代码相对简单
• 缺点
  • 在动画控制上不够灵活
  • 兼容性不好
• JavaScript的动画正好弥补了这两个缺点，控制能力很强，可以单帧的控制、变换，同时写得好完全可以兼容IE6，并且功能强大。对于一些复杂控制的动画，使用javascript会比较靠谱。而在实现一些小的交互动效的时候，就多考虑考虑CSS吧

# JS 数组和对象的遍历方式，以及几种方式的比较

通常我们会用循环的方式来遍历数组。但是循环是 导致js 性能问题的原因之一。一般我们会采用下几种方式来进行数组的遍历

• for in循环
• for循环
• forEach
  • 这里的forEach回调中两个参数分别为value，index
  • forEach无法遍历对象
  • IE不支持该方法；Firefox和chrome支持
  • forEach无法使用break，continue跳出循环，且使用return是跳过本次循环
• 这两种方法应该非常常见且使用很频繁。但实际上，这两种方法都存在性能问题
• 在方式一中，for-in需要分析出array的每个属性，这个操作性能开销很大。用在key已知的数组上是非常不划算的。所以尽量不要用for-in，除非你不清楚要处理哪些属性，例如JSON对象这样的情况
• 在方式2中，循环每进行一次，就要检查一下数组长度。读取属性（数组长度）要比读局部变量慢，尤其是当array里存放的都是DOM元素，因为每次读取都会扫描一遍页面上的选择器相关元素，速度会大大降低

# gulp是什么

• gulp是前端开发过程中一种基于流的代码构建工具，是自动化项目的构建利器；它不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成
• Gulp的核心概念：流
• 流，简单来说就是建立在面向对象基础上的一种抽象的处理数据的工具。在流中，定义了一些处理数据的基本操作，如读取数据，写入数据等，程序员是对流进行所有操作的，而不用关心流的另一头数据的真正流向
• gulp正是通过流和代码优于配置的策略来尽量简化任务编写的工作
• Gulp的特点：
  • 易于使用：通过代码优于配置的策略，gulp 让简单的任务简单，复杂的任务可管理
  • 构建快速利用Node.js流的威力，你可以快速构建项目并减少频繁的IO操作
  • 易于学习通过最少的API，掌握gulp毫不费力，构建工作尽在掌握：如同一系列流管道

# 事件的各个阶段

• 1：捕获阶段 ---> 2：目标阶段 ---> 3：冒泡阶段
• document--->target目标 ---->document
• 由此，addEventListener的第三个参数设置为true和false的区别已经非常清晰了
  • true表示该元素在事件的“捕获阶段”（由外往内传递时）响应事件
  • false表示该元素在事件的“冒泡阶段”（由内向外传递时）响应事件

# let var const

let

• 允许你声明一个作用域被限制在块级中的变量、语句或者表达式
• let绑定不受变量提升的约束，这意味着let声明不会被提升到当前
• 该变量处于从块开始到初始化处理的“暂存死区” var
• 声明变量的作用域限制在其声明位置的上下文中，而非声明变量总是全局的
• 由于变量声明（以及其他声明）总是在任意代码执行之前处理的，所以在代码中的任意位置声明变量总是等效于在代码开头声明 const
• 声明创建一个值的只读引用 (即指针)
• 基本数据当值发生改变时，那么其对应的指针也将发生改变，故造成const申明基本数据类型时
• 再将其值改变时，将会造成报错， 例如const a = 3;a = 5时 将会报错
• 但是如果是复合类型时，如果只改变复合类型的其中某个Value项时， 将还是正常使用

# 正则表达式

正则表达式构造函数var reg=new RegExp(“xxx”)与正则表达字面量var reg=//有什么不同？匹配邮箱的正则表达式？

• 当使用RegExp()构造函数的时候，不仅需要转义引号（即\”表示”），并且还需要双反斜杠（即\\表示一个\）。使用正则表达字面量的效率更高 邮箱的正则匹配：

var regMail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;

# Javascript中callee和caller的作用？

• caller是返回一个对函数的引用，该函数调用了当前函数；
• callee是返回正在被执行的function函数，也就是所指定的function对象的正文

那么问题来了？如果一对兔子每月生一对兔子；一对新生兔，从第二个月起就开始生兔子；假定每对兔子都是一雌一雄，试问一对兔子，第n个月能繁殖成多少对兔子？（使用callee完成）

var result=[];
  function fn(n){  //典型的斐波那契数列
     if(n==1){
          return 1;
     }else if(n==2){
             return 1;
     }else{
          if(result[n]){
                  return result[n];
         }else{
                 //argument.callee()表示fn()
                 result[n]=arguments.callee(n-1)+arguments.callee(n-2);
                 return result[n];
         }
    }
 }

# window.onload和$(document).ready

原生JS的window.onload与Jquery的$(document).ready(function(){})有什么不同？如何用原生JS实现Jq的ready方法？

• window.onload()方法是必须等到页面内包括图片的所有元素加载完毕后才能执行。
• $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕

function ready(fn){
      if(document.addEventListener) {        //标准浏览器
          document.addEventListener('DOMContentLoaded', function() {
              //注销事件, 避免反复触发
              document.removeEventListener('DOMContentLoaded',arguments.callee, false);
              fn();            //执行函数
          }, false);
      }else if(document.attachEvent) {        //IE
          document.attachEvent('onreadystatechange', function() {
             if(document.readyState == 'complete') {
                 document.detachEvent('onreadystatechange', arguments.callee);
                 fn();        //函数执行
             }
         });
     }
 };

# addEventListener()和attachEvent()的区别

• addEventListener()是符合W3C规范的标准方法;attachEvent()是IE低版本的非标准方法
• addEventListener()支持事件冒泡和事件捕获; - 而attachEvent()只支持事件冒泡
• addEventListener()的第一个参数中,事件类型不需要添加on;attachEvent()需要添加'on'
• 如果为同一个元素绑定多个事件,addEventListener()会按照事件绑定的顺序依次执行,attachEvent()会按照事件绑定的顺序倒序执行

# （设计题）想实现一个对页面某个节点的拖曳？如何做？（使用原生JS）

• 给需要拖拽的节点绑定mousedown,mousemove,mouseup事件
• mousedown事件触发后，开始拖拽
• mousemove时，需要通过event.clientX和clientY获取拖拽位置，并实时更新位置
• mouseup时，拖拽结束
• 需要注意浏览器边界的情况

# Javascript全局函数和全局变量

全局变量

• Infinity代表正的无穷大的数值。
• NaN指示某个值是不是数字值。
• undefined指示未定义的值。 全局函数
• decodeURI()解码某个编码的URI。
• decodeURIComponent()解码一个编码的URI组件。
• `encodeURI() 把字符串编码为 URI。
• encodeURIComponent()把字符串编码为URI组件。
• escape()对字符串进行编码。
• eval()计算JavaScript字符串，并把它作为脚本代码来执行。
• isFinite()检查某个值是否为有穷大的数。
• isNaN()检查某个值是否是数字。
• Number()把对象的值转换为数字。
• parseFloat()解析一个字符串并返回一个浮点数。
• parseInt()解析一个字符串并返回一个整数。
• String()把对象的值转换为字符串。
• unescape()对由escape()编码的字符串进行解码

# 项目做过哪些性能优化？

• 减少 HTTP` 请求数
• 减少DNS查询
• 使用CDN
• 避免重定向
• 图片懒加载
• 减少DOM元素数量
• 减少DOM操作
• 使用外部JavaScript和CSS
• 压缩JavaScript、CSS、字体、图片等
• 优化CSS Sprite
• 使用iconfont
• 字体裁剪
• 多域名分发划分内容到不同域名
• 尽量减少iframe使用
• 避免图片src为空
• 把样式表放在link中
• 把脚本放在页面底部

# 浏览器缓存

浏览器缓存分为强缓存和协商缓存。当客户端请求某个资源时，获取缓存的流程如下

• 先根据这个资源的一些http header判断它是否命中强缓存，如果命中，则直接从本地获取缓存资源，不会发请求到服务器；
• 当强缓存没有命中时，客户端会发送请求到服务器，服务器通过另一些request header验证这个资源是否命中协商缓存，称为http再验证，如果命中，服务器将请求返回，但不返回资源，而是告诉客户端直接从缓存中获取，客户端收到返回后就会从缓存中获取资源；
• 强缓存和协商缓存共同之处在于，如果命中缓存，服务器都不会返回资源； 区别是，强缓存不对发送请求到服务器，但协商缓存会。
• 当协商缓存也没命中时，服务器就会将资源发送回客户端。
• 当ctrl+f5强制刷新网页时，直接从服务器加载，跳过强缓存和协商缓存；
• 当f5刷新网页时，跳过强缓存，但是会检查协商缓存； 强缓存
• Expires（该字段是http1.0时的规范，值为一个绝对时间的GMT格式的时间字符串，代表缓存资源的过期时间）
• Cache-Control:max-age（该字段是http1.1的规范，强缓存利用其max-age值来判断缓存资源的最大生命周期，它的值单位为秒） 协商缓存
• Last-Modified（值为资源最后更新时间，随服务器response返回）
• If-Modified-Since（通过比较两个时间来判断资源在两次请求期间是否有过修改，如果没有修改，则命中协商缓存）
• ETag（表示资源内容的唯一标识，随服务器response返回）
• If-None-Match（服务器通过比较请求头部的If-None-Match与当前资源的ETag是否一致来判断资源是否在两次请求之间有过修改，如果没有修改，则命中协商缓存）

# 防抖/节流

防抖

在滚动事件中需要做个复杂计算或者实现一个按钮的防二次点击操作。可以通过函数防抖动来实现

// 使用 underscore 的源码来解释防抖动

/**
 * underscore 防抖函数，返回函数连续调用时，空闲时间必须大于或等于 wait，func 才会执行
 *
 * @param  {function} func        回调函数
 * @param  {number}   wait        表示时间窗口的间隔
 * @param  {boolean}  immediate   设置为ture时，是否立即调用函数
 * @return {function}             返回客户调用函数
 */
_.debounce = function(func, wait, immediate) {
    var timeout, args, context, timestamp, result;

    var later = function() {
      // 现在和上一次时间戳比较
      var last = _.now() - timestamp;
      // 如果当前间隔时间少于设定时间且大于0就重新设置定时器
      if (last < wait && last >= 0) {
        timeout = setTimeout(later, wait - last);
      } else {
        // 否则的话就是时间到了执行回调函数
        timeout = null;
        if (!immediate) {
          result = func.apply(context, args);
          if (!timeout) context = args = null;
        }
      }
    };

    return function() {
      context = this;
      args = arguments;
      // 获得时间戳
      timestamp = _.now();
      // 如果定时器不存在且立即执行函数
      var callNow = immediate && !timeout;
      // 如果定时器不存在就创建一个
      if (!timeout) timeout = setTimeout(later, wait);
      if (callNow) {
        // 如果需要立即执行函数的话 通过 apply 执行
        result = func.apply(context, args);
        context = args = null;
      }

      return result;
    };
  };

整体函数实现 对于按钮防点击来说的实现

• 开始一个定时器，只要我定时器还在，不管你怎么点击都不会执行回调函数。一旦定时器结束并设置为 null，就可以再次点击了
• 对于延时执行函数来说的实现：每次调用防抖动函数都会判断本次调用和之前的时间间隔，如果小于需要的时间间隔，就会重新创建一个定时器，并且定时器的延时为设定时间减去之前的时间间隔。一旦时间到了，就会执行相应的回调函数 节流

防抖动和节流本质是不一样的。防抖动是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行

/**
 * underscore 节流函数，返回函数连续调用时，func 执行频率限定为 次 / wait
 *
 * @param  {function}   func      回调函数
 * @param  {number}     wait      表示时间窗口的间隔
 * @param  {object}     options   如果想忽略开始函数的的调用，传入{leading: false}。
 *                                如果想忽略结尾函数的调用，传入{trailing: false}
 *                                两者不能共存，否则函数不能执行
 * @return {function}             返回客户调用函数
 */
_.throttle = function(func, wait, options) {
    var context, args, result;
    var timeout = null;
    // 之前的时间戳
    var previous = 0;
    // 如果 options 没传则设为空对象
    if (!options) options = {};
    // 定时器回调函数
    var later = function() {
      // 如果设置了 leading，就将 previous 设为 0
      // 用于下面函数的第一个 if 判断
      previous = options.leading === false ? 0 : _.now();
      // 置空一是为了防止内存泄漏，二是为了下面的定时器判断
      timeout = null;
      result = func.apply(context, args);
      if (!timeout) context = args = null;
    };
    return function() {
      // 获得当前时间戳
      var now = _.now();
      // 首次进入前者肯定为 true
	  // 如果需要第一次不执行函数
	  // 就将上次时间戳设为当前的
      // 这样在接下来计算 remaining 的值时会大于0
      if (!previous && options.leading === false) previous = now;
      // 计算剩余时间
      var remaining = wait - (now - previous);
      context = this;
      args = arguments;
      // 如果当前调用已经大于上次调用时间 + wait
      // 或者用户手动调了时间
 	  // 如果设置了 trailing，只会进入这个条件
	  // 如果没有设置 leading，那么第一次会进入这个条件
	  // 还有一点，你可能会觉得开启了定时器那么应该不会进入这个 if 条件了
	  // 其实还是会进入的，因为定时器的延时
	  // 并不是准确的时间，很可能你设置了2秒
	  // 但是他需要2.2秒才触发，这时候就会进入这个条件
      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
	    // 没有的话就开启一个定时器
        // 并且不能不能同时设置 leading 和 trailing
        timeout = setTimeout(later, remaining);
      }
      return result;
    };
  };

# 谈谈变量提升？

当执行 JS 代码时，会生成执行环境，只要代码不是写在函数中的，就是在全局执行环境中，函数中的代码会产生函数执行环境，只此两种执行环境

• 接下来让我们看一个老生常谈的例子，var

b() // call b
console.log(a) // undefined

var a = 'Hello world'

function b() {
    console.log('call b')
}

在提升的过程中，相同的函数会覆盖上一个函数，并且函数优先于变量提升

b() // call b second

function b() {
    console.log('call b fist')
}
function b() {
    console.log('call b second')
}
var b = 'Hello world'

复制代码var会产生很多错误，所以在ES6中引入了let。let不能在声明前使用，但是这并不是常说的let不会提升，let提升了，在第一阶段内存也已经为他开辟好了空间，但是因为这个声明的特性导致了并不能在声明前使用

# defer和async

• defer并行加载js文件，会按照页面上script标签的顺序执行
• async并行加载js文件，下载完成立即执行，不会按照页面上script标签的顺序执行