弁言

Javascript是前端口试的重点，本文重点梳理下 Javascript 中的常考知识点，然后就一些轻易涌现的题目举行剖析。限于文章的篇幅，没法将知识点解说的四平八稳，本文只罗列了一些重难点，假如想要相识更多内容迎接点击我的博客。

一、变量范例

1.JS 的数据范例分类

根据 JavaScript 中的变量范例通报体式格局，分为基础数据范例和援用数据范例。个中基础数据范例包括Undefined、Null、Boolean、Number、String、Symbol (ES6新增，示意举世无双的值)，而援用数据范例统称为Object对象，主要包括对象、数组和函数。

在参数通报体式格局上，有所差别：

• 函数的参数假如是简朴范例，会将一个值范例的数值副本传到函数内部，函数内部不影响函数外部通报的参数变量
• 假如是一个参数是援用范例，会将援用范例的地点值复制给传入函数的参数，函数内部修正会影响通报

题目：基础范例和援用范例的区分

基础范例和援用范例存储于内存的位置差别，基础范例直接存储在栈中,而援用范例的对象存储在堆中，与此同时，在栈中存储了指针，而这个指针指向恰是堆中实体的肇端位置。下面经由历程一个小题目，来看下二者的主要区分：

// 基础范例
var a = 10
var b = a
b = 20
console.log(a)  // 10
console.log(b)  // 20

上述代码中，a b都是值范例，二者离别修正赋值，互相之间没有任何影响。再看援用范例的例子：

// 援用范例
var a = {x: 10, y: 20}
var b = a
b.x = 100
b.y = 200
console.log(a)  // {x: 100, y: 200}
console.log(b)  // {x: 100, y: 200}

上述代码中，a b都是援用范例。在实行了b = a以后，修正b的属性值，a的也随着变化。因为a和b都是援用范例，指向了一致个内存地点，即二者援用的是一致个值，因而b修正属性时，a的值随之修改

2.数据范例的推断

1）typeof

typeof返回一个示意数据范例的字符串，返回效果包括：number、boolean、string、symbol、object、undefined、function等7种数据范例，但不能推断null、array等

typeof Symbol(); // symbol 有用
typeof ''; // string 有用
typeof 1; // number 有用
typeof true; //boolean 有用
typeof undefined; //undefined 有用
typeof new Function(); // function 有用
typeof null; //object 无效
typeof [] ; //object 无效
typeof new Date(); //object 无效
typeof new RegExp(); //object 无效

2）instanceof

instanceof 是用来推断A是不是为B的实例，表达式为：A instanceof B，假如A是B的实例，则返回true,不然返回false。instanceof 运算符用来测试一个对象在其原型链中是不是存在一个组织函数的 prototype 属性，但它不能检测null 和 undefined

[] instanceof Array; //true
{} instanceof Object;//true
new Date() instanceof Date;//true
new RegExp() instanceof RegExp//true
null instanceof Null//报错
undefined instanceof undefined//报错

3）constructor

constructor作用和instanceof异常类似。但constructor检测 Object与instanceof不一样，还能够处置惩罚基础数据范例的检测。
不过函数的 constructor 是不稳定的，这个主要体现在把类的原型举行重写，在重写的历程当中很有能够涌现把之前的constructor给掩盖了，如许检测出来的效果就是不准确的。

4）Object.prototype.toString.call()

Object.prototype.toString.call() 是最准确最经常应用的体式格局。

Object.prototype.toString.call('') ;   // [object String]
Object.prototype.toString.call(1) ;    // [object Number]
Object.prototype.toString.call(true) ; // [object Boolean]
Object.prototype.toString.call(undefined) ; // [object Undefined]
Object.prototype.toString.call(null) ; // [object Null]
Object.prototype.toString.call(new Function()) ; // [object Function]
Object.prototype.toString.call(new Date()) ; // [object Date]
Object.prototype.toString.call([]) ; // [object Array]
Object.prototype.toString.call(new RegExp()) ; // [object RegExp]
Object.prototype.toString.call(new Error()) ; // [object Error]

