javascript中的call、apply、bind用法及区别

一.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

注意事项:

  1. thisArg不传,或者传null,undefined, 函数中的this指向window对象
  2. thisArg为原始值(数字,字符串,布尔值),函数中this指向该原始值的自动包装对象(如 String、Number、Boolean)
  3. thisArg为一个对象,函数中的this指向这个对象
  4. thisArg为一个函数名,函数中的this指向该函数
  5. 前四点是默认在非严格模式下,如果在严格模式下,会略有不同。

我们直接看例子:

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

具体详见另一篇文章toString()和Object.prototype.toString.call()