JavaScript代码的整个执行过程，分为两个阶段，代码编译阶段与代码执行阶段。

• 编译阶段：由编译器完成，将代码翻译成可执行代码。这个阶段作用域规则会确定。

• 执行阶段：由引擎完成，主要任务是执行可执行代码。执行上下文在这个阶段创建。

作用域

简单来说作用域就是一个区域，没有变量。作用域可以嵌套。作用域规定了如何查找变量，也就是确定当前执行代码对变量的访问权限。作用域在函数定义时就已经确定了，不是在函数调用确定。

ES6 之前 JavaScript 只有全局作用域和函数作用域。ES6 后，增加了块级作用域（最近大括号的作用范围）, 通过let 和 const 声明的变量。

作用域其实由两部分组成：

1. 记录作用域内变量信息（假设变量，常量，函数等统称为变量）和代码结构信息的东西，称之为 Environment Record。

2. 一个引用 __outer__，这个引用指向当前作用域的父作用域。全局作用域的 __outer__ 为 null。

词法作用域

JavaScript 采用词法作用域(lexical scoping)，也就是静态作用域。

所谓词法（代码）作用域，就是代码在编写过程中体现出来的作用范围，代码一旦写好了，没有运行之前（不用执行），作用范围就已经确定好了，这个就是所谓的词法作用域。

词法作用域的规则:

1. 函数允许访问函数外部的数据

2. 整个代码结构中只有函数才能限定作用域

3. 作用规则首先使用变量提升规则分析

4. 如果当前作用规则里面有该名字，则不考虑外面的外面的名字

var a = 1;
function out() {
  var a = 2;
  inner();
}


function inner() {
  console.log(a)
}
out();  //====>  1

作用域链

当查找变量的时候，会先从当前上下文的变量对象中查找，如果没有找到，就会从父级(词法层面上的父级)执行上下文的变量对象中查找，一直找到全局上下文的变量对象，也就是全局对象。这样由多个执行上下文的变量对象构成的指针链表就叫做作用域链。

作用域链本质上是一个指向当前环境与上层环境的一系列变量对象的指针列表（它只引用但不实际包含变量对象），作用域链保证了当前执行环境对符合访问权限的变量和函数的有序访问。

例子：
用一个数组scopeChain来表示作用域链，数组的第一项scopeChain[0]为作用域链的最前端，而数组的最后一项，为作用域链的最末端，所有的最末端都为全局变量对象。

var a = 1;             
function out() {
    var b = 2;
    function inner() {
        var c = 3;
        console.log(a + b + c);
    }
    inner();          
}
out();

首先，代码开始运行时就创建了全局上下文环境，接着运行到out()时创建 out函数的执行上下文，最后运行到inner()时创建 inner函数的执行上下文，我们设定他们的变量对象分别为VO(global)，VO(out), VO(inner)。

当函数创建时，执行上下文为：

// 全局上下文环境
globalEC = {
  VO: {
    out: <out reference>,  // 表示 out 的地址引用
    a: undefined
  },
  scopeChain: [VO(global)], // 作用域链
}


// out 函数的执行上下文
outEC = {
  VO: {
    arguments: {...},
    inner: <inner reference>,  // 表示 inner 的地址引用
    b: undefined
  },
  scopeChain: [VO(out), VO(global)], // 作用域链
}


// inner 函数的执行上下文
innerEC = {
  VO: {
    arguments: {...},  
    c: undefined,
  }, 
  scopeChain: [VO(inner), VO(out), VO(global)], // 作用域链
}

执行上下文

简单来说，当在代码执行阶段执行到一个函数的时候，就会进行准备工作，这里的“准备工作”，就叫做"执行上下文(EC)"，也叫执行上下文环境，也叫执行环境。js引擎创建了执行上下文栈（Execution context stack，ECS）来管理执行上下文。

当调用一个函数时，一个新的执行上下文就会被创建。而一个执行上下文的生命周期可以分为两个阶段：

• 创建阶段：在这个阶段，执行上下文会分别创建变量对象，建立作用域链，以及确定this的指向。

