js面试

js面试技巧

作用域和闭包

• 函数声明

fn()   //不会报错
function fn(){
  // 声明. 变量提升
}

fn1().  //报错 undefined
var fn1 = function(){
    // 表达式
}

• 执行上下文

  • 范围：一段script或者一个函数，针对这个范围都会生成一个执行上下文
  • 全局：变量定义，函数声明（js执行之前会把变量定义，函数声明先拿出来）
  • 函数：变量定义，函数声明，this，arguments（函数执行之前，会把变量定义，函数声明，this，arguments拿出来）

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

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

• this

  • this要在执行时才能确认值，定义时无法确认

  var a = {
      name : 'A'
      fn : function(){
          console.log(this.name)
      }
  }
  
  a.fn() // this === a
  a.fn.call({name:'b'})  //this === {name : 'b'}
  var fn1 = a.fn
  fn1()   // this === window
  
  

  • 作为构造函数执行

  function Foo(name){
      // 相当于生成了一个this的空对象
      this = {}
      this.name = name
      return this
  }
  var f = new Foo('zhang')
  
  

  • 作为对象属性执行

  
  var obj = {
      name :'a'
      printName : function(){
          console.log(this.name)
      }
  }
  obj.printName()  //作为对象属性执行，this指向这个对象
  
  

  • 作为普通函数执行

  function fn(){
      console.log(this)   
  }
  fn()   //this === window
  
  

  • call apply bind

  function fn1(name,age){
      console.log(this)
  }
  fn1.call({x:100},'zhang',20)  //{x:100}
  fn1.apply({x:100},['zhang',20])
  
  var fn2 = function (name,age){
      alert(name)
      console.log(this)
  }.bind({y:200})
  fn2('zhang',20) 
  
  
  

• 作用域

  • js没有块级作用域
  • 只有函数和全局作用域

  if (true){
      var name = 'zhang'
  }
  console.log(name)  // zhang
  
  
  //函数和全局作用域
  var a = 100
  function fn(){   //函数外部是不能得到函数中的a
      var a = 200
      console.log('fn',a)
  }
  console.log('global',a)  //100
  fn()  // 200
  
  

  • 作用域链

  var a = 100
  function fn(){
      var b = 200
      //当前作用域没有定义的变量，即“自由变量”，那么到函数的父级作用域寻找，这个是在函数定义的时候，寻找父级作用域，并不是在函数执行的时候寻找
      console.log(a)
      console.log(b)
  }
  fn()
  
  

  • 作用域链 一个自由变量，一直向父级作用域寻找

```js

var a = 100
function f1(){
    var b = 200
    function f2(){
        var c = 300
        console.log(a)  //自由变量
        console.log(b)  //自由变量
        console.log(c)  
    }
    f2()
}
f1()


```




```js
var i,a
for ( i = 0; i < 10 ; i ++){
    a = document.createElement('a')
    a.innerHTML = i + '
'
    a.addEventListener('click',function(e){
        e.preventDefault()
        alert(i)    // 这个地方每一个i都是10
    })
    document.body.appendChild(a)
}



var i 
for ( i = 0; i <10; i ++){
    (function(i){    // 将每一个i传值到这个函数中，这里是一个函数作用域，声明了10个函数
        var a = document.createElement('a')
        a.innnerHTML = i + '
'
        a.addEventListener('click',function(e){
            e.preventDefault()
            alert(i)
        })
    })(i)
}

```

• 如何理解作用域
  • 自由变量
  • 作用域链，即自由变量的查找
  • 闭包的两个场景

```js
//封装变量，收敛权限
function isFirstLoad(){
    var _list = []
    return function(id){
        if (_list.indexOf(id) >= 0){
            return false
        }else{
            _list.push(id)
            return true
        }
    }
}
var firstLoad = isFirstLoad()
firstLoad(10)  //true
firstLoad(10)  //false
firstLoad(20)  //true



```

原型

• 构造函数

  • 构造函数，大写字母开头
  • this创建一个空对象，对this做了赋值后将this返回，返回后赋值给变量
  • new => 构造函数形成一个实例的过程

function Foo(name,age){
    this.name = name
    this.age = age
    this.class = 'class-1'
    //return this    // 默认有这一行
}
var f = new Foo('zhang',10)
var f1 = new Foo('lisi',22)   //创建多个对象

