JavaScript学习笔记apply、call、bind用法说明

首先，在使用call，apply，bind方法时，我们有必要知道这三个方法究竟是来自哪里？为什么可以使用的到这三个方法？

call，apply，bind这三个方法其实都是继承自Function.prototype中的，属于实例方法。

console.log(Function.prototype.hasOwnProperty(‘call’)) //true

console.log(Function.prototype.hasOwnProperty(‘apply’)) //true

console.log(Function.prototype.hasOwnProperty(‘bind’)) //true

上面代码中，都返回了true，表明三种方法都是继承自Function.prototype的。当然，普通的对象，函数，数组都继承了Function.prototype对象中的三个方法，所以这三个方法都可以在对象，数组，函数中使用。

一、首先说一下apply、call、bind的作用

apply 和 call都是为了改变某个函数运行时的 context 即上下文而存在的，换句话说，就是为了改变函数体内部 this 的指向。call 和 apply二者的作用完全一样，只是接受参数的方式不太一样。

bind方法的主要作用就是将函数绑定至某个对象,bind() 方法会创建一个函数，函数体内this对象的值会被绑定到传入bind() 函数的值。即改变函数的上下文对象。

二、apply、call、bind定义

apply方法：

语法：apply([thisObj[,argArray]])

定义：应用某一对象的一个方法，用另一个对象替换当前对象。

说明：

如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。

如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用作 thisObj， 并且无法被传递任何参数。

call方法:

语法：call([thisObj[,arg1[, arg2[, [,.argN]]]]])

定义：调用一个对象的一个方法，以另一个对象替换当前对象。

说明：

call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。

bind方法：

语法：fun.bind(this,[,arg1[, arg2[, [,.argN]]]]])

定义：bind()方法会创建一个新的函数，称为绑定函数,fun方法在this环境下调用,该方法可传入两个参数，第一个参数作为this，第二个及以后的参数则作为函数的参数调用

说明：在EcmaScript5中扩展了叫bind的方法（IE6,7,8不支持)

也可以参考官方文档的解释：apply 、call 、bind

三、使用示例

1、调用函数

Example1

function add(a,b)
{
alert(a+b);
}
function sub(a,b)
{
alert(a-b);
}
add.call(sub,3,1); //或者 add.apply(sub, [3, 1]);

这个例子中的意思就是用 sub对象上下文来替换 add对象上下文，add.call(sub,3,1) == add(3,1) ，所以运行结果为：

alert(4); // 注意：js 中的函数其实是对象，函数名是对 Function 对象的引用。

Example2

var info = 'tom';
function foo(){
//this指向window
var info = 'jerry';
console.log(this.info);  //tom
console.log(this===window)   //true
}
foo();
foo.call();
foo.apply();

2、call和apply可以改变函数中this的指向

Exmaple1

var obj = {
info:'spike'
};
foo.call(obj);    //这里foo函数里面的this就指向了obj
foo.apply(obj);

Example2

function Animal() {
this.name = "Animal";
this.showName = function () {
alert(this.name);
}
}
function Dog() {
this.name = "Dog";
}
var animal = new Animal();
var dog = new Dog();
animal.showName.apply(dog, []);
animal.showName.call(dog, "");

通过call或apply方法，将原本属于Animal对象的showName()方法交给对象cat来使用了。call 的意思是把 animal 的方法放到dog上执行，原来dog是没有showName() 方法，现在是把animal 的showName()方法放到 dog上来执行，所以this.name 应该是 Dog。

3、实现继承

function Animal(name) {
this.name = name;
this.showName = function () {
alert(this.name);
}
}
function Dog(name) {
Animal.call(this, name);
}
var dog = new Dog("dog");
dog.showName();

Animal.call(this) 的意思就是使用 Animal对象代替this对象，那么 Dog中不就有Animal的所有属性和方法了吗，Dog对象就能够直接调用Animal的方法以及属性了

4、其他用法

一、合并数组

var arr1=[1,3,4];
var arr2=[3,4,5];
//自从有了Apply,事情就变得如此简单
Array.prototype.push.apply(arr1,arr2);

二、计算数组中的最大值

var arr = [123,34,5,23,3434,23];
//方法一
var arr1 = arr.sort(function(a,b){
return b-a;
});
console.log(arr1[0]);
//方法二
var max = Math.max.apply(null,arr)   //借用别的对象的方法
console.log(max);

5、在apply、call应用