• 代码执行阶段：开始执行代码，会完成变量赋值，函数引用，以及执行其他代码。

特点

1. 处于活动状态的执行上下文环境只有一个, 只有栈顶的上下文处于活动状态，执行其中的代码。

2. 函数每调用一次，都会产生一个新的执行上下文环境。

3. 全局上下文在代码开始执行时就创建，只有唯一的一个，永远在栈底，浏览器窗口关闭时出栈。

4. 函数被调用的时候创建上下文环境。

变量对象

变量对象的创建过程

1. 建立arguments对象。检查当前上下文中的参数，建立该对象下的属性与属性值。

2. 检查当前上下文的函数声明，也就是使用function关键字声明的函数。在变量对象中以函数名建立一个属性，属性值为指向该函数所在内存地址的引用。如果函数名的属性已经存在，那么该属性将会被新的引用所覆盖。

3. 检查当前上下文中的变量声明，每找到一个变量声明，就在变量对象中以变量名建立一个属性，属性值为undefined。如果该变量名的属性已经存在，为了防止同名的函数被修改为undefined，则会直接跳过，原属性值不会被修改。

活动对象

变量对象与活动对象其实都是同一个对象，只是处于执行上下文的不同生命周期。不过只有处于函数调用栈栈顶的执行上下文中的变量对象，才会变成活动对象。

执行上下文栈

执行上下文可以理解为当前代码的执行环境，JavaScript中的运行环境大概包括三种情况：

• 全局环境：JavaScript代码运行起来会首先进入该环境

• 函数环境：当函数被调用执行时，会进入当前函数中执行代码

• eval

在代码开始执行时，首先会产生一个全局执行上下文环境，调用函数时，会产生函数执行上下文环境，函数调用完成后，它的执行上下文环境以及其中的数据都会被销毁，重新回到全局执行环境，网页关闭后全局执行环境也会销毁。其实这是一个压栈出栈的过程，全局上下文环境永远在栈底，而当前正在执行的函数上下文在栈顶。

var a = 1;             // 1.进入全局上下文环境
function out() {
    var b = 2;
    function inner() {
        var c = 3;
        console.log(a + b + c);
    }
    inner();          // 3. 进入inner函数上下文环境
}
out(); // 2. 进入out函数上下文环境

以上代码的执行会经历以下过程：

1. 当代码开始执行时就创建全局执行上下文环境，全局上下文入栈。

2. 全局上下文入栈后，其中的代码开始执行，进行赋值、函数调用等操作，执行到out()时，激活函数out创建自己的执行上下文环境，out函数上下文入栈。

3. out函数上下文入栈后，其中的代码开始执行，进行赋值、函数调用等操作，执行到inner()时，激活函数inner创建自己的执行上下文环境，inner函数上下文入栈。

4. inner函数上下文入栈后，其中的代码开始执行，进行赋值、函数调用、打印等操作，由于里面没有可以生成其他执行上下文的需要，所有代码执行完毕后，inner函数上下文出栈。

5. inner函数上下文出栈，又回到了out函数执行上下文环境，接着执行out函数中后面剩下的代码，由于后面没有可以生成其他执行上下文的需要，所有代码执行完毕后，out函数上下文出栈。

6. out函数上下文出栈后，又回到了全局执行上下文环境，直到浏览器窗口关闭，全局上下文出栈。

作用域与执行上下文区别

作用域只是一个“地盘”，其中没有变量。变量是通过作用域对应的执行上下文环境中的变量对象来实现的。所以作用域是静态观念的，而执行上下文环境是动态上的。有闭包存在时，一个作用域存在两个上下文环境也是有的。

同一个作用域下，对同一个函数的不同的调用会产生不同的执行上下文环境，继而产生不同的变量的值，所以，作用域中变量的值是在执行过程中确定的，而作用域是在函数创建时就确定的。

如果要查找一个作用域下某个变量的值，就需要找到这个作用域对应的执行上下文环境，再在其中找到变量的值。

变量提升

