context的概念
在知道我们为什么要使用call、apply、bind方法之前，我觉得有必要先了解一下context的相关概念，通常context的作用是取决于函数将如何被调用，当函数作为对象的方法调用时，this就会被设置为调用方法的对象：
var object = {
foo: function(){
console.log(this === object);
}
};
object.foo(); // true
当通过new一个对象的实例的方式来调用一个函数的时候，this的值将被设置为新创建的实例：
function foo(){
console.log(this);
}
foo() // window
new foo() // foo{}
当作为未绑定对象被调用时，this默认指向全局上下文或者浏览器中的window对象。然而，如果函数在严格模式下被执行，上下文将被默认为undefined
动态改变this的值
然而call、apply、bind方法允许你在自定义的context中执行函数，什么意思呢，通俗的说就是可以不遵循上面给出的部分定义，可以动态的改变this，我们直接引出MDN关于call方法的定义：
call() 方法调用一个函数, 其具有一个指定的this值和分别地提供的参数(参数的列表)
举个例子：
// 非严格模式下
function add(args) {
console.log(this);
}
function sub(args) {
console.log(this);
}
add(); // Window {frames: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …}
sub(); // Window {frames: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …}
结果是符合预期的：
当作为未绑定对象被调用时，this默认指向全局上下文或者浏览器中的window对象
我们给他加上call方法：
// 非严格模式下
function add(args) {
console.log(this);
}
function sub(args) {
console.log(this);
}
add(); // Window {frames: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …}
sub(); // Window {frames: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …}
add.call(sub,1); // ƒ sub(args) { ... }
sub.call(add,1); // ƒ add(args) { ... }
这时候this的值有点类似于第一种情况：
当函数作为对象的方法调用时，this就会被设置为调用方法的对象
看起来我们调用call方法的时候好像实际上是进行了对象方法的调用：
sub.call(add,1); //sub
=>
var sub = {
add: function(){
console.log(this);
}
};
sub.add(); // sub
这就是动态的改变了this
还有一点要注意的是，这里call和apply方法第一个参数的this值并不一定是该函数执行时真正的this值，比如在非严格模式下，我们传入null或undefined会自动指向全局对象，在浏览器环境中就是window，在node环境中就是global，另外我们还可以传入一些原始值(数字，字符串，布尔值)，这时候的this会指向这些原始值的包装对象，比如传入的是数字，会指向Number。
call和apply的区别
既然call和apply方法能够动态的改变this的值，我们可以利用这个特性来实现简单的继承，比如此时我们有一个父构造函数：
function Product(name, age) {
this.name = name;
this.age = age;
this.say = function() {
console.log(this.name+"is"+this.age+"years old");
}
}
如果我们想写一个子构造函数，只需要在子构造函数里面调用父构造函数的call方法就可以实现继承：
function Toy(name, price) {
Product.call(this, name, price);
this.self = "single";
}
实现继承的同时父子构造函数还都能分别有自己的属性，比如这里的self属性。
这里使用了call方法作为演示，其实apply方法的使用和call方法并无多大区别，重点在参数上，他们的第一个参数都是一个指定的this值，这个值可以是任意js对象，但是第二个参数有区别，call方法接受的是若干个参数的列表，而apply方法接受的是一个包含多个参数的数组，如果上面的例子用apply来写的话就是这样：
function Product(name, age) {
this.name = name;
this.age = age;
this.say = function() {
console.log(this.name+"is"+this.age+"years old");
}
}
function Toy(name, price) {
Product.apply(this, [name, price]);
this.self = "single";
}
bind方法的特殊性
之所以把bind方法单独放出来是因为bind方法和前面两者还是有不小的区别的，虽然都是动态改变this的值，举个例子：
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
有没有注意到使用bind方法时候后面还要多加上一对括号，因为使用bind只是返回了对应函数并没有立即执行，而call和apply方法是立即执行的，并且MDN还提到，当使用new操作符调用绑定函数时指定的this参数会变无效：
var obj = {
x: 81,
};
var foo = {
getX: function() {
return this.x;
}
}
var result = foo.getX.bind(obj);
console.log(new result()); //getX
bind方法的另一个应用是使一个函数拥有预设的初始函数，这些参数作为bind的第二个参数跟在this(或其他对象)后面，之后它们会被插入到目标函数的参数列表的开始位置，传递给绑定函数的参数会跟在它们的后面：
function list() {
return Array.prototype.slice.call(arguments);
}
var list1 = list(1, 2, 3); // [1, 2, 3]
// Create a function with a preset leading argument
var leadingThirtysevenList = list.bind(undefined, 37);
var list2 = leadingThirtysevenList(); // [37]
var list3 = leadingThirtysevenList(1, 2, 3); // [37, 1, 2, 3]
