一.call、apply、bind作用
在JavaScript中,call、apply和bind是Function对象自带的三个方法。这三个函数的存在意义是什么?答案就是改变函数运行时的this指向。下面我们通过实际例子来介绍这三个方法的使用和区别。
二.call
语法:fn.call(thisArg,arg1,arg2,...)
thisArg:函数fn运行时,该函数中的this绑定到thisArg上。
arg1,arg2,...:函数fn所需的参数,是个list
我们直接看例子:
var a ={
name : "test",
fn : function (a,b) {
console.log(this.name, a + b)
}
}
var b={name:'test1'}
a.fn(1,2) //test 3
a.fn.call(b,1,2) //test1 3
执行 a.fn(1,2)
,fn中的this指向a,所以输出 test 3
执行 a.fn.call(b,1,2)
,通过call改变了fn中的this指向为b,所以输出 test1 3
注意事项:
- thisArg不传,或者传null,undefined, 函数中的this指向window对象
- thisArg为原始值(数字,字符串,布尔值),函数中this指向该原始值的自动包装对象(如 String、Number、Boolean)
- thisArg为一个对象,函数中的this指向这个对象
- thisArg为一个函数名,函数中的this指向该函数
- 前四点是默认在非严格模式下,如果在严格模式下,会略有不同。
我们直接看例子:
function a(params) {
console.log(this);
}
function b() {}
var obj = {
name: '这是一个屌丝'
};
// 正常模式下 严格模式下
a.call(); //window undefined
a.call(null); //window null
a.call(undefined); //window undefined
a.call(1); //Number{1} 1
a.call(''); //String{''} ''
a.call(true); //Boolean{true} true
a.call(b); //function b(){} function b(){}
a.call(obj); //Object Object
三.apply
语法:fn.call(thisArg,[arg1,arg2,...])或者 fn.call(thisArg,{0:arg1,1:arg2,...,lenght:总个数})
thisArg:函数fn运行时,该函数中的this绑定到thisArg上。
[arg1,arg2,...]或者形如{0:arg1,1:arg2,...,lenght:总个数}:函数fn所需的参数,是个数组或者类数组,call函数会自动将数组或类数组的每个值分开成列表然后给函函数fn
例子和上面一样,只需要把call
换成apply
即可。其他都一样,包括上面call的几点注意事项即不传或者传null等。
四.bind
语法:fn.bind(thisArg,arg1,arg2,...)()
thisArg:函数fn运行时,该函数中的this绑定到thisArg上。
arg1,arg2,...:函数fn所需的参数,是个list
bind其实和call类似,包括上面call的几点注意事项即不传或者传null等,只不过后面多个()
。我们直接看例子
var a = {
name: "test",
fn: function (a, b) {
console.log(this.name, a + b)
}
}
var b = {
name: 'test1'
}
a.fn.bind(b, 1, 2)
运行上面代码,我们发现控制台并没有输出,所以我们可以看出bind 是创建一个新的函数,我们必须要手动去调用。我们更改代码:
var a = {
name: "test",
fn: function (a, b) {
console.log(this.name, a + b)
}
}
var b = {
name: 'test1'
}
a.fn.bind(b, 1, 2) //test1 3
上面我们手动调用,发现正确输出结果。
五.call apply bind三者区别总结
1.call和apply用法一样,唯一的区别是call的参数为列表,apply参数为数组
2.bind和call用法一样,唯一的区别是call会自执行函数,bind需要手动调用函数
六.应用
1.继承
var Person = function (name, age) {
this.name = name;
this.age = age;
};
var Girl = function (name) {
Person.call(this, name);
};
var Boy = function (name, age) {
Person.apply(this, arguments);
}
var Boy1 = function (name, age) {
Person.bind(this, name)();
}
var g = new Girl('xiaohong');
var b = new Boy('xiaoming', 100);
var b1 = new Boy1('xiaowang', 100);
console.log(g); //{name: "xiaohong", age: undefined}
console.log(b); //{name: "xiaoming", age: 100}
console.log(b1); //{name: "xiaowang", age: undefined}
上面例子,我们定义了四个构造函数,通过new实例化调用Girl、Boy、Boy1这三个构造函数,在这三个构造函数中分别使用call、apply、bind继承Person的属性。
我们来看下它到底是怎么继承的?
var Person = function (name, age) {
this.name = name;
this.age = age;
};
var Girl = function (name) {
Person.call(this, name);
};
var g = new Girl('xiaohong');
1.先执行g=new Girl('xiaohong');
此时执行Girl函数,并执行函数里面的代码Person.call(this, name);
2.Person.call(this, name);
中的this指向调用方,即实例g. 通过call方法后,会调用person函数,本来person的this指向被调用方,此时person函数的this被改变成实例g
3.所以就变成g.name=name; g.age=age
4.所以通过girl实例化出的g相当于继承了person里面的属性
2.求数组中的最大和最小值
var ary = [0, 1, 1, 3, 4, 5, 6, 7];
console.log(Math.max(0, 1, 1, 3, 4, 5, 6, 7)); //7
console.log(Math.min(0, 1, 1, 3, 4, 5, 6, 7)); //0
var max = Math.max.apply(null, ary);
var min = Math.min.apply(null, ary);
console.log(max,min); //7 0
上面例子可以看出,正常情况下,Math.max和Math.min
的参数为必须为列表,上面只用0-7
八个数字还好,但如果数据很多,都放到参数会比较麻烦。
所以我们借助apply可以将数组转换成列表的功能,这样我们就可以直接传递一个变量了。第一个参数这里使用null
,实际换成其他都可以(如随便一个字符串、数字、对象等),这里主要使用的是call函数的 数组转列表功能。
3.类数组转数组
Array.prototype.slice.call(arrayLike) 或者 Array.prototype.slice.apply(arrayLike)
具体可以戳这javascript中的伪(类)数组和数组
4.数组追加
在js中我们往数组追加元素,一般使用push方法。
var arr1 = [1,2,3];
var arr2 = [4,5,6];
arr1.push(4,5,6)
console.log(arr1) //[1,2,3,4,5,6]
我们也可以使用apply方法:
var arr1 = [1,2,3];
var arr2 = [4,5,6];
[].push.apply(arr1,arr2)
console.log(arr1) //[1,2,3,4,5,6]
上面代码意思表示:[]调用push方法,然后通过call将push方法中的this指向arr1,并将arr2转变成参数列表。这样就达到合并的目的。
5. 判断变量类型
Object.prototype.toString.call/apply(object);