3.浅拷贝与深拷贝

浅拷贝只复制指向某个对象的指针，而不复制对象自身，新旧对象照样同享一致块内存。

浅拷贝的完成体式格局（详见浅拷贝与深拷贝）：

• Object.assign()：需注重的是目标对象只要一层的时刻，是深拷贝
• Array.prototype.concat()
• Array.prototype.slice()

深拷贝就是在拷贝数据的时刻，将数据的一切援用构造都拷贝一份。简朴的说就是，在内存中存在两个数据构造完全雷同又互相自力的数据，将援用型范例举行复制，而不是只复制其援用关联。

深拷贝的完成体式格局：

• 热点的函数库lodash，也有供应_.cloneDeep用来做深拷贝
• jquery 供应一个$.extend能够用来做深拷贝
• JSON.parse(JSON.stringify())
• 手写递归要领

递归完成深拷贝的道理：要拷贝一个数据，我们一定要去遍历它的属性，假如这个对象的属性还是对象，继续应用这个要领，云云来去。

//定义检测数据范例的功用函数
function checkedType(target) {
  return Object.prototype.toString.call(target).slice(8, -1)
}
//完成深度克隆---对象/数组
function clone(target) {
  //推断拷贝的数据范例
  //初始化变量result 成为终究克隆的数据
  let result,
    targetType = checkedType(target)
  if (targetType === 'Object') {
    result = {}
  } else if (targetType === 'Array') {
    result = []
  } else {
    return target
  }
  //遍历目标数据
  for (let i in target) {
    //猎取遍历数据构造的每一项值。
    let value = target[i]
    //推断目标构造里的每一值是不是存在对象/数组
    if (checkedType(value) === 'Object' || checkedType(value) === 'Array') {
      //对象/数组里嵌套了对象/数组
      //继续遍历猎取到value值
      result[i] = clone(value)
    } else {
      //猎取到value值是基础的数据范例或许是函数。
      result[i] = value
    }
  }
  return result
}

二、作用域和闭包

1.实行高低文和实行栈

实行高低文就是当前 JavaScript 代码被剖析和实行时地点环境的笼统观点， JavaScript 中运转任何的代码都是在实行高低文中运转。
实行高低文的生命周期包括三个阶段：建立阶段→实行阶段→接纳阶段，我们重点引见建立阶段。

建立阶段（当函数被挪用，但未实行任何其内部代码之前）会做以下三件事：

• 建立变量对象：起首初始化函数的参数arguments，提拔函数声明和变量声明。
• 建立作用域链：下文会引见
• 肯定this指向：下文会引见

function test(arg){
    // 1. 形参 arg 是 "hi"
    // 2. 因为函数声明比变量声明优先级高，所以此时 arg 是 function
    console.log(arg);  
    var arg = 'hello'; // 3.var arg 变量声明被疏忽， arg = 'hello'被实行
    function arg(){
    console.log('hello world') 
    }
    console.log(arg);  
}
test('hi');
/* 输出：
function arg() {
    console.log('hello world');
    }
hello 
*/

这是因为当函数实行的时刻,起首会构成一个新的私有的作用域，然后顺次根据以下的步骤实行：

• 假如有形参，先给形参赋值
• 举行私有作用域中的预诠释，函数声明优先级比变量声明高，末了后者会被前者所掩盖，然则能够从新赋值
• 私有作用域中的代码从上到下实行

函数多了，就有多个函数实行高低文，每次挪用函数建立一个新的实行高低文，那怎样治理建立的那末多实行高低文呢？

JavaScript 引擎建立了实行栈来治理实行高低文。能够把实行栈以为是一个存储函数挪用的栈构造，遵照先进后出的准绳。

从上面的流程图，我们须要记着几个症结点：

