首先了解this
JavaScript中的this含义非常多，它可以是全局对象、当前对象或者任意对象、这完全取决于函数的调用方式。
1、作为函数调用
- 在函数被直接调用时this绑定到全局对象（Window）。
console.log(this) //Window
function fn(){
console.log(this)
}
fn() //Window。相当于Window.fn()
2、内部函数
- 函数嵌套产生的内部函数的this不是其父函数，仍是全局变量。
function fn(){
function fn1(){
console.log(this) //仍然是全局（Window）
}
fn1();
}
fn()
3、setTimeout、setInterval
- 这个两个方法执行的函数this也是全局对象。
document.addEventListener('click',function(){
console.log(this) //#document
setTimeout(function(){
console.log(this) //Window
},200)
},false)
4、作为构造函数调用
- 当一个函数用作构造函数时（使用new 关键字），它的this被绑定到正在构造函数的新对象。
function fn(name){
this.name = name //this是A、B、C
}
fn.prototype.printName = function(){
console.log(this.name)
}
var A = new fn('This is A')
var B = new fn('This is B')
var C = new fn('This is C')
A.printName(); // This is A
B.printName(); // This is B
C.printName(); // This is C
5、作为对象方法调用
- 当函数作为对象的方法调用时，它们的this是调用该函数的对象。
var name = 'ddd'
var a = {
name:'luoshushu',
fn:function(){
name:'luoshushu2'
console.log(this.name) //this指向a对象
}
}
a.fn() //luoshushu。
//注意：
var b = a.fn;
b() // ddd 。（这时候this指向Window）
this总结：
- fn()里面的this就是window
- fn()是strict mode（严格模式），this就是undefined
- a.b.c.fn()里面的this就是a.b.c
- new F()里面的this就是新生成的实例。
- ()=>console.log(this) （ES6箭头函数）里面的this跟外面的this的值一样。
- this就是call的第一个参数。知乎
bind
（创建）返回一个新函数，并且是函数内部this为传入的第一个参数。
var name = 'ddd'
var a = {
name:'luoshushu',
fn:function(){
console.log(this.name)
}
}
var obj = {
name:'李四'
}
a.fn() //luoshushu。 this指向a对象
a.fn.bind(window)() //ddd。this指向window
a.fn.bind(obj)() //李四。this指向obj
bind() 最简单的用法是创建一个函数，使这个函数不论怎么调用都有同样的 this 值。
var x = 9;
var module = {
x: 81,
getX: function() { console.log(this.x); }
};
module.getX(); // 返回 81
var retrieveX = module.getX;
retrieveX(); // 返回 9, 在这种情况下，"this"指向全局作用域
// 创建一个新函数，将"this"绑定到module对象
// 新手可能会被全局的x变量和module里的属性x所迷惑
var boundGetX = retrieveX.bind(module);
boundGetX(); //返回81
call
call方法调用一个函数，其具有一个指定的this值和分别地提供的参数（参数列表）
语法
fun.call(thisArg,arg1,age2,...)
参数
thisArg ：在fun函数运行时指定的this值。
注意：
- 不传，或者传null、undefined，函数中的this指向window对象
- 传递另一个函数的函数名，函数中this指向这个函数的引用。
- 传递字符串、数值和布尔类型等基础类型，函数中的this指向其对应的包装对象，如：srting number boolean
- 传递一个对象，函数中的this指向对象。
arg1,age2,...： 指定的参数列表。
返回值是你调用的方法的返回值，若该方法没有返回值，则返回undefined。
function a(){
console.log(this) //输出函数a中的this对象
}
function b(){} //定义函数
var obj = {name:'luoshushu'}; //定义对象
a.call() // Window
a.call(null) // Window
a.call(undefined) // Window
a.call(1) // Number
a.call(' ') // String
a.call(true) // Boolean
a.call(b) // function b(){}
a.call(obj) // Object。{name: "luoshushu"}
//借用数组方法。（forEach）
function sum(){
var result = 0;
// 将数组中的forEach应用到arguments上
Array.prototype.forEach.call(arguments,function(value){
console.log(value) // 遍历出2，5，7，8，2，6
result += value
})
console.log(result) //30
}
sum(2,5,7,8,2,6)
//对象转换成数组
function sum2(){
//slice返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象。且原始数组不会被修改。
var args = Array.prototype.slice.call(arguments,0)
console.log(Array.isArray(args)) //true
console.log(args) //[23, 234, 6, 5]
}
sum2(23,234,6,5)
//获取数组中的最大值和最小值
var arr = [2,34,66,7,15,-123]
var maxArr = Math.max.apply(null,arr) //66
var maxArr1 = Math.max.call(null,2,34,66,7,15,-123) //66
apply
apply方法调用一个函数，其具有一个指定的this值，参数为数组或者类数组的对象。
ps：apply和call的作用类似，只是apply接收的参数为数组，call为若干个参数列表。
语法
fun.apply(thisArg,[argsArray])
参数
thisArg：可选。与call参数一样。
argsArray：可选。一个数组或者类数组对象，其中的数组元素将作为单独的的参数传给fun函数。
注：该参数为null、undefined，表示不许传入任何参数。
返回值调拥有指定this值和参数的函数结果。
function a(x,y,z){
console.log(x,y,z)
}
a.apply(null,[1,2,3]) // 1 2 3
apply、call、bind比较
var obj = {
a: 99
}
var foo = {
getX : function(){
return this.a
}
}
foo.getX.bind(obj)() // 99
foo.getX.call(obj) // 99
foo.getX.apply(obj) // 99
三个输出都是99，但是注意看使用bind()方法的，他后面多了一对括号。也就是说，区别是：当你希望改变上下文环境之后并非立即执行，而是回调执行的时候，使用bind()方法。
apply、call、bind总结：
apply、call、bind 三者都是用来改变函数this对象的指向。
apply、call、bind 三者第一个参数都是this要指向的对象，也就是指定的上下文。
apply、call、bind 三者都可以利用后续参数传参。
bind是返回对应的函数，便于稍后调用。
apply、call 则是立即调用。
参考：
- MDN this
- MDN bind
- MDN apply
- MDN call
- 阮一峰
- 知乎
- https://blog.csdn.net/aitangyong/article/details/49278171