在Javascript中，函数及变量的声明都将被提升到函数的最顶部，提升的仅仅是变量的声明，变量的赋值并不会被提升。函数的声明与变量的声明是不一样的，函数表达式和变量表达式只是其声明被提升，函数声明是函数的声明和实现都被提升。

function foo() {  
  console.log("global foo");  
}  


function bar() {  
   console.log("global bar");  
}  


//定义全局变量  
var v = "global var";  


function hoistMe() {
   // var bar; 被提升到顶部，并未实现
   // var v;
   console.log(typeof foo); //function  
   console.log(typeof bar); //undefined  
   console.log(v); //undefined  


   // 函数里面定义了同名的函数和变量，无论在函数的任何位置定义这些函数和和变量，它们都将被提升到函数的最顶部。


   foo(); //local foo  
   bar(); //报错，TypeError "bar is not a function"


    //函数声明，变量foo以及其实现被提升到hoistMe函数顶部  
   function foo() {  
     alert("local foo");  
   }  


   //函数表达式,仅变量bar被提升到函数顶部，实现没有被提升  
   var bar = function() {  
       alert("local bar");  
   };  


   //定义局部变量  
   var v = "local";  
}

let 变量提升

console.log(a); // Uncaught ReferenceError: a is not defined
let a = "I am a";


let b = "I am outside B";
if(true){
    console.log(b); // Uncaught ReferenceError: b is not defined
    let b = " I am inside B";
}

如果b没有变量提升，执行到console.log时应该是输出全局作用域中的b，而不是出现错误。

我们可以推知，这里确实出现了变量提升，而我们不能够访问的原因事实上是因为let的死区设计：当前作用域顶部到该变量声明位置中间的部分，都是该let变量的死区，在死区中，禁止访问该变量。由此，我们给出结论，let声明的变量存在变量提升， 但是由于死区我们无法在声明前访问这个变量。

var let 区别

1. var声明的变量，只有函数才能为它创建新的作用域；
   let声明的变量，支持块级作用域，花括号就能为它创建新的作用域；

2. 相同作用域，var可以反复声明相同标识符的变量，而let是不允许的;

3. let声明的变量禁止在声明前访问

// 全局变量
var i = 0 ;
// 定义外部函数
function outer(){
    // 访问全局变量
    console.log(i); // 0


    function inner1(){
        console.log(i); // 0
    }


    function inner2(){
        console.log(i); // undefined
        var i = 1;
        console.log(i); // 1
    }


    inner1();
    inner2();
    console.log(i); // 0
}

闭包

闭包就是指有权访问另一个函数作用域中的变量的函数。

官方解释：闭包是由函数以及创建该函数的词法环境组合而成。这个环境包含了这个闭包创建时所能访问的所有局部变量。(词法作用域)
通俗解释：闭包的关键在于：外部函数调用之后其变量对象本应该被销毁，但闭包的存在使我们仍然可以访问外部函数的变量对象。

当某个函数被掉用的时候，会创建一个执行环境及相应的作用域链。然后使用arguments和其他命名参数的值来初始化函数的活动对象。但在作用域链中，外部函数的活动对象始终处于第二位，外部函数的外部函数的活动对象处于第三位...直至作为作用域链终点的全局执行环境。

作用域链本质上是一个指向变量对象的指针列表，他只引用但不实际包含变量对象。

无论什么时候在函数中访问一个变量时，就会从作用域链中搜索具有相同名字的变量，一般来讲，当函数执行完毕，局部活动对象就会被销毁，内存中仅保存全部作用域的活动对象。但是，闭包不同。

创建闭包: 在一个函数内部创建另一个函数

function add() {
  let a = 1;
  let b = 3;
  function closure() {
     b++;
     return a + b;
  }
  return closure;
}
// 闭包的作用域链包含着它自己的作用域，以及包含它的函数的作用域和全局作用域。

生命周期

通常，函数的作用域及其所有变量都会在函数执行结束后被销毁。但是，在创建了一个闭包以后，这个函数的作用域就会一直保存到闭包不存在为止。

当闭包中的函数closure从add中返回后，它的作用域链被初始化为包含add函数的活动对象和全局变量对象。这样closure就可以访问在add中定义的所有变量。