• JavaScript实行在单线程上，一切的代码都是列队实行。
• 一开始浏览器实行全局的代码时，起首建立全局的实行高低文，压入实行栈的顶部。
• 每当进入一个函数的实行就会建立函数的实行高低文，而且把它压入实行栈的顶部。当前函数实行完成后，当前函数的实行高低文出栈，并守候渣滓接纳。
• 浏览器的JS实行引擎老是接见栈顶的实行高低文。
• 全局高低文只要唯一的一个，它在浏览器封闭时出栈。

2.作用域与作用域链

ES6 到来JavaScript 有全局作用域、函数作用域和块级作用域（ES6新增）。我们能够如许邃晓：作用域就是一个自力的土地，让变量不会外泄、暴露出去。也就是说作用域最大的用途就是断绝变量，差别作用域下同名变量不会有争执。
在引见作用域链之前，先要相识下自在变量，以下代码中，console.log(a)要取得a变量，然则在当前的作用域中没有定义a（可对照一下b）。当前作用域没有定义的变量，这成为 自在变量。

var a = 100
function fn() {
    var b = 200
    console.log(a) // 这里的a在这里就是一个自在变量
    console.log(b)
}
fn()

自在变量的值怎样取得 —— 向父级作用域(建立该函数的谁人父级作用域)寻觅。假如父级也没呢？再一层一层向上寻觅，直到找到全局作用域照样没找到，就宣布摒弃。这类一层一层的关联，就是作用域链 。

function F1() {
    var a = 100
    return function () {
        console.log(a)
    }
}
function F2(f1) {
    var a = 200
    console.log(f1())
}
var f1 = F1()
F2(f1) // 100 

上述代码中，自在变量a的值，从函数F1中查找而不是F2,这是因为当自在变量从作用域链中去寻觅，根据的是函数定义时的作用域链，而不是函数实行时。

3.闭包是什么

闭包这个观点也是JavaScript中比较笼统的观点，我个人邃晓，闭包是就是函数中的函数(其他言语不能如许),内里的函数能够接见表面函数的变量，表面的变量的是这个内部函数的一部份。

闭包的作用：

• 应用闭包能够接见函数中的变量。
• 能够使变量历久保留在内存中，生命周期比较长。

闭包不能滥用，不然会致使内存泄漏，影响网页的机能。闭包应用完了后，要马上开释资本，将援用变量指向null。

闭包主要有两个应用场景：

• 函数作为参数通报（见作用域部份例子）
• 函数作为返回值（以下例）

function outer() {
  var num = 0 //内部变量
  return function add() {
    //经由历程return返回add函数，就可以够在outer函数外接见了。
    num++ //内部函数有援用，作为add函数的一部份了
    console.log(num)
  }
}
var func1 = outer() //
func1() //实际上是挪用add函数， 输出1
func1() //输出2
var func2 = outer()
func2() // 输出1
func2() // 输出2

4.this周全剖析

先搞邃晓一个很主要的观点 —— this的值是在实行的时刻才确认，定义的时刻不能确认！ 为何呢 —— 因为this是实行高低文环境的一部份，而实行高低文须要在代码实行之前肯定，而不是定义的时刻。看以下例子：

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

// 状况2
function fn(){
  console.log(this);
}
var obj={fn:fn};
obj.fn(); //this->obj

// 状况3
function CreateJsPerson(name,age){
//this是当前类的一个实例p1
this.name=name; //=>p1.name=name
this.age=age; //=>p1.age=age
}
var p1=new CreateJsPerson("尹华芝",48);

// 状况4
function add(c, d){
  return this.a + this.b + c + d;
}
var o = {a:1, b:3};
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16
add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34

// 状况5
<button id="btn1">箭头函数this</button>
<script type="text/javascript">   
    let btn1 = document.getElementById('btn1');
    let obj = {
        name: 'kobe',
        age: 39,
        getName: function () {
            btn1.onclick = () => {
                console.log(this);//obj
            };
        }
    };
    obj.getName();
</script>

接下来我们逐一诠释上面几种状况