• 构造函数-扩展
  • var a = {} 其实是var a = new Object()的语法糖
  • var a = [] 其实是var a = new Array()的语法糖
  • function Foo(){} 其实是 var Foo = new Function()
  • 使用instanceof判断一个函数是否是一个变量的构造函数（判断一个变量是否是数组，a instanceof Array）

• 原型规则和实例

  • 所有的引用类型（数组，对象，函数）都具有对象特性，即可以自由扩展属性（除了null）

  var obj = {}; obj.a = 100;
  var arr = []; arr.a = 100;
  function fn(){}
  fn.a = 100;
  

  • 所有的引用类型（数组，对象，函数）都有一个proto属性（隐式原型），属性值是一个普通对象

  
  console.log(obj.__proto__)  // 对象上的方法
  console.log(arr.__proto__)   //打印出来是数组上的方法，slice，sort。。。。等
  console.log(fn.__proto__)   //ƒ () { [native code] }
  
  

  • 所有的函数，都有一个prototype（显示原型）属性，属性值也是一个普通的对象

  console.log(fn.prototype)  //arguments, caller,constructor
  

  • 所有的引用类型（数组，对象，函数），proto属性值指向它的构造函数的 prototype 属性值

  
  console.log(obj.__proto__ === Object.prototype)
  
  

  • 当试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么会去它的proto（即它的构造函数的prototype）中寻找。

  function Foo(name,age){
      this.name = name
  }
  
  Foo.prototype.alertName = function(){
      alert(this.name)
  }
  
  var f = new Foo('zhangsan')
  f.printName = function(){
      console.log(this.name)
  }
  
  f.printName()
  f.alertName()   
  //通过对象属性的方式执行函数的时候，this指向这个对象
  
  
  function Student(name) {
      this.name = name;
      this.hello = function () {
          alert('Hello, ' + this.name + '!');
      }
  }
  let xiaoming = new Student('xiaoming')
  let xiaohong = new Student('xiaohong')
  xiaoming.hello === xiaohong.hello.  //false
  如果我们通过new Student()创建了很多对象，这些对象的hello函  数实际上只需要共享同一个函数就可以了，这样可以节省很多内存。
  
  要让创建的对象共享一个hello函数，根据对象的属性查找原则，我们   只要把hello函数移动到xiaoming、xiaohong这些对象共同的原型 上就可以了，也就是Student.prototype
  
  

* 循环对象自身的属性

```js
var item 
for (item in f){
    if (f.hasOwnProperty(item)){  // 得到f自身的属性
        console.log(item)
    }
}

```

* constructor  这个原型对象prototype自己还有个属性constructor，指向构造函数本身。通过构造函数创建的对象，从原型链上获得这个属性，指向构造函数本身

```js
xiaoming.constructor === Student.prototype.constructor; // true

Student.prototype.constructor === Student; // true
xiaoming.constructor === Student; // true

```

• 原型链

//构造函数
function Foo(name,age){
    this.name = name
}

Foo.prototype.alertName = function(){
    alert(this.name)
}

//创建实例
var f = new Foo('zhang')
f.printName = function(){
    console.log(this.name)
}

f.printName()
f.alertName()
f.toString()  // 要去f.__proto__.__proto__中查找

[图片上传失败...(image-85c995-1548123711764)]

• instanceof 用于判断引用类型属于哪个构造函数的方法
  • 使用f instanceof Foo
  • f的proto一层一层往上，能否对应到Foo.prototype
  • 再试判断f instanceof Object

• 如何准确判断一个变量是数组类型

var arr = []
arr instanceof Array   //true
typeof arr  //object

