Javascript中call、apply和bind的区别以及源码解析

我们知道在javascript中call和apply以及bind都可以改变this指向，那么它们是怎么实现的呢？彼此之间有什么区别呢？首先我们先来分别解析一下它们： （一）call 首先我们先来看一下如何使用call:

var value = 'window'; var obj = { value: 'obj' } function show(num1, num2) { console.log(this.value); console.log(num1 + num2); } show(10,100); //window 110 show.call(obj,10,100); //obj 110 show.call(null,10，100); //window 110

如上面输出结果可以看出： 1.call方法的第一个参数用于改变this指向，但是如果传入null/undefined值，this会指向window 2.call方法需要把实参按照形参的个数传进去 现在我们已经知道如何使用call以及它的规则，那么我们来封装一个自己的call方法

Function.prototype.myCall = function () { var ctx = arguments[0] || window; ctx.fn = this;//谁调用myCall方法，this就指向谁 //由于使用call方法的时候，参数的个数是不确定的，但是我们现在又想执行fn方法,可以使用eval来实现 //也就是eval('ctx.fn(arguments[1],arguments[2]....'),这里使用一个args数组来拼接arguments[1],arguments[2].....字符串 var args = []; for (var i = 1; i < arguments.length; i++) { args.push('arguments[' + i + ']'); } var result = eval('ctx.fn(' + args.join(',') + ')'); delete ctx.fn; return result; } show.myCall(obj, 10, 100);

(二)apply 也是一样，先来看一下它该如何使用：

show.apply(obj, [10, 100]);//obj 110 show.apply(null, [10, 100]);//window 110

apply方法与call方法十分相似，只是传参列表不同： 1.apply方法的第一个参数用于改变this指向，但是如果传入null/undefined值，this会指向window 2.apply方法的第二个参数需要传入一个实参列表，也就是arguments

Function.prototype.myApply = function (ctx, arr) { ctx = ctx || window; ctx.fn = this; var result; if (arr) { var args = []; for (var i = 0; i < arr.length; i++) { args.push('arr[' + i + ']'); } result = eval('ctx.fn(' + args.join(',') + ')'); } else { result = ctx.fn(); } delete ctx.fn; return result; }

（三）bind方法 同样，先来看一下如何使用它：

var value = 'window'; var obj = { value: 'obj' }; Parent.prototype.value = 'parent'; function Parent() { } Child.prototype = new Parent(); function Child() { } function show(name, age) { console.log(this.value, name, age); } show();//window undefined undefined var newShow1 = show.bind(obj); newShow1();//obj undefined undefined var newShow2 = show.bind(null); newShow2();//window undefined undefined var newShow3 = show.bind(obj, 'test');//函数拥有预设的初始参数 newShow3();//obj test undefined new newShow3();//undefined test undefined var oS = Child.bind(obj); var fn = new oS(); console.log(fn, fn.value);//Child{} "parent" 当使用new 操作符调用绑定函数时，参数obj无效。

根据上面的运行结果，我们可以总结一下bind的用法规则： 1.bind() 函数会创建一个新函数（称为绑定函数），新函数与被调函数（绑定函数的目标函数）具有相同的函数体 2.bind方法的第一个参数也是用于改变this指向，如果传入null/undefined，this会指向window 3.一个绑定函数也能使用new操作符创建对象：这种行为就像把原函数当成构造器。提供的 this 值被忽略 4.bind方法可以使函数拥有预设的初始参数。这些参数（如果有的话）作为bind()的第二个参数跟在this（或其他对象）后面，之后它们会被插入到目标函数的参数列表的开始位置，传递给绑定函数的参数会跟在它们的后面。

现在来封装一个自己的bind方法吧

Function.prototype.myBind = function (target) { target = target || window;//如果没有传入,就为window var self = this;//谁调用myBind，this就指向谁 var args = [].slice.call(arguments, 1);//args:[arguments[1],arguments[2]....] var temp = function () { }; var fn = function () { var fnArgs = [].slice.call(arguments, 0); //this 如果new fn() this 指向构造出来的对象，否则为window ;this instanceof fn看this的原型链上有没有fn的原形 return self.apply(this instanceof fn ? this : target, args.concat(fnArgs)); } temp.prototype = this.prototype; fn.prototype = new temp(); //形成继续关系 fn.prototype.__proto__ == this.prototype true return fn; } var newShow5 = show.myBind(obj, 'test1'); newShow5(1);//obj test1 1 var test = Child.bind(obj); var fn = new test(); console.log(fn, fn.value);//Child {} "parent"