es6常用功能与异步详解（JS高级面试题）

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.baidu.com/img/baidu_jgylogo3.gif";

loadImg(src,function(img){

    console.log('img width',img.width)

},function(){

    console.log('faild')

})

用promise 去改造

用多个.then去分批处理

function loadImg(src){

    return new Promise(function(resolve,reject){

        var img = document.createElement('img');

        img.onload = function(){

            resolve(img);

        }

        img.onerror = function(){

            reject();

        }

        img.src = src;

    })

}

var src="https://www.baidu.com/img/baidu_jgylogo3.gif";

var result = loadImg(src);

result.then(function(img){

    console.log('img width',img.width)

},function(){

    console.log('faild')

})

result.then(function(img){

    console.log('img height',img.height)

})

问题解答：

new promise实例，而且要传入return
new promise时要传入函数，函数有resolve reject函数
成功时执行resolve()失败时执行reject()
.then监听结果

ES6常用功能

let 定义变量，可以重新赋值
const 定义常量，不可以重新赋值
多行字符串/模板变量
解构赋值（详情见es6）
块级作用域（很大的改动）
函数默认参数
箭头函数

块级作用域

<!-- 在js里面 -->

var obj = {a:100,b:200}

for (var key in obj) {

    console.log(key,'for in')

}

console.log(key)  // 100,200

<!-- 在es6 -->

var obj = {a:100,b:200}

for (let key in obj) {

    console.log(key,'for in')

}

console.log(key); // undefine

箭头函数改变this指向的问题

<!-- 用箭头函数，指向本身函数对象 -->

function fn(){

    console.log('real',this); // {a:100}

    var arr = [1,2,3];

    arr.map(item=>{

        console.log(this); // {a:100}

    })

}

fn.call({a:100}); // call是强制让fn函数对象指向{a:100}

<!-- 不用箭头函数,this指向window -->

function fn(){

    console.log('real',this); // {a:100}

    var arr = [1,2,3];

    arr.map(function(item){

        console.log(this); // window;

    })

}

fn.call({a:100});

原型

描述一下zepto是如何使用原型

描述一下jquery如何使用原型

再结合自己的项目经验，说一个自己开发的列子

$p.css('color','red'); // css是原型方法

$p.html(); // html是原型方法

原型如何体现他的扩展性

异步

问题：

一. 什么是单线程，和异步有什么关系

单线程只有一个线程，同一时间只能做一件事情

var i,sum = 0;

for(i=0;i<100000;i++){

    sum+=i;

}

console.log(sum);

<!-- alert不处理，js执行和dom渲染暂时卡顿 -->

console.log(1);

alert('hello');

console.log(2);

用单线程的原因-避免DOM渲染的冲突

A. 浏览器需要渲染DOM

B. js可以修改DOM结构

C. JS执行的时候，浏览器DOM渲染会暂停

D. 两段JS也不能同时执行（都修改DOM就冲突了）

E. webworder支持多线程，但是不能访问DOM
单线程的解决单线程方案-异步

    console.log(100)

    setTimeout(function(){

        console.log(200);

    },1000)

    console.log(300);

    console.log(400);

    // 100

    // 300

    // 400

    // 200  一秒后执行

console.log(100)

$.ajax({

    url:'XXXX',

    success:function(res){

        console.log(res) // 最后执行

    }

});

console.log(300)

cobsole.log(400)

异步的问题：

问题一：没有按照书写的方式执行，可读性差

问题二：callback中不容易模块化（setTimeout和ajax里面的函数）

二. 什么是event-loop 异步的解决方案。

事件轮询，js实现异步的具体解决方案
同步代码，直接执行
异步函数先放在异步队列中；有setTimeout等待时间过后，才放入异步队列中。ajax执行完毕过后放入异步队列
待同步函数执行完毕，轮询执行异步队列的函数

回答点：

什么是异步队列，何时被放入异步队列
轮询的过程。

三. 是否用过jquery的deferred

问题解答：

1. 可以拿jquery1.5 对ajax的改变举例

2. 说明如何简单的封装、使用deferred，说出它的好处

3. 说明promise和deferred的区别

jQuery1.5的变化——1.5之前

var ajax = $.ajax({

    url:'./data.json',

    success:function(){

        console.log('success 1');

        console.log('success 2');

        console.log('success 3');

    },

    error:function(){

        console.log('error');

    }

})

jQuery1.5的变化——1.5之后

这样写的好处：

这样对修改封闭，对扩展开放，
增加一个函数，不用再修改原来的函数
多人开发，一人维护一个函数。
测试也只测试新的函数。
对代码管理和维护有好处的

// 每一个方法都会执行

var ajax = $.ajax('data.json');

ajax.done(function(){

    console.log('success 1');

}).fail(function(){

  console.log('fail 1');

}).done(function(){

    console.log('success 2');

}).fail(function(){

  console.log('fail 2');

}).done(function(){

    console.log('success 3');

}).fail(function(){

  console.log('fail 3');

})