• 原型链的继承

  • call方法

  function Student(props) {
      this.name = props.name || 'Unnamed';
  }
  
  Student.prototype.hello = function () {
      alert('Hello, ' + this.name + '!');
  }
  
  function PrimaryStudent(props) {
      // 调用Student构造函数，绑定this变量:
      Student.call(this, props);
      this.grade = props.grade || 1;
  }
  
  let a = new PrimaryStudent({name : 'xiaohong'})
  console.log(a.name)  //xiaohong
  a.hello()    //报错  没有得到Student.prototype中的方法
  
  
  
  

  需要把原型链修改为new PrimaryStudent() ----> PrimaryStudent.prototype ----> Student.prototype ----> Object.prototype ----> null

  • 中间对象可以用一个空函数F来实现

  // PrimaryStudent构造函数:
  function PrimaryStudent(props) {
      Student.call(this, props);
      this.grade = props.grade || 1;
  }
  
  // 空函数F:
  function F() {
  }
  
  // 把F的原型指向Student.prototype:
  F.prototype = Student.prototype;
  
  // 把PrimaryStudent的原型指向一个新的F对象，F对象的原型正好指向Student.prototype:
  PrimaryStudent.prototype = new F();
  
  // 把PrimaryStudent原型的构造函数修复为PrimaryStudent:
  PrimaryStudent.prototype.constructor = PrimaryStudent;
  
  // 继续在PrimaryStudent原型（就是new F()对象）上定义方法：
  PrimaryStudent.prototype.getGrade = function () {
      return this.grade;
  };
  
  // 创建xiaoming:
  var xiaoming = new PrimaryStudent({
      name: '小明',
      grade: 2
  });
  xiaoming.name; // '小明'
  xiaoming.grade; // 2
  
  // 验证原型:
  xiaoming.__proto__ === PrimaryStudent.prototype; // true
  xiaoming.__proto__.__proto__ === Student.prototype; // true
  
  // 验证继承关系:
  xiaoming instanceof PrimaryStudent; // true
  xiaoming instanceof Student; // true
  
  
  
  //方法的封装
  function inherits(Child,Parent){
      var F = function(){}
      F.prototype = Parent.prototype;
      Child.prototype = new F();
      Child.prototype.constructor = Child;
  }
  
  

  • 拷贝继承 父对象所有的属性和方法，都拷贝到子对象

  function Animal(){}
  Animal.prototype.spices = 'animal'
  
  function extend(child,parent){
      var p = parent.prototype
      var c = parent.prototype
      for ( var i in p){
          c[i]=p[i]
      }
  }
  
  

• 写一个原型链继承的例子

function Animal(){
    this.eat = function(){
        console.log('animal eat')
    }
}

function Dog(){
    this.bark = function(){
        console.log('dog bark')
    }
}

Dog.prototype = new Animal()

var haha = new Dog()



function Elem(id){
    this.elem = document.getElementById(id)
}
Elem.prototype.html = function(val){
    var elem = this.elem;
    if ( val){
        elem.innerHTML = val
        return this    //链式操作
    }else{
        return elem.innerHTML
    }
}

Elem.prototype.on = function(type,on){
    var elem = this.elem
    elem.addEventListener(type,fn)
    return this
}

var div1 = new Elem('div1')
div1.html('哈哈哈').on('click',function(){
    console.log('哈哈哈哈')
})

• 描述new一个对象的过程

  • 创建一个新的对象
  • this指向这个新对象
  • 执行代码，对this赋值
  • 返回this

• zepto源码中如何使用原型链

ES6语法

• 浏览器环境支持不好（需要开发环境的编译）

问题

• ES6模块化如何使用，开发环境如何打包
  • 模块化的基本语法.

    ```js
    util1.js
    export default{
        a : 100
    }
    
    
    util2.js
    export function fun1(){
        alert('fn1')
    }
    export function fun2(){
        alert('fn2')
    }
    
    
    index.js
    import util1 from './util1.js'
    import {fun1,fun2} from './utils2.js'
    
    console.log(util1)
    fun1()
    fun2()
    
    ```
    

##  开发环境配置

    * 开发环境--babel编译

    
    ```js
    在终端输入npm init 创建包
    npm install --save-dev babel-core babel-preset-     es2015 babel-preset-latest --registry=https://      registry.npm.taobao.org（下载babel的依赖插件）

    ```
    
    项目中新建.babelrc文件
    
    ```js
    {
        "preset" : ["es2015","latest"],
        "plugins": [
            
        ]
    }
    
    ```
    
    全局安装babel
    sudo npm install -g babel-cli
    
    babel 文件地址（查看转译后的代码）
    
    
    

