弹性布局display:flex与bind源码

1.display:flex

        1.1  flex:1涉及三个层面的设置

        1）  flex-grow  根据弹性盒子元素所设置的扩展因子作为比率来扩展空间

                flex-grow:数值(2、3等)

        2） flex-shrink   根据弹性盒子元素所设置的收缩因子作为比率来收缩空间

                flex-shrink  的默认值为1,即

                flex-shrink:1

        3)   flex-basis  指定flex元素在主轴方向上的初始大小

              flex-basis:18px(em)

              flex-basis:auto

        1.2  order 元素顺序

              order 决定flex内的子元素的顺序

             当调节转行或列的方向还不够时，这时候可以设置单个元素的order属性

              元素order属性的默认值为0

              注意：可以设置为正数或者负数

        1.3  flex-flow简写

                是flex-direction和flex-wrap两个一起使用时候的简写，两个值中间用空格隔开

                代码书写：

flex-flow: <flex-direction> <flex-wrap>;

2.bind源码

this  apply   call  bind 

其中apply、call、bind都可以改变this的指向

判断this指向的代码

 var name = "windowsName";
    function a() {
        var name = "Cherry";

        console.log(this.name);          // windowsName

        console.log("inner:" + this);    // inner: Window
    }
    a();
    console.log("outer:" + this)         // outer: Window

   apply:传入的参数是包含多个参数的数组

   call:传入的参数是若干个参数列表

   bind:是创建一个新的函数

模拟bind源码

 // 所有的函数都可以使用的属性 
        // function test(){}   -> Function
        // test.__proto__ -> Function.prototype

            Function.prototype.newBind = function(target){
            // 1.记录函数调用bind后 要改变的指向
            target = target || window;
            // 2. 保留调用newBind时 从下标1开始的传递的参数
            var args = Array.prototype.slice.call(arguments,1);
            // 3. 保留调用newBind的函数 a
            var that = this;
            return function f(){
                // 4.将后续参数与第一次传递参数 拼接
                var _args = args.concat([].slice.call(arguments));
                // console.log(_args);
                // console.log(that);
                // 5. 如何判断当前函数f是否通过new调用  
                if(new.target){
                    // console.log(this);
                    // new 调用
                    that.apply(this,_args);
                }else{
                    that.apply(target,_args);
                }
            }
        }
        // 
        var f = a.newBind(obj,10);
        f(20);           // this -> obj

        new f(20);       // this -> {}