在实际开发中，经常会遇到this指向被不经意改变的场景。

有一个局部的fun方法，fun被作为普通函数调用时，fun内部的this指向了window，但我们往往是想让它指向该#test节点，见如下

window.id="window";
document.querySelector('#test').onclick = function(){
console.log(this.id);//test
var fun = function(){
console.log(this.id);
}
fun();//window
}

使用call,apply我们就可以轻松的解决这种问题了

window.id="window";
document.querySelector('#test').onclick = function(){
console.log(this.id);//test
var fun = function(){
console.log(this.id);
}
fun.call(this);//test
}

当然你也可以这样做，不过在ECMAScript 5的strict模式下，这种情况下的this已经被规定为不会指向全局对象，而是undefined

window.id="window";
document.querySelector('#test').onclick = function(){
var that = this;
console.log(this.id);//test
var fun = function(){
console.log(that.id);
}
fun();//test
}

function func(){
"use strict"
alert ( this );  // 输出：undefined
}
func();

6、bind示例

function T(c) {
this.id = "Object";
this.dom = document.getElementById("scroll");
}
T.prototype = {
init: function() {
//①
this.dom.onmouseover = function() {
console.log("Over-->"+this.id);
}
//②
this.dom.onmouseout = function() {
console.log("Out -->"+this.id);
} .bind(this)
}
};
(new T()).init();

结果：



通过①和②的对照加上显示的结果就会看出bind的作用：改变了上下文的this

bind与call很相似,，例如，可接受的参数都分为两部分，且第一个参数都是作为执行时函数上下文中的this的对象。

不同点有两个：

一、bind的返回值是函数

//都是将obj作为上下文的this
function func(name,id) {
console.log(name,id,this);
}
var obj = "Look here";
//什么也不加,直接调用
func("    ","-->");
//使用bind是 返回改变上下文this后的函数
var f = func.bind(obj, "bind", "-->");
f();
//使用call是 改变上下文this并执行函数
var f1 = func.call(obj, "call", "-->");

结果：





二、后面的参数的使用也有区别

function f(a,b,c){
console.log(a,b,c);
}
var f_Extend = f.bind(null,"extend_A")
f("A","B","C")；  //这里会输出--> A,B,C
f_Extend("A","B","C");  //这里会输出--> extend_A,A,B
f_Extend("B","C");  //这里会输出--> extend_A,B,C
f.call(null,"extend_A"); //这里会输出--> extend_A,undefined,undefined

call 是 把第二个及以后的参数作为f方法的实参传进去

而bind 虽说也是获取第二个及以后的参数用于之后方法的执行，但是f_Extend中传入的实参则是在bind中传入参数的基础上往后排的。

var f_Extend = f.bind(null,"extend_A");//等价于如下代码
var f_Extend = function(b,c){
return f.call(null,"extend_A",b,c);
}

示例二

var eleBtn = document.getElementById(“button”)

, eleText = document.getElementById(“text”);

eleBtn.onclick = function(color) {

color = color || “#003399”;

this.style.color = color;

}.bind(eleText, “#cd0000”);

示例三

举一个应用场景：例如现在有一个方法 根据不同的文件类型进行相应的处理，通过bind 就可以创建出简化版的处理方法

function FileDealFunc(type,url,callback){

if(type==”txt”){…}

else if(type==”xml”){…}

…..

}

var TxtDealFunc = FileDealFunc.bind(this,”txt”);

//这样使用的时候更方便一些

FileDealFunc(“txt”,XXURL,func); //原来

TxtDealFunc(XXURL,func); //现在

四、扩展bind方法，使IE6、IE7、IE8也支持bind方法。

if (!Function.prototype.bind) {
Function.prototype.bind = function(obj) {
var _self = this
,args = arguments;
return function() {
_self.apply(obj, Array.prototype.slice.call(args, 1));
}
}
}

五、bind与call/apply的总结

1：第一个参数都是指定函数内部中this的指向（函数执行时所在的作用域，改变函数执行的上下文环境），然后根据指定的作用域，调用该函数。

　　2：都可以在函数调用时传递参数。call，bind方法需要直接传入，而apply方法需要以数组的形式传入。

　　3：call，apply方法是在调用之后立即执行函数，而bind方法没有立即执行（一般用在异步调用和事件），需要将函数再执行一遍。有点闭包的味道。

　　4：改变this对象的指向问题不仅有call，apply，bind方法，也可以使用that变量来固定this的指向