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

本是古典何须时尚 2022-03-28 14:56 158阅读 0赞

**函数的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编程过程中有时是很有用的。

--------------------

**函数执行代理**

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);

静态方法直接调用

--------------------

**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)