Apply和Call

在开始，我们带着这几个疑问

apply和call的区别是什么？
什么情况下使用apply，什么情况下使用call
apply的其他妙用

Apply

方法可以劫持另外一个对象的方法，继承另外一个对象的属性

Function.apply(obj,args)方法能接受两个参数

obj:这个对象将代替Function类里的this对象

args:这个是数组，他将作为参数传给Function

Call

和apply的意思一样，只不过参数列表不一样

Function.call(obj,[param1[,param2[,…[,paramN]]]])

obj：这个对象将代替Function类里this对象

params：这个是一个参数列表

Apply实例

Function Person (name,age){
    this.name = name;
    this.age = age
}

Function Student (name,age,grade){
    Person.apply(this,arguments);
    this.grade = grade;
}

var student = new Student('zhangsan',21,'一年级')

//测试  
alert("name:"+student.name+"\n"+"age:"+student.age+"\n"+"grade:"+student.grade);  
//大家可以看到测试结果name:zhangsan age:21  grade:一年级  
//学生类里面我没有给name和age属性赋值啊,为什么又存在这两个属性的值呢,这个就是apply的神奇之处.

分析：Person.apply(this,arguments);

this:在创建对象的时候代表的是student

arguments:是一个数组，也就是['zhangsan',21,'一年级']

通俗的讲就是：用student去执行Person这个类里面的内容，在Person这个类里面存在this.name等之类的语句，这样就将属性创建到了student对象里面

Call实例

Person.call(this,name,age)

什么情况下用apply，什么情况用call

在给对象参数的情况下,如果参数的形式是数组的时候,比如apply示例里面传递了参数arguments,这个参数是数组类型,并且

在调用Person的时候参数的列表是对应一致的(也就是Person和Student的参数列表前两位是一致的) 就可以采用 apply

如果我的Person的参数列表是这样的(age,name),而Student的参数列表是(name,age,grade),这样就可以用call来实现了,也就是直接指定参数列表对应值的位置(Person.call(this,age,name,grade));

Apply的一些其他妙用

apply可以将一个数组默认转换为一个参数列表([param1,param2,param3]=>param1,param2,param3) 借助这个特性：

Math.max 可以实现得到数组中最大的一项

Math.max 参数里面不支持Math.max([param1,param2])

var max=Math.max.apply(null,array)

apply会将一个数组装换为一个参数接一个参数的传递给方法

总结：

一般在目标函数只需要n个参数列表,而不接收一个数组的形式（[param1[,param2[,…[,paramN]]]]）,可以通过apply的方式巧妙地解决这个问题!

数组之间的追加

var array1 = [12 , "foo" , {name:"Joe"} , -2458]; 
var array2 = ["Doe" , 555 , 100]; 
Array.prototype.push.apply(array1, array2);

上面的array1定义了this只想array1，后面的array2提供了她的参数

类（伪）数组使用数组方法

什么是类数组

拥有length属性，其它属性（索引）为非负整数
不具有数组所具有的方法

//类数组示例
var a = {'1':'gg','2':'love','4':'meimei',length:5};
Array.prototype.join.call(a,'+');//'+gg+love++meimei'

通过Array.isArray(a)方法判断为false

var domNodes = Array.prototype.slice.call(document.getElementsByTagName("*"));

JavaScript中存在一种名为伪数组的对象结构。比如arguments对象，childNodes之类的，他们返回的NodeList对象都属于伪数组，不可以用Array的push和pop犯法。

但是！ 我们可以通过 Array.prototype.slice.call转换为真正的数组带有length属性的对象，然后就可以用Array下的所有方法了

Bind 绑定函数

bind() 最简单的用法是创建一个函数，使这个函数不论怎么调用都有同样的this值。

bind() 的传参顺序是传入的预定义参数+原本的参数

function list() {
  return Array.prototype.slice.call(arguments);
}

var list1 = list(1, 2, 3); // [1, 2, 3]

// 预定义参数37
var leadingThirtysevenList = list.bind(undefined, 37);

var list2 = leadingThirtysevenList(); // [37]
var list3 = leadingThirtysevenList(1, 2, 3); // [37, 1, 2, 3]

apply、call、bind比较

var obj = {
    x: 81,
};
 
var foo = {
    getX: function() {
        return this.x;
    }
}
 
console.log(foo.getX.bind(obj)());  //81
console.log(foo.getX.call(obj));    //81
console.log(foo.getX.apply(obj));   //81

注：三个输出的都是81，但是注意看使用 bind() 方法的，他后面多了对括号。

即：当你希望改变上下文环境之后并非立即执行，而是回调执行的时候，使用 bind() 方法。而 apply/call 则会立即执行函数。

apply 、 call 、bind 三者都是用来改变函数的this对象的指向的；
apply 、 call 、bind 三者第一个参数都是this要指向的对象，也就是想指定的上下文；
apply 、 call 、bind 三者都可以利用后续参数传参；
bind 是返回对应函数，便于稍后调用；apply 、call 则是立即调用。

仅用于个人整理，参考

JS apply方法详解

Apply、Call、Bind