javascript笔记---改变函数内部this指向call(),apply(),bind()方法

柔情只为你懂 2022-12-11 15:25 189阅读 0赞

## call() ##

call() 方法调用一个对象。简单理解为调用函数的方式，但是它可以改变函数的 this 指向。  
`fun.call(thisArg, arg1, arg2, ...)`

> 1,thisArg：在 fun 函数运行时指定的 this 值  
> 2,arg1，arg2：传递的其他参数  
> 3, 返回值就是函数的返回值，因为它就是调用函数  
> 4, 因此当我们想改变 this 指向，同时想调用这个函数的时候，可以使用 call，比如继承

var o = { 
                name: "andy",
            }
            function fn(a, b) { 
                // this.name=name;
                console.log(this);
                console.log(a + b);
            }
            // call第一可以调用函数,也可以改变函数的this指向
            //将fn函数中的this指向o这个对象,
            fn.call(o, 1, 2);

输出:![Objectname: "andy"\_\_proto\_\_: Objectcall(),apply(),bind()方法.html:56 3][Objectname_ _andy_proto_ Objectcall_apply_bind_.html_56 3]

## call来继承 ##

function Father(name, id) { 
                this.name = name;
                this.id = id;
            }
            function Son(name, id) { 
                // 这里是this指向Son,所以意思是将Fathe的this指向改成指向Son的
                Father.call(this, name, id)
            }
            var son = new Son("刘德华", 18);
            console.log(son);

输出:![在这里插入图片描述][20201004084813215.png_pic_center]

## apply() ##

`fun.apply(thisArg, [argsArray])`

> 1, thisArg：在fun函数运行时指定的 this 值  
> 2,argsArray：传递的值，必须包含在数组里面  
> 3,返回值就是函数的返回值，因为它就是调用函数  
> 4,因此 apply 主要跟数组有关系,比如使用 Math.max() 求数组的最大值

var e = { 
                id: 2,
            }
            function fathe() { 
                console.log(this);
            }
            //apply可以直接调用函数,也可以改变函数里面this的指向
            fathe.apply();
            fathe.apply(e);

输出:![在这里插入图片描述][20201004093241572.png_pic_center]

## apply()通过内置数学函数对象求最大值 ##

var ar = [2, 98, 20, 53];
            console.log(Math.max.apply(Math, ar));
            console.log(Math.min.apply(Math, ar));
            console.log(Math.max(...ar));
            console.log(Math.min(...ar));

输出:![在这里插入图片描述][2020100409340734.png_pic_center]

## bind() ##

`fun.bind(thisArg, arg1, arg2, ...`

> 1,thisArg：在 fun 函数运行时指定的 this 值  
> 2,arg1，arg2：传递的其他参数  
> 3,返回由指定的 this 值和初始化参数改造的原函数拷贝  
> 4,因此当我们只是想改变 this 指向，并且不想调用这个函数的时候，可以使用 bind

var ab={ 
                name:"andy",
            }
            function fn(a,b){ 
                console.log(this);
                console.log(a+b);
            }
            //bind不会直接调用函数,而是返回一个改变了this的新函数
           var f= fn.bind(ab,2,3);
           f();

输出:![在这里插入图片描述][20201004093609337.png_pic_center]

[Objectname_ _andy_proto_ Objectcall_apply_bind_.html_56 3]: /images/20221123/bf3522cdb498403d8aee51356c78e275.png
[20201004084813215.png_pic_center]: /images/20221123/8d8e63dff6714d06af2f02f01354f6ff.png
[20201004093241572.png_pic_center]: /images/20221123/48637ffc21bf414fbdf32c23e09ce2c4.png
[2020100409340734.png_pic_center]: /images/20221123/cc886bd97020433fa2b6c9d89e85d7d5.png
[20201004093609337.png_pic_center]: /images/20221123/e702ce5737c8460fabfe07318049dc75.png