* 关于js众多模块化标准
    webpack -- 处理模块化的工具
    
    ```js
    webpack.config.js 文件内容
    module.exports={  //现在没有会自动创建
        entry :'./babel.js',
        output:{
            path : __dirname,
            filename : './build/bundle.js'
        },
        module:{    
            rules : [{  //所有js的文件除了node_modules中的文件通过babel来编译
                test : /\.js?$/,
                exclude : /(node_modules)/,
                loader:'babel-loader'
            }]
        }
    }
    ```
    
    
    ```js
    package.json
    {
      "name": "babel-test",
      "version": "1.0.0",
      "devDependencies": {
        "babel-core": "^6.26.3",
        "babel-loader": "^8.0.4",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-latest": "^6.24.1",
        "webpack": "^4.28.0"
      },
      "scripts": {
        "start":"webpack"
      }
    }
    npm start 命令就是在运行npm webpack的操作
    ```
    
    
    rollup.js
    
    * npm init
    * npm i rollup rollup-plugin-node-resolve rollup-plugin-babel babel-plugin-external-helpers babel-preset-latest --save-dev
    * 可以尽量简化输出之后的大小
    * 配置 .babelrc 文件
    * 配置rollup.config.js

    
    * rollup功能单一（打包模块化）webpack功能强大
    * 工具尽量功能单一，可集成，可扩展
    * gulp + rollup    wangEditor

    ```js
    
    .babelrc
    
    {
        "presets":[
            ["latest",{
                "es2015":{
                    "modules" : false  //并不关心第三插件的内容，只编译自己的内容
                }
            
            }]
        
        ],
        "plugins":["external-helpers"]
    }
    
    
    rollup.config.js
    import babel from 'rollup-plugin-babel'
    import resolve from 'rollup-plugin-node-resolve'
    
    export default{
        entry :'src/index.js',   //入口文件
        format : 'umd',   // 文件格式，兼容性的规范，umd 文件支持amd的方式，支持common.js的方式
        plugins : [
            resolve(),
            babel ({  // babel编译排除node_modules的文件
                exclude:'node_modules/**'
            })
        ],
        dest : 'build/bundle.js' //将文件编译到这个文件中
    }
    
    ```
    
    * 模块化的总结
        * 没有模块化
        * AMD成为标准，require.js（也有CMD）
        * 前端打包工具，是的node.js模块化可以被使用
        * ES6出现，想统一现在所有的模块化标准
        
    * 问题解答
        * 语法：import export(注意有无default)
        * 环境： babel编译ES6语法，模块化工具可用webpack和rollup
        * 扩展：对模块化标准统一的期待

• class和普通构造函数有何区别

  • js构造函数
  • class
  • 语法糖--是一种语法糖的形式
  • 继承

  class Ad extends React.Component{
      
      constructor(props){
          super(props)
          this.state={
              data : []
          }
      }
      
      render(){
          return (
              
  hello
          )
      }
  
  }
  
  //js构造函数
  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语法
  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())
  typeof MathHandle    //function,本身就是一个函数
  MathHandle === MathHandle.prototype.constructor  // true
  m.__proto__ === MathHandle.prototype   //true
  

* class 继承

```js
class Animal{

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


class Dog extends Animal{
    
    constructor (name){
        super(name)   //在执行dog构造器之前，先执行animal的构造器
        this.name = name
    }
    
    say(){
        console.log(`${this.name} say`)
    }

}

const dog = new Dog('hashiqi')
dog.say()
dog.eat()

```

* class和构造函数写法的区别
    * class在写法上更贴合面向对象的写法
    * class实现继承更加易读，易理解
    * 本质是语法糖，使用prototype

• Promise的基本使用和原理

  • callback hell

  
  function loadImg(src,callback,fail){
      var img = document.createElement('img')
      img.onload = function(){
          callback(img)
      }
      img.onerror = function(){
          fail()
      }
      img.src = src
  }
  
  var src = 'https://www.'
  load(src,function(img){
      console.log(img.width)
  },function(){
      console.log('error')
  })
  
  
  

  • promise 语法

  
  function loadImg(src){
      const promise = new Promise(function(resolve,reject){
          var img = document.createElement('img')
          img.onload = function(){
              resolve(img)
          }
          img.onerror = function(){
              reject()
          }
          img.src = src
      })
      return promise
  }
  
  var src = 'https://www....'
  var result = loadImg(src)
  
  result.then(function(img){
      console.log(img.width)
  },function(){
      console.log('failed')
  })
  
  result.then(function(img){
      console.log(img.height)
  })
  
  
  