<!-- 与promise很相近了 -->

var ajax = $.ajax('data.json')

ajax.then(function(){

   console.log('success 1');

},function(){

    console.log('error 1');

}).then(function(){

   console.log('success 2');

},function(){

    console.log('error 2');

})

无法改变js异步和单线程的本质
只能从写法上杜绝callback这种形式
它是一种语法糖形式，但是解耦了代码
很好的体现：开放封闭原则
减少了回归测试的成本。多人开发方便。

使用jquery deferred举例：

var wait = function(){

    var task = function(){

        console.log('执行完成');

    }

    setTimeout(task,20000)

}

wait();

function waitHandle(){

    // 定义

    var dtd = $.Deferred();

    var wait = function(dtd){

        var task = function(){

            console.log('执行完毕');

            // 成功

            dtd.resolve()

            // 失败

            // dtd.reject()

        }

        setTimeout(task,2000);

        // wait返回

        return dtd;

    }

    // 最终返回

    return wait(dtd);

}

var w = waitHandle();

w.then(function(){

    console.log('ok 1');

},function(){

    console.log('err 1');

})

w.then(function(){

    console.log('ok 2');

},function(){

    console.log('err 2');

})

w.then(function(){

    console.log('ok 3');

},function(){

    console.log('err 3');

})

w.reject();  //  不会报错

// 开放封闭原则！！！

总结：

dtd的API可分成两类，用意不同

第一类：dtd.reolve  dtd.reject  主动触发

第二类：dtd.then  dtd.done  dtd.fail  被动监听

初步引入promise概念，是 jquery deferred 引入过来的

promise和jquery deferred的区别：

promise对象只能被动监听，不能主动修改，所以在w.reject()会报错。

function waitHandle(){

    // 定义

    var dtd = $.Deferred();

    var wait = function(dtd){

        var task = function(){

            console.log('执行完毕');

            // 成功

            dtd.resolve()

            // 失败

            // dtd.reject()

        }

        setTimeout(task,2000);

        // wait返回

        return dtd.promise(); // 这里返回的是promise对象

    }

    // 最终返回

    return wait(dtd);

}

var w = waitHandle();

$.when(w).then(function(){

    console.log('ok 1');

},function(){

    console.log('err 1');

}).then(function(){

    console.log('ok 2');

},function(){

    console.log('err 2');

})

w.reject();  // 这里就会直接报错。

四. promise的基本使用和原理

基本语法回顾

1. 异常捕获

function loadImg(src){

    return new Promise(resolve,reject){

        var img = document.createElement('img');

        img.onload = function(){

            resolve(img);

        }

        img.onerror = function(){

            reject('图片加载失败');

        }

        img.src=  src;

    }

}

var src="https://wwww.img.address";

var result = loadimg(src);

// 规定：then只接受一个成功的参数，最后统一用catch来捕获错误

result.then(function(img){

    console.log(1,img.width);

    return img;

}).then(function(img){

    console.log(2,img.width);

}).catch(function(ex){

    // 统一捕获异常，也会捕获到reject方法

    console.log(ex);

})

2. 多个串联

// 场景：希望加载完第一个，再加载第二个

var src1 = 'img.address';

var result1 = loadImg(src1);

var src2 = 'img.address';

var result2 = loadImg(src2);

result1.then(function(img1){

    console.log('加载第一章图片',img1.width);

    return result2  // 重要！！！

}).then(function(img2){

    console.log('加载第二章图片',img2.width);

}).catch(function(ex){

    console.log(ex);

})

3. promise.all和promise.race

// 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(datas);

})

4. promise标准

关于“标准”的闲谈，标准很重要

    任何技术推广使用都需要一套标准来支撑

    如 html js css http等，无规则不成方圆

    任何不符合标准的东西，终将会被用户抛弃

状态变化

    三种状态：pending fulfilled rejected

    初始状态pending

    pending 变成fulfilled，或者pending变为rejected

    状态不可逆

then

promise 实例必须实现then这个方法

then()必须可以接收两个函数作参数

then()返回的必须是一个promise实例

问题解答总结：

1. 基本语法复习

2. 如何异常捕获（error和reject都要考虑）

3. 多个串联-链式执行的好处

4. promise.all和promise.race

5. promise标准-状态变化，then函数

五. 介绍一下 async/await

是es7体验中的。

then只是将callback拆分了

async/await是最直接的同步写法

const load = async function(){

    const result1 = await loadImg(src1);

    console.log(result1);

    const result2 = await loadImg(src1);

    console.log(result2);

}

load()

语法（和promise的区别和联系）

1. 使用await，函数必须用async标识

2. await 后面跟的是一个promise实例

    使用了promise，并没有和promise冲突

    完全是同步的写法，再也没有回调函数

    但是：改变不了JS单线程、异步的本质

3. 需要安装babel-polyfill并，引入

六. 总结当前js异步解决方案

1. jQuery Deferred

2. Promise

3. async/await

4. generator（并不是解决异步的，原理比较复杂，忽略）

巴特西