JS中的call，apply，bind与this

在js中&＃xff0c;所有的函数再被调用的时候都会默认传入两个参数&＃xff0c;一个是this&＃xff0c;还有一个是arguments。在默认情况下this都是指当前的调用函数的对象。但是有时候我们需要改变this的指向&＃xff0c;也就是说使函数可以被其他对象来调用&＃xff0c;那么我们应该怎样做呢&＃xff1f;这时候我们就可以使用call,apply和bind方法了。

认为call 和 apply&＃xff0c;bind 都是为了改变函数体内部 this 的指向。

看下面代码&＃xff1b;

var name&＃61;"小明",age&＃61;17;
var perz&＃61;{
name:"小张",
age:18,
thename:this.name,
theage:this.age,
myatt:function(){
console.log(this)
console.log("名字&＃xff1a;"&＃43;this.name&＃43;";年龄&＃xff1a;"&＃43;this.age&＃43;";"&＃43;this.thename&＃43;this.theage);}
}var li&＃61;{
name:"小李",
age:19,
thename:"小东",
theage:16
}
var xm&＃61;perz;
xm.myatt();
perz.myatt.call(li);
perz.myatt.apply(li);
perz.myatt.bind(li)();


>{name: "小张", age: 18, thename: "小明", theage: 17, myatt: ƒ}
名字&＃xff1a;小张;年龄&＃xff1a;18;小明17
>{name: "小李", age: 19, thename: "小东", theage: 16}
名字&＃xff1a;小李;年龄&＃xff1a;19;小东16
>{name: "小李", age: 19, thename: "小东", theage: 16}
名字&＃xff1a;小李;年龄&＃xff1a;19;小东16
>{name: "小李", age: 19, thename: "小东", theage: 16}
名字&＃xff1a;小李;年龄&＃xff1a;19;小东16

bind绑定this&＃xff1b;

var name&＃61;"小明",age&＃61;17;
var perz&＃61;{
name:"小张",
age:18,
thename:this.name,
theage:this.age,
myatt:(function(){
console.log(this)
console.log("名字&＃xff1a;"&＃43;this.name&＃43;";年龄&＃xff1a;"&＃43;this.age&＃43;";"&＃43;this.thename&＃43;this.theage);}).bind(this)//绑定this}var li&＃61;{
name:"小李",
age:19,
thename:"小东",
theage:16
}
var xm&＃61;perz;
xm.myatt();
perz.myatt.call(li);
perz.myatt.apply(li);
perz.myatt.bind(li)();


>Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}

名字&＃xff1a;小明;年龄&＃xff1a;17;undefinedundefined

>Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
名字&＃xff1a;小明;年龄&＃xff1a;17;undefinedundefined

>Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
名字&＃xff1a;小明;年龄&＃xff1a;17;undefinedundefined

>Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
名字&＃xff1a;小明;年龄&＃xff1a;17;undefinedundefined

传参

var name&＃61;"小明",age&＃61;17;
var perz&＃61;{
name:"小张",
age:18,
myatt:function(tall,weight){
console.log("名字&＃xff1a;"&＃43;this.name&＃43;";年龄&＃xff1a;"&＃43;this.age&＃43;";"&＃43;"身高&＃xff1a;"&＃43;tall&＃43;"体重:"&＃43;weight);
}
}var li&＃61;{
name:"小李",
age:19,}
var xm&＃61;perz;
xm.myatt();
perz.myatt.call(li,170,62); //传参
perz.myatt.apply(li,[170,62]);
perz.myatt.bind(li,170,62)();

名字&＃xff1a;小张;年龄&＃xff1a;18;身高&＃xff1a;undefined体重:undefined
名字&＃xff1a;小李;年龄&＃xff1a;19;身高&＃xff1a;170体重:62
名字&＃xff1a;小李;年龄&＃xff1a;19;身高&＃xff1a;170体重:62
名字&＃xff1a;小李;年龄&＃xff1a;19;身高&＃xff1a;170体重:62

call,apply和bind的异同

都是用来改变函数的this对象的指向的&＃xff0c;

第一个参数都是this要指向的对象&＃xff0c;

都可以利用后续参数传参

fun.call(thisArg, arg1, arg2, ...)

func.apply(thisArg, [argsArray])

function.bind(thisArg[, arg1[, arg2[, ...]]])

,bind 返回的是一个新的函数&＃xff0c;你必须调用它才会被执行。

apply,call,bind实例

验证是否是数组&＃xff08;前提是toString()方法没有被重写过&＃xff09;

function isArray(obj){ return Object.prototype.toString.call(obj) &＃61;&＃61;&＃61; &＃39;[object Array]&＃39; ;
}

数组追加

var array &＃61; [&＃39;a&＃39;, &＃39;b&＃39;];
var elements &＃61; [0, 1, 2];
array.push.apply(array, elements);
console.log(array)

>(5) ["a", "b", 0, 1, 2]

类数组对象转数组

var unboundSlice &＃61; Array.prototype.slice;
var slice &＃61; Function.prototype.apply.bind(unboundSlice);
arguments&＃61;{0:23,1:&＃39;jojo&＃39;,2:&＃39;pr&＃39;,length:3};
arr&＃61;slice(arguments);
console.log(arr)

>(3) [23, "jojo", "pr"]