• 总结ES6其他常用功能

  • let,const

  var i = 10;
  i = 100
  var j = 20;
  j = 200;
  
  
  let i = 10;
  i = 1000;
  const j = 20;
  j = 200;   //报错
  
  

  • 多行字符串/模板变量

  
  const name = 'zhangsan',age = 20
  
  const html = `
  
                      
  ${name}
                   
  `
  console.log(html)
  
  

  • 解构赋值

  const obj = {a:10,b : 20,c: 30}
  const {a,c} = obj
  console.log(a)  //10
  console.log(c)  //30
  
  const arr = ['xxx','yyy','zzz']
  const [x,y,z] = arr
  console.log(x)   //'xxx'
  console.log(y)   //'yyy'
  console.log(z)   //'zzz'
  

  • 块级作用域

  const obj = {a : 100 , b : 200}
  for ( let item in obj){
      console.log(item)
  }
  console.log(item)   //undefined
  
  
  let a = 10;
  if (a == 10){
      let b = 10
  }
  console.log(b)    // b is not defined
  
  

* 函数默认参数

```js

function (a,b =0){

}

```

* 箭头函数

```js

const arr = [1,2,3]
arr.map (item => item+1)
arr.map((item,index)=>{
    console.log(index)
    return item + 1
})


function fn(){
    consol.log('real',this)  //{a:100}
    var arr = [1,2,3]
    
    arr.map(function(item){
        console.log('js',this)   // window
    })
    
    arr.map(function(item){
        console.log('es6',this)  //{a:100}
    })
    
}

fn.call({a: 100})

```


### 异步

* 什么是单线程，和异步有什么关系
    
    * 单线程 - 只有一个线程，只能做一件事，两段js不能同时执行

    ```js
    // 循环运行期间，js执行和DOM渲染暂时卡顿
    var i ,sum = 0;
    for ( i =0; i < 10000000000; i++){
        sum += i;
    }
    console.log(sum)
    
    // alert不处理，js执行和DOM渲染暂时卡顿
    console.log(1)
    alert('hello')
    console.log(2)
    ```
    
    * 原因 - 避免DOM渲染的冲突
        * 浏览器需要渲染DOM
        * js可以修改DOM结构
        * js执行的时候，浏览器DOM渲染会暂停
        * 两段js也不能同时执行（都修改DOM就冲突了）
        * H5中webworker支持多线程，但是不能访问DOM
    
    * 解决方案 - 异步

        ```js
        console.log(100)
        setTimeout(function(){
            console.log(200)
        },1000)
        console.log(300)
        console.log(400)
        
        
        console.log(100)
        $.ajax({
            url : 'xxx',
            success:function(result){
                console.log(result)
            }
        })
        console.log(300)
        console.log(400)
        
        // 代码执行顺序和书写顺序不一致
        ```
        
    * 异步存在的问题
        
        * 问题一：没有按照书写方式执行，可读性差
        * 问题二：callback中不容易模块化

        
* 什么是event-loop

    * 文字解释

        * 事件轮询，js实现异步的具体解决方案
        * 同步代码，直接执行
        * 异步函数放在异步队列中
        * 待同步函数执行完毕，轮询执行异步队列的函数

        
        
    * 实例分析

        ```js
        
        setTimeout(function(){
            // 异步队列
            console.log(100)
        },1000)
        
        
        // 主进程
        console.log(200)
        
        ```
        
        
        ```js
        
        setTimeout(function(){
            //隔100ms后放入异步队列
            console.log(1)
        },100)
        
        setTimeout(function(){
            // 立即被放入异步队列
            console.log(2)
        })
        
        
        
        // 主线程
        console.log(3)
        
        //打印顺序 3 => 2 => 1
        //轮询：主线程执行结束，查看异步队列，先执行console.log(2)，再次查看异步队列，执行console.log(1)
        
        ```
        
        
        ```js
        $.ajax({{
            url : 'xxxx',
            sunccess: function(result){
                // ajax 结束后放入异步队列
                console.log('a)
            }
        
        })
        
        setTimeout(function(){
            // 100ms后放入异步队列
            console.log('b')
        },100)
        
        setTimeout(function(){
            // 立即被放入异步队列
            console.log('c')
        })
        
        // 主进程
        console.log('d')
        
        d => c => b => a 或者 d => c => a => b 或者 d => a => c => b(比较少)
        
        ```

