promise介绍

在异步中，为了解决回调地狱的问题，ES6统一了promise的使用方法，所谓promise，其实就是一个容器，Promise本身不是异步的，但往往会在内部套用一个异步的函数。那么，什么是回调地狱呢？如下图所示。

请求1(function(请求结果1){
    请求2(function(请求结果2){
        请求3(function(请求结果3){
            请求4(function(请求结果4){
                请求5(function(请求结果5){
                    请求6(function(请求结果3){
                        ...
                    })
                })
            })
        })
    })
})

回调地狱带来的负面作用有以下几点：

代码臃肿。可读性差。耦合度过高，可维护性差。代码复用性差。容易滋生 bug。只能在回调里处理异常。

promise特点

（1）promise存在三种执行状态：pending（进行中）、fulfilled（已成功）和rejected（已失败） （2）promise对象的状态改变，只能由 Pending --> Fulfilled 或者 Pending --> Rejected，且一但发生改变便不可二次修改；

promise的书写方法：

new Promise(请求1)
    .then(请求2(请求结果1))
    .then(请求3(请求结果2))
    .then(请求4(请求结果3))
    .then(请求5(请求结果4))
    .catch(处理异常(异常信息))

比较一下这种写法和上面的回调式的写法。我们不难发现，Promise 的写法更为直观，并且能够在外层捕获异步函数的异常信息。

promise举例

resolve和reject的应用

举例：通过输出一个随机数，当数字为小于等于5时，输出resolved 数字，反之，输出rejected 数字太大了

 let p = new Promise((resolve, reject) => {
      //做一些异步操作    
     setTimeout(function(){
        var num = Math.ceil(Math.random()*10); //生成1-10的随机数
        if(num<=5){
            resolve(num);
        }
        else{
            reject('数字太大了');
        }
  
  }, 2000);
});
p.then((data) => {
        console.log('resolved',data);
    },(err) => {
        console.log('rejected',err);
    }
);

思考：面试题案例

Promise.resolve().then(() => {
    console.log(0);
    return Promise.resolve(4);
}).then((res) => {
    console.log(res)
})

Promise.resolve().then(() => {
    console.log(1);
}).then(() => {
    console.log(2);
}).then(() => {
    console.log(3);
}).then(() => {
    console.log(5);
}).then(() =>{
    console.log(6);
})

输出结果：0、1、2、3、4、5、6

闭包函数

什么是闭包函数？

函数嵌套了函数，内部函数使用外部函数的变量或者参数，导致参数或者变量长期驻扎内存中；缺点：内存不能被释放（内存泄漏），最终被占完。

代码验证

(function demo(obj){
    let name="张三";

    function f1(){
        console.log("f1=>"+name)
    };
    function f2(){
        console.log("f2=>"+name)
    };
    //暴露接口
    window.f1=f1();
    window.f2=f2();
})(window)

打印结果：f1=>张三
         f2=>张三

区分call 、apply、bind

举例

let obj0 = {
    name: 'xxx',
    demo0: function () {
        console.log(this.name)
    }
}
let obj1 = {
    name: "yyy",
    demo1: function () {
        console.log(this.name)
    }
}
//call:
    obj0.demo0.call(obj1, 123, 134, 432)
//apply:
    obj1.demo1.apply(obj0, [123, 123, 231])
//bind: 传递数组
    var newobj = obj0.demo0.bind(obj1, 3244)

newobj(); //需要手动调用

打印结果
yyy
xxx
yyy

总结call , apply 和bind的区别

1.都可以更改this指向 2.call，bind后面的第一个参数是指向的对象，第二个参数是往对象传的值 3.apply后面的第一个参数是指向的对象，第二个参数是数组，数组里面是往对象传的值（arguments 全部参数） 4.call和apply更改this指向会自动调用，bind需要手动调用

原型

原型的概念

JavaScript的所有对象中都包含了一个 [proto] 内部属性，这个属性所对应的就是自身的原型JavaScript的函数对象，除了原型 [proto] 之外，还有 prototype 属性，当函数对象作为构造函数创建实例时，该 prototype 属性值将被作为实例对象的原型 [proto]

什么是原型链？

一个对象A调用方法的时候，会先从自身找有没有这个方法，如果没有就找自己的原型，看有没有该方法，没有就继续找对象A的父类B的原型，就这样一级一级往上找，称之为原型链。任何一级找到就直接调用，不再往上找，如果到最后都没找到就报错。

flex弹性布局

flex容器定义

基本语法：

.box { display: flex; /* 或者 inline-flex */ }

flex-direction

flex-direction属性决定主轴的方向（即项目的排列方向）。基本语法： .box { flex-direction: row | row-reverse | column | column-reverse; }

row 表示从左向右排列 row-reverse 表示从右向左排列 column 表示从上向下排列 column-reverse 表示从下向上排列

flex-wrap

缺省情况下，Flex项目都排在一条线（又称"轴线"）上。我们可以通过flex-wrap属性的设置，让Flex项目换行排列。

基本语法： .box { flex-wrap: nowrap | wrap | wrap-reverse; }

nowrap(缺省)：所有Flex项目单行排列 wrap：所有Flex项目多行排列，按从上到下的顺序 wrap-reverse：所有Flex项目多行排列，按从下到上的顺序

flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap 基本语法： .box { flex-flow: <‘flex-direction’> || <‘flex-wrap’> }

justify-content

justify-content属性定义了项目在主轴上的对齐方式及额外空间的分配方式。基本语法： .box { justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly; }

flex-start(缺省)：从启点线开始顺序排列 flex-end：相对终点线顺序排列 center：居中排列 space-between：项目均匀分布，第一项在启点线，最后一项在终点线 space-around：项目均匀分布，每一个项目两侧有相同的留白空间，相邻项目之间的距离是两个项目之间留白的和 space-evenly：项目均匀分布，所有项目之间及项目与边框之间距离相等

align-items

align-items属性定义项目在交叉轴上的对齐方式。基本语法： .box { align-items: stretch | flex-start | flex-end | center | baseline; }

stretch(缺省)：交叉轴方向拉伸显示 flex-start：项目按交叉轴起点线对齐 flex-end：项目按交叉轴终点线对齐 center：交叉轴方向项目中间对齐 baseline：交叉轴方向按第一行文字基线对齐

注意：flex布局不可以和float同时使用。

面试题（1）