共计 3137 个字符，预计需要花费 8 分钟才能阅读完成。
this 的值到底是什么？一次说清楚你怎么还没搞懂 this？this、apply、call、bind
一、What’s this?
由于运行期绑定的特性，JavaScript 中的 this 含义非常多，它可以是全局对象、当前对象或者任意对象，这完全取决于函数的调用方式
随着函数使用场合的不同，this 的值会发生变化。但是有一个总的原则，那就是 this 指的是，调用函数的那个对象
1、作为函数调用
在函数被直接调用时 this 绑定到全局对象。在浏览器中，window 就是该全局对象
console.log(this); //window
function fn1(){
console.log(this);
}
fn1(); //window
2、内部函数
函数嵌套产生的内部函数的 this 不是其父函数，仍然是全局变量
function fn0(){
function fn(){
console.log(this);
}
fn();
}
fn0();
//window
3、setTimeout、setInterval
这两个方法执行的函数 this 也是全局对象
document.addEventListener(‘click’, function(e){
console.log(this); //document
setTimeout(function(){
console.log(this); //window
}, 200);
}, false);
4、作为构造函数调用
所谓构造函数，就是通过这个函数生成一个新对象（object）。这时，this 就指这个新对象
new 运算符接受一个函数 F 及其参数：new F(arguments…)。这一过程分为三步：
创建类的实例。这步是把一个空的对象的 proto 属性设置为 F.prototype。初始化实例。函数 F 被传入参数并调用，关键字 this 被设定为该实例。返回实例。看例子
function Person(name){
this.name = name;
}
Person.prototype.printName = function(){
console.log(this.name);
};
var p1 = new Person(‘Byron’);
var p2 = new Person(‘Casper’);
var p3 = new Person(‘Vincent’);
p1.printName(); //Byron
p2.printName(); //Casper
p3.printName(); //Vincent
5、作为对象方法调用
在 JavaScript 中，函数也是对象，因此函数可以作为一个对象的属性，此时该函数被称为该对象的方法，在使用这种调用方式时，this 被自然绑定到该对象
var obj1 = {
name: ‘Byron’,
fn : function(){
console.log(this); //obj1
}
};
obj1.fn();
小陷阱
var fn2 = obj1.fn;
fn2(); //window
因为 fn2 等于ƒ (){console.log(this)}，所以 this 指向的是全局变量
6、DOM 对象绑定事件
在事件处理程序中 this 代表事件源 DOM 对象（低版本 IE 有 bug，指向了 window）
document.addEventListener(‘click’, function(e){
console.log(this); //document
var _document = this;
setTimeout(function(){
console.log(this); //window
console.log(_document); //document
}, 200);
}, false);
解决方案
输出结果 //document//document//document
7、Function.prototype.bind
bind，返回一个新函数，并且使函数内部的 this 为传入的第一个参数 bind 的用法是给 函数名.bind(参数) 返回的是一个函数，加（）才立即执行
var obj1 = {
name: ‘Byron’,
fn : function(){
console.log(this);
}
};
var fn3 = obj1.fn.bind()() //window
var fn4 = obj1.fn.bind(obj1)() //obj1
例二首先 bind 的 this.sayhello 没有指向 page，而是指向的 this.node 解决方案一：解决方案二，，this.sayhello，但是这个方案有问题，在执行 sayhello 函数时，函数内部的 this 是指向 this.node(document.body), 而不是指向 page 的解决方案三：
解决方案二的问题，我们用 bind 函数传递了 this 参数，sayhello 函数内部 this 就还是指向 page 的了
8、使用 call 和 apply 设置 this
call apply，调用一个函数，传入函数执行上下文及参数
fn.call(context, param1, param2…)
fn.apply(context, paramArray)
语法很简单，第一个参数都是希望设置的 this 对象，不同之处在于 call 方法接收参数列表，而 apply 接收参数数组
fn2.call(obj1);
fn2.apply(obj1);
难得举例了，直接看这篇文章写的更好 this、apply、call、bind
二、函数的执行环境和变量
1、函数的执行环境
一个函数被执行时，会创建一个执行环境（ExecutionContext），函数的所有的行为均发生在此执行环境中，构建该执行环境时，JavaScript 首先会创建 arguments 变量，其中包含调用函数时传入的参数
接下来创建作用域链，然后初始化变量。首先初始化函数的形参表，值为 arguments 变量中对应的值，如果 arguments 变量中没有对应值，则该形参初始化为 undefined。
如果该函数中含有内部函数，则初始化这些内部函数。如果没有，继续初始化该函数内定义的局部变量，需要注意的是此时这些变量初始化为 undefined，其赋值操作在执行环境（ExecutionContext）创建成功后，函数执行时才会执行，这点对于我们理解 JavaScript 中的变量作用域非常重要，最后为 this 变量赋值，会根据函数调用方式的不同，赋给 this 全局对象，当前对象等
至此函数的执行环境（ExecutionContext）创建成功，函数开始逐行执行，所需变量均从之前构建好的执行环境（ExecutionContext）中读取
2、三种变量（名称有点不规范，暂时可以不管名称）
实例变量：（this）类的实例才能访问到的变量
静态变量：（属性）直接类型对象能访问到的变量
私有变量：（局部变量）当前作用域内有效的变量
看个例子
function ClassA(){
var a = 1; // 私有变量，只有函数内部可以访问. 外部无法访问，外部要访问的话需要返回
this.b = 2; // 实例变量，只有实例可以访问
}
ClassA.c = 3; // 静态变量，也就是给函数对象增加了属性
console.log(a); // error 无法访问局部变量 console.log(ClassA.b) // undefined this.b 并不是给函数赋值的属性，而是 console.log(ClassA.c) //3
var classa = new ClassA();console.log(classa.a);//undefined 无法访问局部变量 console.log(classa.b);// 2console.log(classa.c);//undefined ClassA.c 只是函数上的 c 属性和 classa 这个对象没有关系