参考文章：
一、问题的由来
学懂 JavaScript 语言，一个标志就是理解下面两种写法，可能有不一样的结果。
var obj = { foo: function () {}};var foo = obj.foo;// 写法一obj.foo()// 写法二foo()复制代码 上面代码中，虽然obj.foo和foo指向同一个函数，但是执行结果可能不一样。
var obj = { foo: function () { console.log(this.bar) }, bar: 1};var foo = obj.foo;var bar = 2;obj.foo() // 1foo() // 2复制代码 这种差异的原因，就在于函数体内部使用了this关键字。很多教科书会告诉你，this指的是函数运行时所在的环境。对于obj.foo()来说，foo运行在obj环境，所以this指向obj；对于foo()来说，foo运行在全局环境，所以this指向全局环境。所以，两者的运行结果不一样。
这种解释没错，但是教科书往往不告诉你，为什么会这样？也就是说，函数的运行环境到底是怎么决定的？举例来说，为什么obj.foo()就是在obj环境执行，而一旦var foo = obj.foo，foo()就变成在全局环境执行？
本文就来解释 JavaScript 这样处理的原理。理解了这一点，你就会彻底理解this的作用。
- 不管是什么场合，this都有一个共同点：它总是返回一个对象。
二、内存的数据结构
JavaScript 语言之所以有this的设计，跟内存里面的数据结构有关系。
var obj = { foo: 5 };复制代码 上面的代码将一个对象赋值给变量obj。JavaScript 引擎会先在内存里面，生成一个对象{ foo: 5 }，然后把这个对象的内存地址赋值给变量obj。
obj是一个地址（reference）。后面如果要读取 obj.foo，引擎先从 obj拿到内存地址，然后再从该地址读出原始的对象，返回它的 foo属性。 原始的对象以字典结构保存，每一个属性名都对应一个属性描述对象。举例来说，上面例子的foo属性，实际上是以下面的形式保存的。
- 注意，foo属性的值保存在属性描述对象的value属性里面。
三、函数
这样的结构是很清晰的，问题在于属性的值可能是一个函数。
var obj = { foo: function () {} };复制代码 这时，引擎会将函数单独保存在内存中，然后再将函数的地址赋值给foo属性的value属性。
{ foo: { [[value]]: 函数的地址 ... }}复制代码 由于函数是一个单独的值，所以它可以在不同的环境（上下文）执行。
var f = function () {};var obj = { f: f };// 单独执行f()// obj 环境执行obj.f()复制代码 四、环境变量
- JavaScript 允许在函数体内部，引用当前运行环境的其他变量。
var f = function () { console.log(x);};复制代码 上面代码中，函数体里面使用了变量x。该变量由运行环境提供。
现在问题就来了，由于函数可以在不同的运行环境执行，所以需要有一种机制，能够在函数体内部获得当前的运行环境（context）。所以，this就出现了，它的设计目的就是在函数体内部，指定函数当前的运行环境。
var f = function () { console.log(this.x);}复制代码 上面代码中，函数体里面的this.x就是指当前运行环境的x。
var f = function () { console.log(this.x);}var x = 1;var obj = { f: f, x: 2,};// 单独执行（全局环境执行）f() // 1// obj 环境执行obj.f() // 2复制代码 上面代码中，函数f在全局环境执行，相当于window.f()，this.x指向全局环境的x。在obj环境执行，this.x指向obj.x。
回到本文开头提出的问题(如下)，obj.foo()是通过obj找到foo，所以就是在obj环境执行。只要函数被赋给另一个变量，this的指向就会变。一旦var foo = obj.foo，obj.foo被赋值给变量foo，内部的this就会指向foo()运行时所在的对象（本例是顶层对象window）。
var obj = { foo: function () {}};var foo = obj.foo;// 写法一obj.foo()// 写法二foo()//相当于window.foo()复制代码 - 再看一个网页编程的例子。
复制代码
上面代码是一个文本输入框，每当用户输入一个值，就会调用onChange回调函数，验证这个值是否在指定范围。浏览器会向回调函数传入当前对象，因此this就代表传入当前对象（即文本框），然后就可以从this.value上面读到用户的输入值。
五、使用场合
注意：this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是最终调用它的对象
- （1）全局环境
全局环境使用this，它指的就是顶层对象window。
this === window // truefunction f() { console.log(this === window);}f() // true 相当于window.f()复制代码 上面代码说明，不管是不是在函数内部，只要是在全局环境下运行，this就是指顶层对象window。
- （2）构造函数
var Obj = function (p) { this.p = p;};var o = new Obj('Hello World!');o.p // "Hello World!"复制代码 直接Obj()调用，this指向window。用new把Obj作为构造函数来调用，this指向原型为Obj.prototype的空对象。Obj函数表达式中，没有写返回值，默认用this作为返回值赋给o，所以o有了p属性。
- （2.1）构造函数中的
this碰到return时 如果返回值是一个对象，会将return的对象作为返回值。 如果没有返回值，或者返回值是基本类型，那么this会作为返回值。
function fn() { this.user = '追梦子'; return { user: 11 }; }var a = new fn; console.log(a.user); //11//fn ----> Function.prototype ----> Object.prototype ----> null复制代码 function fn() { this.user = '追梦子'; return function(){};//函数对象作为返回值}var a = new fn; console.log(a.user); //undefine复制代码 function fn() { this.user = '追梦子'; return 1;//this作为返回值}var a = new fn; console.log(a.user); //追梦子复制代码 function fn() { this.user = '追梦子'; return undefined;//this作为返回值}var a = new fn; console.log(a.user); //追梦子复制代码 function fn() { this.user = '追梦子'; return null;//this作为返回值}var a = new fn; console.log(a.user); //追梦子复制代码 - 注意：
return之后的内容不执行。 - （3）对象的方法
如果对象的方法里面包含this，this的指向就是方法运行时所在的对象。
- （3.1）但是，这条规则很不容易把握。请看下面的代码。
var obj ={ foo: function () { console.log(this); }};obj.foo() // obj复制代码 上面代码中，obj.foo方法执行时，它内部的this指向obj。
- （3.2）但是，下面这几种用法，都会改变
this的指向(有些难懂)。
var obj ={ foo: function () { console.log(this); }};(obj.foo = obj.foo)() // window(false || obj.foo)() // window(1, obj.foo)() // window复制代码 上面代码中，obj.foo就是一个值。这个值真正调用的时候，运行环境已经不是obj了，而是全局环境，所以this不再指向obj。
- （3.3）如果
this所在的方法不在对象的第一层，这时this只是指向当前一层的对象，而不会继承更上面的层。即这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象
var a = { p: 'Hello', b: { m: function() { console.log(this.p); } }};a.b.m() // undefined复制代码 上面代码中，a.b.m方法在a对象的第二层，该方法内部的this不是指向a，而是指向a.b。
var a = { b: { m: function() { console.log(this.p); }, p: 'Hello' }};a.b.m() // Hello复制代码 - （3.4）该函数方法赋值给另一个对象，就会改变this的指向。
var o = { a:10, b:{ a:12, fn:function(){ console.log(this.a); //undefined console.log(this); //window } }}var j = o.b.fn;j();复制代码 以上虽然函数fn是被对象b所引用，但是在将fn赋值给变量j的时候并没有执行，所以最终指向的是window。this永远指向的是最后调用它的对象，也就是看它执行的时候是谁调用的。
fn所在的对象赋值给j，这样调用时，this的指向就不会变。 var j = o.b;j.fn() // Hello复制代码
- （3.5）对象原型链上的
this
var o={ f:function(){ return this.a+this.b;}};var p =Object.create(o);//p的原型指向op.a=1;p.b=4;console.log(p.f());//5复制代码 p调用原型链上的方法f，此时原型链上对象o也是可以去拿到p的属性a，b的。
- （5）箭头函数与this
var obj = { birth: 1990, getAge: function () { console.log(this); //obj var b = this.birth; // 1990 var fn = function () { console.log(b); // 1990 console.log(this); //window return new Date().getFullYear() - this.birth; // 没有某个对象进行显示调用fn，this指向window或undefined }; return fn(); }};obj.getAge();复制代码 现在，箭头函数完全修复了this的指向，使this的指向很明确，this总是指向最外层调用者obj（箭头函数体内的this对象就是定义时所在的对象，而不是使用时所在对象）：
var obj = { birth: 1990, getAge: function () { var b = this.birth; // 1990 var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象 return fn(); }};obj.getAge(); // 25复制代码 六、使用注意点
- 避免多层 this
由于this的指向是不确定的，所以切勿在函数中包含多层的this。
var o = { f1: function () { console.log(this); var f2 = function () { console.log(this); }();//函数赋值给变量，改变了this指向到window h}}o.f1()// Object// Window复制代码 上面代码包含两层this，结果运行后，第一层指向对象o，第二层指向全局对象，因为实际执行的是下面的代码。
var temp = function () { console.log(this);};var o = { f1: function () { console.log(this); var f2 = temp(); }}复制代码 一个解决方法是在第二层改用一个指向外层
this的变量。
var o = { f1: function() { console.log(this); var that = this; var f2 = function() { console.log(that); }(); }}o.f1()// Object// Object复制代码 上面代码定义了变量that，固定指向外层的this，然后在内层使用that，就不会发生this指向的改变。
注意： 使用一个变量固定this的值，然后内层函数调用这个变量，是非常常见的做法，请务必掌握。
另一种解决方法是JavaScript 提供了严格模式，也可以硬性避免这种问题。严格模式下，如果函数内部的
this指向顶层对象，就会报错。
var counter = { count: 0};counter.inc = function () { 'use strict'; this.count++};var f = counter.inc;f()// TypeError: Cannot read property 'count' of undefined复制代码 上面代码中，inc方法通过'use strict'声明采用严格模式，这时内部的this一旦指向顶层对象，就会报错。
- 避免数组处理方法中的
this
数组的map和foreach方法，允许提供一个函数作为参数。这个函数内部不应该使用this。
var o = { v: 'hello', p: [ 'a1', 'a2' ], f: function f() { this.p.forEach(function (item) { console.log(this.v + ' ' + item); }); }}o.f()// undefined a1// undefined a2复制代码 上面代码中，foreach方法没有指定上下文参数，所以其回调函数中的this，其实是指向window对象，因此取不到o.v的值。
解决这个问题的方法有两种：
- 就是前面提到的，使用中间变量固定
this。
var o = { v: 'hello', p: [ 'a1', 'a2' ], f: function f() { var that = this; this.p.forEach(function (item) { console.log(that.v+' '+item); }); }}o.f()// hello a1// hello a2复制代码 - 将this当作foreach方法的第二个参数，固定它的运行环境。
var o = { v: 'hello', p: [ 'a1', 'a2' ], f: function f() { this.p.forEach(function (item) { console.log(this.v + ' ' + item); }, this); }}o.f()// hello a1// hello a2复制代码 - 避免回调函数中的 this
回调函数中的this往往会改变指向，最好避免使用。
var o = new Object();o.f = function () { console.log(this === o);}// jQuery 的写法$('#button').on('click', o.f);复制代码 上面代码中，点击按钮以后，控制台会显示false。原因是此时this不再指向o对象，而是指向按钮的 DOM 对象，因为f方法是在按钮对象的环境中被调用的。这种细微的差别，很容易在编程中忽视，导致难以察觉的错误。
为了解决这个问题，可以采用call、apply、bind方法对this进行绑定，也就是使得this固定指向某个对象，减少不确定性。