* 是否用过jquery的Deferred

    * jquery 1.5 的变化

    ```js
    //1.5之前
    var ajax = $.ajax({
        url : './data.json',
        success : function(){
            console.log('success1')
            console.log('success2')
            console.log('success3')   // 对修改开放，对扩展封闭
        },
        error : function(){
            console.log('error')
        }
    })
    console.log(ajax)   // 返回一个XHR对象
    
    
    //1.5之后
    var ajax = $.ajax('data.json')
    ajax.done (function(){
        console.log('success1')
    })
    .fail(function(){
        console.log('error')    // 对扩展开放，对修改封闭
    })
    .done(function(){
        console.log('success2')
    })
    
    1，各自管理自己的代码
    2，不需要改动之后，将相关的模块全部都回归测试
    
    
    console.log(ajax)    // 返回一个deferred 对象
    
    
    
    // 很像promise的写法
    var ajax = $.ajax('data.json')
    ajax.then(function(){
        console.log('success1')   // 成功的函数
    },function(){
        console.log('error1')   // 失败的函数
    })
    .then(function(){
        console.log('success2')
    },function(){
        console.log('error2')
    })
    
    ```
    
    
        1， 无法改变js异步和单线程的本质
        2，只能从写法上杜绝callback这种形式
        3， 是一种语法糖形式，但是解耦了代码
        4， 很好的体现了： 开放封闭原则
    
    
    * 使用jquery Deferred

    ```js
    // 简单的异步操作
    var wait = function(){
        var tash = function(){
            console.log('执行完成')
        }
        setTimeout(task,2000)
    }
    wait()
    
    
    
    // 使用jquery Deferred
    function waitHandle(){
        var dtd = $.Deferred()  //创建一个deferred对象
        
        var wait = function(dtd){   // 要求传入一个deferred对象
            var task = function(){
                console.log('执行完成‘）
                dtd.resolve()  // 表示异步任务已经完成
                // dtd.reject()   // 表示异步任务失败或出错
            }
            setTimeout (task ,2000)
            return dtd   // 要求返回一个deferred 对象
        }
        
        // 这个地方一定要有返回值
        return wait(dtd)   //相当于dtd经过一个wait函数的加工然后又再次return出去
    }
    
    var w = waitHandle()
    w.then(function(){
        console.log('ok 1')   // 成功的函数
    },function(){
        console.log('err 1')  // 失败的函数
    }).then(function(){
        console.log('ok 2')
    },function(){
        console.log('err 2')
    })
    
    ```
    
    
    * 总结，dtd的api分成两类，用意不用
    * 第一类： dtd.resolve, dtd.reject
    * 第二类： dtd.then , dtd.done , dtd.fail
    * 这两类应该分开，否则后果很严重

    
    
    
    * 初步引入Promise 概念

    ```js
    function waitHandle(){
        var dtd = $.Deferred()
        var wait = function (dtd){
            var task = function(){
                console.log('执行完成')
                dtd.resolve()
            }
            setTimeout(task ,2000)
            return dtd.promise()  // 这里返货的是promise而不是deferred对象
        }
        return wait(dtd)
    }
    
    var w = waitHandle()  // w 接收一个promise对象，这里是一个promise对象
    $.when(w)
    .then(function(){
        console.log('ok 1')
    })
    .then(function(){
        console.log('ok 2')
    })
    w.reject()  // 执行这句话会直接报错
    
    
    ```
    
    * promise 和Deferred的区别

        * promise 只能被动监听，不能主动修改