更重要的是，add函数在执行完毕后，也不会销毁，因为closure函数的作用域链仍然在引用这个活动对象。

换句话说，当add返回后，其执行环境的作用域链被销毁，但它的活动对象仍然在内存中，直至closure被销毁。

function add(x) {
  function closure(y) {
     return x + y;
  }
  return closure;
}

let add2 = add(2);
let add5 = add(5);
// add2 和 add5 共享相同的函数定义，但是保存了不同的环境
// 在add2的环境中，x为5。而在add5中，x则为10
console.log(add2(3)); // 5
console.log(add5(10)); // 15

// 释放闭包的引用
add2 = null;
add5 = null;

闭包中的this对象

var name = 'window';
var obj = {
  name: 'object',
  getName: () => {
    return () => {
      return this.name;
    }
  }
}
console.log(obj.getName()()); // window

obj.getName()()是在全局作用域中调用了匿名函数，this指向了window。
函数名与函数功能是分割开的，不要认为函数在哪里，其内部的this就指向哪里。
window才是匿名函数功能执行的环境。

使用注意点

1）由于闭包会让包含函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

使用

1. 模仿块级作用域

2. 私有变量

3. 模块模式

在循环中创建闭包：一个常见错误

function show(i) {
  console.log(i);
}


function showCallback(i) {
  return () => {
    show(i);
  };
}


// 测试1【3，3，3】
const testFunc1 = () => {
  // var i;
  for (var i = 0; i < 3; i++) {
    setTimeout(() => show(i), 300);
  }
}


// 测试2 【0，1，2】
const testFunc2 = () => {
  for (var i = 0; i < 3; i++) {
    setTimeout(showCallback(i), 300);
  }
}


// 测试3【0，1， 2】 闭包,立即执行函数
// 在闭包函数内部形成了局部作用域，每循环一次，形成一个自己的局部作用域
const testFunc3 = () => {
  for (var i = 0; i < 3; i++) {
    (() => {
       setTimeout(() => show(i), 300);
    })(i);
  }
}


// 测试4【0，1， 2】let
const testFunc4 = () => {
  for (let i = 0; i < 3; i++) {
    setTimeout(() => show(i), 300);
  }
}

setTimeout()函数回调属于异步任务，会出现在宏任务队列中，被压到了任务队列的最后，在这段代码应该是for循环这个同步任务执行完成后才会轮到它

测试1错误原因：赋值给 setTimeout 的是闭包。这些闭包是由他们的函数定义和在 testFunc1 作用域中捕获的环境所组成的。这三个闭包在循环中被创建，但他们共享了同一个词法作用域，在这个作用域中存在一个变量i。这是因为变量i使用var进行声明，由于变量提升，所以具有函数作用域。当onfocus的回调执行时，i的值被决定。由于循环在事件触发之前早已执行完毕，变量对象i（被三个闭包所共享）已经指向了i的最后一个值。

测试2正确原因: 所有的回调不再共享同一个环境， showCallback 函数为每一个回调创建一个新的词法环境。在这些环境中，i 指向数组中对应的下标。

测试4正确原因：JS中的for循环体比较特殊，每次执行都是一个全新的独立的块作用域，用let声明的变量传入到 for循环体的作用域后，不会发生改变，不受外界的影响。

this指向问题

this 就是一个指针，指向我们调用函数的对象。
执行上下文: 是语言规范中的一个概念，用通俗的话讲，大致等同于函数的执行“环境”。具体的有：变量作用域（和 作用域链条，闭包里面来自外部作用域的变量），函数参数，以及 this 对象的值。

找出 this 的指向

this 的值并不是由函数定义放在哪个对象里面决定，而是函数执行时由谁来唤起决定。

var name = "Jay Global";
var person = {
    name: 'Jay Person',
    details: {
        name: 'Jay Details',
        print: function() {
            return this.name;
        }
    },
    print: function() {
        return this.name;
    }
};


console.log(person.details.print());  // 【details对象调用的print】Jay Details
console.log(person.print());          // 【person对象调用的print】Jay Person