• 关于直接挪用 foo 来讲，不论 foo 函数被放在了什么地方，this 一定是 window
• 关于 obj.foo() 来讲，我们只须要记着，谁挪用了函数，谁就是 this，所以在这个场景下 foo 函数中的 this 就是 obj 对象
• 在组织函数形式中，类中(函数体中)涌现的this.xxx=xxx中的this是当前类的一个实例
• call、apply和bind：this 是第一个参数
• 箭头函数this指向:箭头函数没有本身的this，看其外层的是不是有函数，假如有，外层函数的this就是内部箭头函数的this，假如没有，则this是window。

三、异步

1.同步 vs 异步

同步，我的邃晓是一种线性实行的体式格局，实行的流程不能逾越。比如措辞后在用饭，吃完饭后在看手机，必需守候上一件事完了，才实行背面的事变。

异步，是一种并行处置惩罚的体式格局，没必要守候一个顺序实行完，能够实行别的的使命。比方说一个人边用饭，边看手机，边措辞，就是异步处置惩罚的体式格局。在顺序中异步处置惩罚的效果一般应用回调函数来处置惩罚效果。

// 同步
console.log(100)
alert(200);
console.log(300)  //100 200 300

// 异步
console.log(100) 
setTimeout(function(){ 
  console.log(200) 
}) 
console.log(300) //100 300 200 

2.异步和单线程

JS 须要异步的基础缘由是 JS 是单线程运转的，即在一致时间只能做一件事，不能“同心专心二用”。为了应用多核CPU的盘算才能，HTML5提出Web Worker范例，许可JavaScript剧本建立多个线程，然则子线程完全受主线程掌握，且不得操纵DOM。所以，这个新范例并没有转变JavaScript单线程的实质。

一个 Ajax 请求因为收集比较慢，请求须要 5 秒钟。假如是同步，这 5 秒钟页面就卡死在这里啥也干不了了。异步的话，就好很多了，5 秒守候就守候了，其他事变不延误做，至于那 5 秒钟守候是网速太慢，不是因为 JS 的缘由。

3.前端异步的场景

前端应用异步的场景

• 定时使命：setTimeout，setInterval
• 收集请求：ajax请求，动态加载
• 事宜绑定

4.Event Loop

一个完全的 Event Loop 历程，能够归纳综合为以下阶段：

• 一开始实行栈空,我们能够把实行栈以为是一个存储函数挪用的栈构造，遵照先进后出的准绳。micro 行列空，macro 行列里有且只要一个 script 剧本（团体代码）。
• 全局高低文（script 标签）被推入实行栈，同步代码实行。在实行的历程当中，会推断是同步使命照样异步使命，经由历程对一些接口的挪用，能够发生新的 macro-task 与 micro-task，它们会离别被推入各自的使命行列里。同步代码实行完了，script 剧本会被移出 macro 行列，这个历程实质上是行列的 macro-task 的实行和出队的历程。
• 上一步我们出队的是一个 macro-task，这一步我们处置惩罚的是 micro-task。但须要注重的是：当 macro-task 出队时，使命是一个一个实行的；而 micro-task 出队时，使命是一队一队实行的。因而，我们处置惩罚 micro 行列这一步，会逐一实行行列中的使命并把它出队，直到行列被清空。
• 实行衬着操纵，更新界面
• 搜检是不是存在 Web worker 使命，假如有，则对其举行处置惩罚
• 上述历程循环来去，直到两个行列都清空

接下来我们看道例子来引见上面流程：

Promise.resolve().then(()=>{
  console.log('Promise1')  
  setTimeout(()=>{
    console.log('setTimeout2')
  },0)
})
setTimeout(()=>{
  console.log('setTimeout1')
  Promise.resolve().then(()=>{
    console.log('Promise2')    
  })
},0)

末了输出效果是Promise1，setTimeout1，Promise2，setTimeout2

