改变this的三种方式：call，apply，bind简述

函数的call

 

function fn1(a,b) {
            console.log(a+b);
        }

        /*
        *  第一个参数设置null
        *  call 第二个，第三个。。。参数就是函数的参数
        *  apply 第二个参数是一个数组，将函数内的所有参数放在数组中传入
        *
        *
        * */
        fn1.call(null,3,4);
        fn1.apply(null,[3,4]);

 

函数名.call([thisObj[,arg1[, arg2[, [,.argN]]]]])  

//thisObj 可选项。将被用作当前对象的对象。 arg1, arg2, , argN 可选项。将被传递方法参数序列。

        

call 方法可以用来代替另一个对象调用一个方法。

call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

        　　

如果没有提供 thisObj 参数，那么 Global 对象被用作thisObj。

说明白一点其实就是更改对象的内部指针，即改变对象的this指向的内容。这在面向对象的js编程过程中有时是很有用的。

 

       function fn2(a,b) {
            this.a=a*a;
            this.b=b*b;
        }

        var obj1={};
        var obj2={};
        var obj3={};
      /*  fn2(4,5);
        console.log(a,b);*/

      for(var i=3;i<9;i+=2){
//          fn2.call(this["obj"+((i-1)/2)],i,i+1);
          fn2.apply(this["obj"+((i-1)/2)],[i,i+1])
      }
      console.log(obj1,obj2,obj3);

 

---

 

函数执行代理

 

var obj4={
            a:function (num) {
                return num+1;
            }
        };
        var obj5={
            b:function (num) {
                return num-1;
            }
        };

        function fn4(fnName,num) {
            var s=this[fnName](num);
            console.log(s);
        }


        fn4.call(obj4,"a",5);
        fn4.apply(obj4,["a",5]);
        fn4.call(obj5,"b",5);

 

call和apply时执行函数，将call和apply的第一个参数带入带函数中，替代原函数中this，函数中如果都没有this，这种替代就变得毫无意义。

混入对象代替函数内的this。

如果call和apply的第一个参数是null，原函数中this表示仍然是原来的this，不是null。

一旦参数是多个，我们通常使用参数作为数组使用，这时候使用apply。

 

---

call和apply是执行函数，将call和apply的第一个参数带入到函数中
替代原函数中this，函数中如果没有this，这种替代就变成无意义的内容
混入对象替代函数内的this。
如果call和apply的第一个参数是null，原函数中this表示仍然是原来的this，不是null
一旦参数是多个，我们通常使用参数作为数组使用，这时候使用apply
静态方法一般可以直接使用apply和call来调用执行
但是动态方法必须使用原型方法调用call和apply；

动态方式无法调用，静态方式可以使用apply 

 var arr1=[4,5,6,7];
//        arr.push.apply(null,arr1);
        Array.prototype.push.apply(arr,arr1);//是apply大多数处理数组，并方法参数是多个元素
        console.log(arr);

 

静态方法直接调用

var Method=(function () {
            return {
                a:function (num1,num2) {
                    if(num1>num2){
                        return{max:num1,min:num2};
                    }else if(num2>num1){
                        return {max:num2,min:num1};
                    }
                    return {max:null,min:null};
                },
                b:function () {
                    return {max:Math.max.apply(null,arguments),min:Math.min.apply(null,arguments)}
                }
            }
        })();
//        Method.a.apply(null,[3,5])
        var obj=Method.b.apply(null,arr);
        console.log(obj);

 

---

 

bind（绑定）

fn2.call(obj2,3,4);

 

都不相等

console.log(clickHandler.bind(obj6)===clickHandler.bind(obj6));//false
console.log(clickHandler.bind(obj6)===clickHandler);//false

 

点击一次就删除事件

var obj6={};
        var handler=clickHandler.bind(obj6);
        document.addEventListener("click",handler);
        function clickHandler(e) {
            this.x=e.x;
            this.y=e.y;
            console.log(obj6);
            document.removeEventListener("click",handler);
        }

 

---

 

函数中apply

        

语法：apply([thisObj[,argArray]])

        　　

定义：应用某一对象的一个方法，用另一个对象替换当前对象。

        　　

如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。

        　　

如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用作 thisObj， 并且无法被传递任何参数。

        

其实apply和call基本相似，这里传参的模式产生变化而已，在call中传参使用了逐个传入，apply中是以数组传参带入。

 

简单实例：

class Menu{
            constructor(parent){
                this.view=this.createView(parent);
            }
            createView(parent){
                if(this.view) return this.view;
                let div=document.createElement("div");
                Object.assign(div.style,{
                    width:"50px",
                    height:"50px",
                    backgroundColor:"red",
                    position:"absolute"
                });
                let bn=document.createElement("button");
                bn.textContent="按钮";
                div.appendChild(bn);
                this.clickHandlerBind=this.clickHandler.bind(this);
                bn.addEventListener("click",this.clickHandlerBind);
                parent.appendChild(div);
                return div;
            }
            clickHandler(e){
                this.move();
            }
            move(){
                if(!this.view) return;
                Object.assign(this.view.style,{
                    left:this.view.offsetLeft+2+"px",
                    backgroundColor:Menu.randomColor()
                })
            }
           static randomColor(){
                let col="#";
                for(let i=0;i<6;i++){
                    col+=Math.floor(Math.random()*16).toString(16);
                }
                return col;
           }
        }

        let menu=new Menu(document.body)