var name1 = person.print;
var name2 = person.details;


console.log(name1()); // 【name1前面没有调用对象，所以是window】Jay Global
console.log(name2.print()) // 【name2对象调用的print】Jay Details

this和箭头函数

箭头函数按词法作用域来绑定它的上下文，所以 this 实际上会引用到原来的上下文。箭头函数保持它当前执行上下文的词法作用域不变，而普通函数则不会。换句话说，箭头函数从包含它的词法作用域中继承到了 this 的值。
匿名函数，它不会作为某个对象的方法被调用, 因此，this 关键词指向了全局 window 对象。

var object = {
    data: [1,2,3],
    dataDouble: [1,2,3],
    double: function() {
        console.log(this); // object
        return this.data.map(function(item) { // this是当前object,object调用的double
            console.log(this);   // 传给map()的那个匿名函数没有被任一对象调用，所以是window
            return item * 2;
        });
    },
    doubleArrow: function() {
        console.log(this); // object
        return this.dataDouble.map(item => { // this是当前object,object调用的doubleArrow
            console.log(this);      // doubleArrow是object调用的，这就是上下文，所以是window
            return item * 2;
        });
    }
};
object.double();
object.doubleArrow();

明确设置执行上下文

在 JavaScript 中通过使用内置的特性开发者就可以直接操作执行上下文了。这些特性包括：

• bind()：不需要执行函数就可以将 this 的值准确设置到你选择的一个对象上。通过逗号隔开传递多个参数。设置好 this 关键词后不会立刻执行函数。

• apply()：将 this 的值准确设置到你选择的一个对象上。apply(thisObj, argArray)接收两个参数，thisObj是函数运行的作用域（this），argArray是参数数组，数组的每一项是你希望传递给函数的参数。如果没有提供argArray和thisObj任何一个参数，那么Global对象将用作thisObj。最后，会立刻执行函数。

• call()：将 this 的值准确设置到你选择的一个对象上。然后像bind 一样通过逗号分隔传递多个参数给函数。语法：call(thisObj,arg1,arg2,..., argn);，如果没有提供thisObj参数，那么Global对象被用于thisObj。最后，会立刻执行函数。

this 和 bind

var bobObj = {
    name: "Bob"
};
function print() {
    return this.name;
}
var printNameBob = print.bind(bobObj);
console.log(printNameBob()); // Bob

this 和 call

function add(a, b) { 
    return a + b; 
}
function sum() {
    return Array.prototype.reduce.call(arguments, add);
}
console.log(sum(1,2,3,4)); // 10

this 和 apply

apply 就是接受数组版本的call。

Math.min(1,2,3,4); // 返回 1
Math.min([1,2,3,4]); // 返回 NaN。只接受数字
Math.min.apply(null, [1,2,3,4]); // 返回 1


function Person(name, age){  
  this.name = name;  
  this.age = age;  
}  


function Student(name, age, grade) {  
  Person.apply(this, arguments);  //Person.call(this, name, age);
  this.grade = grade;  
}
var student = new Student("sansan", 21, "一年级");  


console.log("student:", student); // {name: 'sansan'; age: '21', grade: '一年级'}

如果你的参数本来就存在一个数组中，那自然就用 apply，如果参数比较散乱相互之间没什么关联，就用 call。

对象属性类型

数据属性

数据属性包含一个数据值的位置，在这个位置可以读取和写入值，数据属性有4个描述其行为的特性：

• Configurable: 表示是否通过delete删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性。默认值是true

• Enumerable: 表示能否通过for-in循环返回属性。默认值是true

• Writable: 表述能否修改属性。默认值是true

• Value: 包含这个属性的数据值。默认值是true

访问器属性

函数式编程

函数式编程是一种编程范式，是一种构建计算机程序结构和元素的风格，它把计算看作是对数学函数的评估，避免了状态的变化和数据的可变。

纯函数

纯函数是稳定的、一致的和可预测的。给定相同的参数，纯函数总是返回相同的结果。

特性

1. 如果给定相同的参数，则得到相同的结果