* promise的基本使用和原理

    * 基本语法回顾
    
    ```js
    function loadImg(src){
    
        const promise = new Promise(function(resolve,reject){
            
            var img = document.createElement('img')
            img.onload = function(){
                resolve(img)
            }
            img.onerror = function(){
                reject()
            }
            img.src = src
        }
        return promise
    }
    
    var src = 'https://'
    var result = loadImg(src)
    
    result.then(function (img){
        console.log(img.width)
        return img
    },function(){
        console.log('failed')
    }).then(function(){
        console.log(img.height)
    })
    
    // 部分网站不支持，到bootCDN 中下载bluebird，引用js
    
    ```
    
    * 异常捕获

    ```js
    // 规定： then只接受一个成功参数，最后统一用catch捕获异常
    result.then(function(img){
        console.log(img.width)
        return img
    }).then(function(img){
        console.log(img.height)
    }).catch(function(ex){
        // 最后统一捕获异常 catch
        console.log(ex)
    })
    
    
    try{
    
    }catch{
    
    }
    
    
    ```
    
    * reject 的捕获

    ```js
    
    function loadImg(src){
    
        const promise = new Promise(function(resolve,reject){
            
            var img = document.createElement('img')
            img.onload = function(){
                resolve(img)
            }
            img.onerror = function(){
                reject('图片加载失败')
            }
            img.src = src
        }
        return promise
    }
    
    var src = 'https://'
    var result = loadImg(src)
    
    result.then(function(img){
        console.log(img.width)
        return img
    }).then(function(img){
        console.log(img.height)
    }).catch(function(ex){
        // 最后统一捕获异常 catch
        console.log(ex)   // 打印信息图片加载失败
    })
    
    
    ```
    
    
    
    * 多个串联
    

    ```js
    
    var src1 = 'https:...'
    var src2 = 'https:...'
    var result1 = loadImg(src1)
    var result2 = loadImg(src2)
    
    // 链式操作
    result1.then(function(img1){
        console.log('第一张图片加载完毕')
        return result2
    }).then(function(img2){
        console.log('第二张图片')
    }).catch(function(ex){  // 只执行第一个异常做处理
        console.log(ex)
    })
    
    ```
    
    
    
    * Promise.all 和 Promise.race

    ```js
    // Promise.all 接受一个promise 对象的数组
    // 待全部完成之后，统一执行success
    Promise.all([result1,result2]).then(datas =>{
        // 接受到的datas是一个数组，依次包含了多个promise返回的内容
        console.log(datas[0])
        console.log(datas[1])
    })
    
    
    
    // Promise.race 接受一个包含多个promise对象的数组
    // 只要有一个完成，就执行success
    Promise.race([result1,result2]).then(data=>{
        // data即最先执行完成的promise的返回值
        console.log(data)
    })
    
    // 一起执行的时候，race先执行了，然后all再次执行
    
    ```
    
    * promise 标准

        * 关于标准

            * 任何技术推广使用都需要一套标准支撑
            * 任何不符合标准的东西，终将被用户抛弃
            * 不要挑战标准，不要自造标准

            
        * 状态变化

            * 三种状态： pending fulfilled rejected
            * 初始状态是pending
            * pending 变成fulfilled，或者是pending 变成rejected
            * 状态变化不可逆
        
        * then函数的参数传递和参数返回

            * Promise 实例必须实现then这个方法
            * then 必须可以接受两个函数作为参数
            * then 返回的必须是一个Promise 实例（可以自定义返回一个promise的实例，或者就返回原来的promise实例）


* async/await  ES7提案中

    * then 只是将callback 拆分了

    ```js
    var w = waitHandle()
    w.then(function(){
        console.log('ok1')
    },function(){
        console.log('err 1')
    }).then(function(){
        console.log('ok2')
    },function(){
        console.log('err 2')
    })
    
    ```
    
    * async/await 是最直接的同步写法
    
    ```js
    const load = async function (){
        const result1 = await loadImg(src1)
        console.log(result1)
        const result2 = await loadImg(src2)
        console.log(result2)
    }
    load()
    
    
    ```
    
    * 语法
        * 使用await，函数必须用async标识
        * await 后面跟的是一个promise实例
        * 需要babel-polyfill

    * 使用了promise，并没有和回调冲突
    * 完全是同步的写法，再也没有回调函数



* 总结当前js解决异步的方案

    * jquery Deferred
    * Promise
    * async/await
    * Generator