• 一开始实行栈的同步使命（这属于宏使命）实行终了，会去检察是不是有微使命行列，上题中存在(有且只要一个)，然后实行微使命行列中的一切使命输出Promise1，同时会天生一个宏使命 setTimeout2
• 然后去检察宏使命行列，宏使命 setTimeout1 在 setTimeout2 之前，先实行宏使命 setTimeout1，输出 setTimeout1
• 在实行宏使命setTimeout1时会天生微使命Promise2 ，放入微使命行列中，接着先去清空微使命行列中的一切使命，输出 Promise2
• 清空完微使命行列中的一切使命后，就又会去宏使命行列取一个，这回实行的是 setTimeout2

四、原型链与继续

1.原型和原型链

原型：在JavaScript中原型是一个prototype对象，用于示意范例之间的关联。

原型链：JavaScript万物都是对象，对象和对象之间也有关联，并非伶仃存在的。对象之间的继续关联，在JavaScript中是经由历程prototype对象指向父类对象，直到指向Object对象为止，如许就构成了一个原型指向的链条，专业术语称之为原型链。

var Person = function() {
  this.age = 18
  this.name = '匿名'
}
var Student = function() {}
//建立继续关联,父类实例作为子类原型
Student.prototype = new Person()
var s1 = new Student()
console.log(s1)

原型关联图：

当试图取得一个对象的某个属性时，假如这个对象自身没有这个属性，那末会去它的__proto__（即它的组织函数的prototype）中寻觅。假如一向找到最上层都没有找到，那末就宣布失利，返回undefined。最上层是什么 —— Object.prototype.__proto__ === null

2.继续

引见几种罕见继续体式格局（如需相识更多，请点击JavaScript罕见的六种继续体式格局）：

• 原型链+借用组织函数的组合继续

function Parent(value) {
  this.val = value
}
Parent.prototype.getValue = function() {
  console.log(this.val)
}
function Child(value) {
  Parent.call(this, value)
}
Child.prototype = new Parent()
const child = new Child(1)
child.getValue() // 1
child instanceof Parent // true

以上继续的体式格局中心是在子类的组织函数中经由历程 Parent.call(this) 继续父类的属性，然后转变子类的原型为 new Parent() 来继续父类的函数。

这类继续体式格局长处在于组织函数能够传参，不会与父类援用属性同享，能够复用父类的函数，然则也存在一个瑕玷就是在继续父类函数的时刻挪用了父类组织函数，致使子类的原型上多了不须要的父类属性，存在内存上的糟蹋。

• 寄生组合继续：这类继续体式格局对上一种组合继续举行了优化

function Parent(value) {
  this.val = value
}
Parent.prototype.getValue = function() {
  console.log(this.val)
}
function Child(value) {
  Parent.call(this, value)
}
Child.prototype = Object.create(Parent.prototype, {
  constructor: {
    value: Child,
    enumerable: false,
    writable: true,
    configurable: true
  }
})
const child = new Child(1)
child.getValue() // 1
child instanceof Parent // true

以上继续完成的中心就是将父类的原型赋值给了子类，而且将组织函数设置为子类，如许既处理了无用的父类属性题目，还能准确的找到子类的组织函数。

• ES6中class 的继续

ES6中引入了class症结字，class能够经由历程extends症结字完成继续，还能够经由历程static症结字定义类的静态要领,这比 ES5 的经由历程修正原型链完成继续，要清楚和轻易很多。须要注重的是，class症结字只是原型的语法糖，JavaScript继续仍然是基于原型完成的。

class Parent {
  constructor(value) {
    this.val = value
  }
  getValue() {
    console.log(this.val)
  }
}
class Child extends Parent {
  constructor(value) {
    super(value)
    this.val = value
  }
}
let child = new Child(1)
child.getValue() // 1
child instanceof Parent // true

class 完成继续的中心在于应用 extends 表明继续自哪一个父类，而且在子类组织函数中必需挪用 super，因为这段代码能够算作 Parent.call(this, value)。

五、DOM操纵与BOM操纵

1.DOM操纵

当网页被加载时，浏览器会建立页面的文档对象模子(DOM),我们能够以为 DOM 就是 JS 能辨认的 HTML 构造，一个一般的 JS 对象或许数组。接下来我们引见罕见DOM操纵：