我们想要实现一个计算圆的面积的函数。
不是纯函数会这样做:

 let PI = 3.14;    
  const calculateArea = (radius) => radius * radius * PI; 
  // 它使用了一个没有作为参数传递给函数的全局对象
  calculateArea(10); // returns 314.0

纯函数：

let PI = 3.14;    
 const calculateArea = (radius, pi) => radius * radius * pi; 
 // 现在把 PI 的值作为参数传递给函数，这样就没有外部对象引入。
 calculateArea(10, PI); // returns 314.0

2. 无明显副作用

纯函数不会引起任何可观察到的副作用。可见副作用的例子包括修改全局对象或通过引用传递的参数。

现在，实现一个函数，接收一个整数并返对该整数进行加1操作且返回：

let counter = 1;
function increaseCounter(value) {      
  counter = value + 1;   
}    
increaseCounter(counter);   
console.log(counter); // 2

该非纯函数接收该值并重新分配counter，使其值增加1。
函数式编程不鼓励可变性(修改全局对象)。

 let counter = 1;
 const increaseCounter = (value) => value + 1;   // 函数返回递增的值，而不改变变量的值
 increaseCounter(counter); // 2    
 console.log(counter); // 1

3. 引用透明性

如果一个函数对于相同的输入始终产生相同的结果，那么它可以看作透明的。
实现一个square 函数：

const square = (n) => n * n;
square(2); // 4 将2作为square函数的参数传递始终会返回4

可以把square(2)换成4，我们的函数就是引用透明的。

纯函数使用

单元测试

纯函数代码肯定更容易测试，不需要 mock 任何东西。因此我们可以使用不同的上下文对纯函数进行单元测试。

一个简单的例子是接收一组数字，并对每个数进行加 1 :

let list = [1, 2, 3, 4, 5];    
const incrementNumbers = (list) => list.map(number => number + 1);
incrementNumbers(list); // [2, 3, 4, 5, 6]

对于输入[1,2,3,4,5]，预期输出是[2,3,4,5,6]。

纯函数也可以被看作成值并用作数据使用

• 从常量和变量中引用它。

• 将其作为参数传递给其他函数。

• 作为其他函数的结果返回它。

其思想是将函数视为值，并将函数作为数据传递。通过这种方式，我们可以组合不同的函数来创建具有新行为的新函数。

假如我们有一个函数，它对两个值求和，然后将值加倍，如下所示：

const doubleSum = (a, b) => (a + b) * 2;

对应两个值求差，然后将值加倍：

const doubleSubtraction = (a, b) => (a - b) * 2

这些函数具有相似的逻辑，但区别在于运算符的功能。如果我们可以将函数视为值并将它们作为参数传递，我们可以构建一个接收运算符函数并在函数内部使用它的函数。

 const sum = (a, b) => a + b;    
 const subtraction = (a, b) => a - b;    
 const doubleOperator = (f, a, b) => f(a, b) * 2;    
 doubleOperator(sum, 3, 1); // 8    
 doubleOperator(subtraction, 3, 1); // 4

Promise

Promise 必须为以下三种状态之一：等待态（Pending）、执行态（Fulfilled）和拒绝态（Rejected）。一旦Promise 被 resolve 或 reject，不能再迁移至其他任何状态（即状态 immutable）。

基本过程：

1. 初始化 Promise 状态（pending）

2. 执行 then(..) 注册回调处理数组（then 方法可被同一个 promise 调用多次）

3. 立即执行 Promise 中传入的 fn 函数，将Promise 内部 resolve、reject 函数作为参数传递给 fn ，按事件机制时机处理

4. Promise中要保证，then方法传入的参数 onFulfilled 和 onRejected，必须在then方法被调用的那一轮事件循环之后的新执行栈中执行。

真正的链式Promise是指在当前promise达到fulfilled状态后，即开始进行下一个promise.

跨域

因为浏览器的同源策略导致了跨域。同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。

所谓同源是指"协议+域名+端口"三者相同。不同协议，不同域名，不同端口都会构成跨域。

跨域解决方案

