使用另一种方式实现js中Function的调用(call/apply/bind)
在JavaScript中函数的调用可以有多种方式，但更经典的莫过于call和apply。call跟apply都绑定在函数上，他们两个的第一个参数意义相同，传入一个对象，他作为函数的执行环境（实质上是为了改变函数的Execution Context执行上下文），也就是this的指向；而第二个参数两者只是类型的不同，call传的是arguments，而apply传的是array。废话不多说，先上一个最基础的例子：
function add(c,d){ return this.a + this.b + c + d; } var o = { a: 1, b: 2 } add.call(o,3,4) // 10 add.apply(o,[3,4]) // 10
再比如我之前看过的Twitter上的关于call和apply的一个面试题：定义一个函数log，传入任意数量参数，让它模拟console.log的方法，形如log('hello','world');
function log(){
console.log.apply(console,arguments);
}
当执行这个log函数时，该函数的执行上下文为console对象，arguments为传入的实参。
然后此题又有需求，如果要给每个log信息加一个(app)前缀,比如 '(app) hello world';
这时我们应该想到一点，那就是我们传入的实参，也就是arguments并不是一个数组，它实质上只是一个类数组的对象，我们在这里可以用 instanceof 来判断自定义对象。
instanceof的意思就是看左边对象的原型链上是否有右边构造器的prototype属性。由上图可以看出arguments是一个类数组的对象,并且可以看出arguments没有array的方法。
所以回到刚才那个题，我们必须让传入的实参变为Array类型才可以调用数组的unshift方法（在它的前面加上app）。
function log(){ var args = Array.prototype.slice.call(arguments); args.unshift('(app)'); console.log.apply(console,args); } log('hello','world'); // (app) hello world
在OOP面向对象中此方法用的更加多一些，当我们不想为另一个对象创建方法的时候，可以用call调用foo的方法。
function foo () {} foo.prototype.name = 'james'; foo.prototype.sayHello = function(){ console.log(this.name); } var obj1 = new foo(); obj1.sayHello(); //james var obj2 = { name: 'bond' } obj1.sayHello.call(obj2); //bond
再比如如果要想调用一些不能直接调用的方法，比如Object.prototype.toString(),我们也可以用call,它的本质在于将内部的变量改为包装对象。
这个对象原型的方法指向window，也就是this，但是如果把log函数里call指向的对象改为window的话，就会输出global。因为在执行上下文中的全局对象为Global Context，
比方说全局的Math，String，window都存在于[[global]]变量对象中。
window对象依附于Global全局变量对象,虽然权威上来说在NodeJS里全局是Global对象，但是在全局执行上下文中window指向global，请看下图。
function log(){
console.log(this===window); // true return Object.prototype.toString.call(this); } log.call(5) // [Object Number] log.call(true) // [Object Boolean]
对于js中的bind方法，他跟apply和call基本一样，里面传递的参数也是改变this指向的,比方下面一个关于执行上下文的代码，通过bind改变this的指向。
var User = { count: 1, getCount: function(){ return this.count; } } var func = User.getCount; console.log(func()); //undefined
var func1 = User.getCount.bind(User)
console.log(func1()); // 1
上面的答案是undefined，因为func是在全局作用域window中，window里面没有count属性，所以我们为了让this指向User对象，我们便想到了使用bind。但是bind是es5才有的方法，不兼容老版本浏览器，那如何解决这个问题呢？下面是我从火狐的MDN上拿下来的bind模拟。
if(!Function.prototype.bind){ Function.prototype.bind = function(oThis){ if(typeof this !== 'function'){ throw new TypeError('What is trying to be bound is not callable'); } var args = Array.prototype.slice.call(arguments,1), fTobind = this, //指向调用bind的函数 fNOP = function(){}, //创建一个空函数，为了下面的继承 fBound = function(){ return fTobind.apply(this instanceof fNOP ? this : oThis, //改变this的指向 args.concat(Array.prototype.slice.call(arguments))); //将通过bind传递的参数与调用时传的参数合并 }; fNOP.prototype = this.prototype; //将目标函数的原型传递到新函数中 fBound.prototype = new fNOP; //这两条相当于Object.create的作用 return fBound; } }
我们通过下面这个例子来分析它吧：
function foo(){ this.b = 100; return this.a; }; var func = foo.bind({a:1}); func() // 1 new func() // {b:100}
fBound指向新函数func，因为foo调用的bind方法，所以fToBind指向目标函数foo，在func()里面this指向传进去的对象，也就是bind模拟里面的oThis，通过this instanceof fNOP来判断this的指向，因为func()是window调用下的，所以this指向window，所以this instanceof fNOP 返回false，所以oThis也就是传入的{a:1}为当前的执行上下文，所以弹出1。但如果是对象调用( new Func() )的话，this instanceof fNOP中的this会指向一个空对象，空对象的原型会指向构造器的prototype属性,即func的prototype属性，这里注意一点，因为foo 中 return的不是对象，所以忽略return。