• 新增节点和挪动节点

var div1 = document.getElementById('div1')
// 增添新节点
var p1 = document.createElement('p')
p1.innerHTML = 'this is p1'
div1.appendChild(p1) // 增添新建立的元素
// 挪动已有节点。注重，这里是“挪动”，并非拷贝
var p2 = document.getElementById('p2')
div1.appendChild(p2)

• 猎取父元素

var div1 = document.getElementById('div1')
var parent = div1.parentElement

• 猎取子元素

var div1 = document.getElementById('div1')
var child = div1.childNodes

• 删除节点

var div1 = document.getElementById('div1')
var child = div1.childNodes
div1.removeChild(child[0])

2.DOM事宜模子和事宜流

DOM事宜模子分为捕捉和冒泡。一个事宜发生后，会在子元素和父元素之间流传（propagation）。这类流传分红三个阶段。

（1）捕捉阶段：事宜从window对象自上而下向目标节点流传的阶段；

（2）目标阶段：真正的目标节点正在处置惩罚事宜的阶段；

（3）冒泡阶段：事宜从目标节点自下而上向window对象流传的阶段。

DOM事宜捕捉的详细流程

捕捉是从上到下，事宜先从window对象，然后再到document（对象），然后是html标签（经由历程document.documentElement猎取html标签），然后是body标签（经由历程document.body猎取body标签），然后根据一般的html构造一层一层往下传，末了抵达目标元素。

接下来我们看个事宜冒泡的例子：

// 事宜冒泡
<div id="outer">
    <div id="inner"></div>
</div>
......
window.onclick = function() {
    console.log('window');
};
document.onclick = function() {
    console.log('document');
};
document.documentElement.onclick = function() {
    console.log('html');
};
document.body.onclick = function() {
    console.log('body');
}
outer.onclick = function(ev) {
    console.log('outer');
};
inner.onclick = function(ev) {
    console.log('inner');
};

怎样阻挠冒泡？

经由历程event.stopPropagation() 要领阻挠事宜冒泡到父元素，阻挠任何父事宜处置惩罚顺序被实行。
我们能够在上例中inner元素的click事宜上，增添event.stopPropagation()这句话后，就阻挠了父事宜的实行，末了只打印了’inner’。

 inner.onclick = function(ev) {
    console.log('inner')
    ev.stopPropagation()
}

3.事宜代办(事宜托付)

因为事宜会在冒泡阶段向上流传到父节点，因而能够把子节点的监听函数定义在父节点上，由父节点的监听函数一致处置惩罚多个子元素的事宜。这类要领叫做事宜的代办。

我们设定一种场景，以下代码，一个<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绑定要领即可，如许不论点击的是哪一个子女元素，都邑根据冒泡流传的通报机制，把父容器的click行动触发，然后把对应的要领实行，根据事宜源，我们能够晓得点击的是谁，从而完成差别的事。

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

末了，应用代办的长处以下：

• 使代码简约
• 削减浏览器的内存占用

4.BOM 操纵

BOM（浏览器对象模子）是浏览器自身的一些信息的设置和猎取，比方猎取浏览器的宽度、高度，设置让浏览器跳转到哪一个地点。

• window.screen对象：包括有关用户屏幕的信息
• window.location对象：用于取得当前页面的地点(URL)，并把浏览器重定向到新的页面
• window.history对象：浏览汗青的行进退却等
• window.navigator对象：常经常应用来猎取浏览器信息、是不是挪动端接见等等

猎取屏幕的宽度和高度

console.log(screen.width)
console.log(screen.height)

猎取网址、协定、path、参数、hash 等

// 比方当前网址是 https://juejin.im/timeline/frontend?a=10&b=10#some
console.log(location.href)  // https://juejin.im/timeline/frontend?a=10&b=10#some
console.log(location.protocol) // https:
console.log(location.pathname) // /timeline/frontend
console.log(location.search) // ?a=10&b=10
console.log(location.hash) // #some