　1. jsonp: 需要服务器配合一个callback函数
　2. CORS: 需要服务器设置header ：Access-Control-Allow-Origin
　3. window.name + iframe: 需要目标服务器响应window.name。
　4. document.domain : 仅限主域相同，子域不同的跨域应用场景。
　5. html5的 postMessage + iframe: 需要服务器或者目标页面写一个postMessage，主要侧重于前端通讯。
　6. nginx反向代理: 不用服务器配合，需要搭建一个中转nginx服务器，用于转发请求。

jsonp跨域

在HTML标签里，一些标签比如script、img这样的获取资源的标签是没有跨域限制的。通过动态创建script，再请求一个带参网址实现跨域通信。

• 需要前后端配合使用。一般后端设置callback ，前端给后台接口中传一个callback 即可。

• 只能实现get一种请求。

栗子

前端代码：

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


    // 传参一个回调函数名给后端，方便后端返回时执行这个在前端定义的回调函数
    script.src = 'http://xxxxxxx:8080/login?callback=handleCallback';
    document.head.appendChild(script);


    function handleCallback(res) {
        alert(JSON.stringify(res));
    }
</script>

后台代码：

<?php
  $callback = $_GET['callback'];//得到回调函数名
  $data = array('a','b','c');//要返回的数据
  echo $callback.'('.json_encode($data).')';//输出
?>

CORS - 跨域资源共享

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。

CORS有两种请求，简单请求和非简单请求。只要同时满足以下两大条件，就属于简单请求。

1. 请求方法是以下三种方法之一：HEAD，GET，POST

2. HTTP的头信息不超出以下几种字段：Accept，Accept-Language，Content-Language，Last-Event-ID，Content-Type【只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain】，没有自定义的HTTP头部。

简单请求

1. 浏览器：把客户端脚本所在的域填充到Origin header里，向其他域的服务器请求资源。

2. 服务器：根据资源权限配置，在响应头中添加Access-Control-Allow-Origin Header，返回结果。

3. 浏览器：比较服务器返回的Access-Control-Allow-Origin Header和请求域的Origin。如果当前域已经得到授权，则将结果返回给页面。否则浏览器忽略此次响应。

4. 网页：收到返回结果或者浏览器的错误提示。

对于简单的跨域请求，只要服务器设置的Access-Control-Allow-Origin Header和请求来源匹配，浏览器就允许跨域。服务器端设置的`Access-Control-Allow-Methods和Access-Control-Allow-Headers对简单跨域没有作用。

非简单请求

1. 浏览器：先向服务器发送一个OPTIONS预检请求，检测服务器端是否支持真实请求进行跨域资源访问，浏览器会在发送OPTIONS请求时会自动添加Origin Header 、Access-Control-Request-Method Header和Access-Control-Request-Headers Header。

2. 服务器：响应OPTIONS请求，会在responseHead里添加Access-Control-Allow-Methods head。这其中的method的值是服务器给的默认值，可能不同的服务器添加的值不一样。服务器还会添加Access-Control-Allow-Origin Header和Access-Control-Allow-Headers Header。这些取决于服务器对OPTIONS请求具体如何做出响应。如果服务器对OPTIONS响应不合你的要求，你可以手动在服务器配置OPTIONS响应，以应对带预检的跨域请求。在配置服务器OPTIONS的响应时，可以添加Access-Control-Max-Age head告诉浏览器在一定时间内无需再次发送预检请求，但是如果浏览器禁用缓存则无效。

3. 浏览器：接到OPTIONS的响应，比较真实请求的method是否属于返回的Access-Control-Allow-Methods head的值之一，还有origin, head也会进行比较是否匹配。如果通过，浏览器就继续向服务器发送真实请求, 否则就会报预检错误：请求来源不被options响应允许，请求方法不被options响应允许或请求中有自定义header不被options响应允许。

4. 服务器：响应真实请求，在响应头中放入Access-Control-Allow-Origin Header、Access-Control-Allow-Methods和Access-Control-Allow-Headers Header，分别表示允许跨域资源请求的域、请求方法和请求头，并返回数据。

5. 浏览器：接受服务器对真实请求的返回结果，返回给网页

6. 网页：收到返回结果或者浏览器的错误提示。

Access-Control-Allow-Origin在响应options请求和响应真实请求时都是有作用的，两者必须同时包含要跨域的源。 Access-Control-Allow-Methods和Access-Control-Allow-Headers只在响应options请求时有作用。

携带cookie

在 CORS 跨域中，浏览器并不会自动发送 Cookie。对于普通跨域请求只需服务端设置，而带cookie跨域请求前后端都需要设置。

浏览器，对于跨域请求，需要设置withCredentials 属性为 true。服务端的响应中必须携带 Access-Control-Allow-Credentials: true 。

除了Access-Control-Allow-Credentials之外，跨域发送 Cookie 还要求 Access-Control-Allow-Origin不允许使用通配符。否则浏览器将会抛出The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' 错误。事实上不仅不允许通配符，而且只能指定单一域名。

计算 Access-Control-Allow-Origin

既然Access-Control-Allow-Origin只允许单一域名， 服务器可能需要维护一个接受 Cookie 的 Origin 列表， 验证 Origin 请求头字段后直接将其设置为Access-Control-Allow-Origin的值。在 CORS 请求被重定向后 Origin 头字段会被置为 null， 此时可以选择从Referer头字段计算得到Origin。

具体实现

服务器端的响应头配置
Access-Control-Allow-Origin 可以设置为* ，表示可以与任意域进行数据共享。

// 设置服务器接受跨域的域名
"Access-Control-Allow-Origin": "http://127.0.0.1:8080",
// 设置服务器接受跨域的请求方法
'Access-Control-Allow-Methods': 'OPTIONS,HEAD,DELETE,GET,PUT,POST',
// 设置服务器接受跨域的headers
'Access-Control-Allow-Headers': 'x-requested-with, accept, origin, content-type',
// 设置服务器不用再次预检请求时间
'Access-Control-Max-Age': 10000,
// 设置服务器接受跨域发送Cookie
'Access-Control-Allow-Credentials': true

document.domain

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

实现原理：两个页面都通过js强制设置document.domain为基础主域，就实现了同域。

栗子：

在父页面 http://xxx.com/a.html 中设置document.domain

<iframe id = "iframe" src="http://xxx.com/b.html" onload = "test()"></iframe>
<script type="text/javascript">
    document.domain = 'xxx.com';//设置成主域
    function test(){
       alert(document.getElementById('iframe').contentWindow);
       //contentWindow 可取得子窗口的 window 对象
    }
</script>

在子页面http://xxx.com/b.html 中设置document.domain

<script type="text/javascript">
    document.domain = 'xxx.com';
    //在iframe载入这个页面也设置document.domain，使之与主页面的document.domain相同
</script>

window.postMessage

window.postMessage是html5的功能，是客户端和客户端直接的数据传递，既可以跨域传递，也可以同域传递。

postMessage(data, origin)方法接受两个参数：

• data：html5规范支持任意基本类型或可复制的对象，但部分浏览器只支持字符串，所以传参时最好用JSON.stringify()序列化。

• origin：协议+主机+端口号，也可以设置为"*"，表示可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。

栗子：
假如有一个页面，页面中拿到部分用户信息，点击进入另外一个页面，另外的页面默认是取不到用户信息的，你可以通过window.postMessage把部分用户信息传到这个页面中。（需要考虑安全性等方面。）

发送消息：

// 弹出一个新窗口
var domain = 'http://haorooms.com';
var myPopup = window.open(`${domain}/windowPostMessageListener.html`,'myWindow');


// 发送消息
setTimeout(function(){
  var message = {name:"站点",sex:"男"};
  console.log('传递的数据是  ' + message);
  myPopup.postMessage(message, domain);
}, 1000);

接收消息：

// 监听消息反馈
window.addEventListener('message', function(event) {
  // 判断域名是否正确
  if (event.origin !== 'http://haorooms.com') return;
  console.log('received response: ', event.data);
}, false);

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/snsHL9db69ccu1aIKl9r/article/details/114156791
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。