别的，另有挪用浏览器的行进、退却功用等

history.back()
history.forward()

猎取浏览器特征（即俗称的UA）然后辨认客户端，比方推断是不是是 Chrome 浏览器

var ua = navigator.userAgent
var isChrome = ua.indexOf('Chrome')
console.log(isChrome)

5.Ajax与跨域

Ajax 是一种异步请求数据的一种手艺，关于改良用户的体验和顺序的机能很有协助。
简朴地说，在不须要从新革新页面的状况下，Ajax 经由历程异步请求加载背景数据，并在网页上显现出来。罕见应用场景有表单考证是不是登入胜利、百度搜刮下拉框提醒和快递单号查询等等。Ajax的目标是进步用户体验，较少收集数据的传输量。

怎样手写 XMLHttpRequest 不借助任何库

var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function () {
    // 这里的函数异步实行
    if (xhr.readyState == 4) {
        if (xhr.status == 200) {
            alert(xhr.responseText)
        }
    }
}
xhr.open("GET", "/api", false)
xhr.send(null)

因为浏览器出于平安斟酌，有同源战略。也就是说，假如协定、域名或许端口有一个差别就是跨域，Ajax 请求会失利。

那末是出于什么平安斟酌才会引入这类机制呢？ 实在主如果用来防备 CSRF 进击的。简朴点说，CSRF 进击是应用用户的登录态提议歹意请求。

然后我们来斟酌一个题目，请求跨域了，那末请求究竟发出去没有？ 请求必定是发出去了，然则浏览器阻拦了相应。

罕见的几种跨域处理方案（详细怎样完成详见九种跨域体式格局完成道理（完全版））：

• JSONP：应用同源战略对<script>标签不受限定,不过只支撑GET请求
• CORS：完成 CORS 通讯的症结是后端，服务端设置 Access-Control-Allow-Origin 就可以够开启，备受推重的跨域处理方案，比 JSONP 简朴很多
• Node中间件代办或nginx反向代办：主如果经由历程同源战略对服务器不加限定

6.存储

sessionStorage 、localStorage 和 cookie 之间的区分

• 共同点：都是保留在浏览器端，且都遵照同源战略。
• 差别点：在于生命周期与作用域的差别

作用域：localStorage只要在雷同的协定、雷同的主机名、雷同的端口下，就可以读取/修正到一致份localStorage数据。sessionStorage比localStorage更严苛一点，除了协定、主机名、端口外，还请求在一致窗口（也就是浏览器的标签页）下

生命周期：localStorage 是耐久化的当地存储，存储在个中的数据是永久不会逾期的，使其消逝的唯一方法是手动删除；而 sessionStorage 是临时性的当地存储，它是会话级别的存储，当会话完毕（页面被封闭）时，存储内容也随之被开释。

六、模块化

几种罕见模块化范例的简介（详情请点击前端模块化详解(完全版)）：

• CommonJS范例主要用于服务端编程，加载模块是同步的，这并不适合在浏览器环境，因为同步意味着壅塞加载，浏览器资本是异步加载的，因而有了AMD CMD处理方案
• AMD范例在浏览器环境中异步加载模块，而且能够并行加载多个模块。不过，AMD范例开辟本钱高，代码的浏览和誊写比较难题，模块定义体式格局的语义不顺畅。
• CMD范例与AMD范例很类似，都用于浏览器编程，依靠就近，耽误实行，能够很轻易在Node.js中运转。不过，依靠SPM 打包，模块的加载逻辑着重
• ES6 在言语范例的层面上，完成了模块功用，而且完成得相称简朴，完全能够庖代 CommonJS 和 AMD 范例，成为浏览器和服务器通用的模块处理方案

迎接关注民众号：前端工匠，你的生长我们一同见证！

优良交换群	微信民众号

参考资料

• 浪里行舟博客
• 前端口试之道
• Web前端口试指点
• 前端入门4–DOM和BOM
• Web 前端口试指南与高频考题剖析