对于前端程序媛（员）来说，this这个机制应用的地方是很多的，所以搞懂是必要的，不熟练使用this将遇到一些困惑，下面是一些关于this的学习心得分享，希望大家可以一起学习：
1，this并不是指向自身
首先来看一段代码
1 function foo(num) { 2 console.log("foo:" + num); //0 1 2 3 4 3 console.log(this); //window对象 4 this.count++; //记录foo被调用的次数 5 } 6 foo.count = 0; //count 属于foo的属性 并不属于window 7 var i; 8 for (i = 0; i < 10; i++) { 9 if (i < 5) { 10 foo(i); 11 } 12 } 13 console.log(foo.count) //0
很多人认为 ：函数内部的this指向当前这个函数，这是错误的
对于这个例子来说，一种解决方法是使用foo标识符代替this来指向自身
1 function foo(num) { 2 console.log("foo:" + num); //0 1 2 3 4 3 console.log(this); //window对象 4 foo.count++; //记录foo被调用的次数 5 } 6 foo.count = 0; //count 属于foo的属性 并不属于window 7 var i; 8 for (i = 0; i < 10; i++) { 9 if (i < 5) { 10 foo(i); 11 } 12 } 13 console.log(foo.count) //5
另一种方法是没有规避了this使用
function foo(num) { console.log("foo:" + num); //0 1 2 3 4 console.log(this); //window对象 this.count++; //记录foo被调用的次数 } foo.count = 0; //count 属于foo的属性 并不属于window var i; for (i = 0; i < 10; i++) { if (i < 5) { foo.call(foo, i) //使用call() 确保this 指向函数foo } } console.log(foo.count) //5
2，this指向函数作用域(并不是一直都是对的）
需要知道的一点是this在任何情况都不会指向函数的词法作用域，因为作用域是无法通过js代码访问到的，它存在于引擎内部
下面这个代码很好的说明了这个问题
function foo() { var a = 2; this.bar(); // this是window } function bar() { console.log(this); //window console.log(this.a); //undefined } foo();
this究竟是指向什么呢？this是在运行时进行绑定的，并不是在编写时绑定的，它的上下文取决于函数调用时的各种条件，this绑定和函数声明的位置没有任何关系，只取决于函数的调用方式。
当函数调用时，会创建一个执行上下文，这个上下文会记录函数在哪里调用了，函数的调用方法，函数参数等信息，this就是该上下文的一个属性，会在函数执行的过程中用到。
3，函数在执行过程中this是如何绑定的
寻找函数的调用位置，其实有的很明显，而某些编程模式会因此函数的真正的调用位置
分析调用栈
1 function baz() { 2 //当前的调用栈是baz 3 //因此，当前的调用位置是全局作用域 4 console.log("baz"); 5 bar(); //bar的调用位置 6 } 7 8 function bar() { 9 //当前的调用栈是baz->bar 10 //因此，当前的调用位置是baz 11 console.log("bar"); 12 foo(); //foo的调用位置 13 } 14 15 function foo() { 16 //当前的调用栈是baz->bar->foo 17 //因此，当前的调用位置是bar 18 console.log("foo"); 19 } 20 baz(); //baz的调用位置
分析调用栈是，决定了this的绑定
4，this的绑定规则
①默认绑定：独立函数调用 ，在下面的代码中，foo（）是直接使用不带任何修饰符的函数引用进行调用的，因此只能使用默认绑定
1 function foo() { 2 console.log(this.a); //this指向window 3 } 4 var a = 2; 5 foo(); //2
但是在严格模式下，全局对象将无法使用默认绑定，因此this会绑定到undefined
1 function foo() { 2 'use strict' 3 console.log(this); //undefined 4 console.log(this.a); //报错 5 } 6 var a = 2; 7 foo();
但是有个微妙的非常重要的情况，虽然this的邦定规则完全取决于调用位置，但是只有foo运行在非严格模式下是默认绑定才能绑定到全局对象，但在严格模式下，于foo的调用位置无关了
1 function foo() { 2 console.log(this); //window 3 console.log(this.a); //2 4 } 5 var a = 2; 6 7 (function() { 8 'use strict' 9 console.log(this);//undefined 10 foo(); 11 })()
②隐式绑定
1 function foo() { 2 console.log(this); //obj 3 console.log(this.a); //2 4 } 5 var obj = { 6 a: 2, 7 foo: foo 8 } 9 obj.foo();
当foo被调用的时候，它的落脚点确实指向obj对象，当函数引用有上下文对象时，隐式绑定规则会把函数调用中的this邦定到这个上下文对象中，因此，调用foo()时，this被绑定到obj，因此，this.a和obj.a是一样的
③显示绑定
1 function foo() { 2 console.log(this); //obj 3 console.log(this.a); //2 4 } 5 var obj = { 6 a: 2 7 } 8 foo.call(obj)
.call(...)和apply(...)方法实现显示绑定
他们的第一个参数是一个对象，不是对象的会利用自己的包装对象转换成对象（new Number() ，new String() ，new Boolen()等），他们会把这个对象绑定到this，接着在调用函数时指定这个this,因为你可以直接指定this的绑定对象，因此我们称为显式绑定
④new绑定
1 function foo(a) { 2 this.a = a; 3 } 4 var bar = new foo(2); 5 console.log(bar.a);//2
构造函数是使用new操作时会被调用的函数。他们并不属于类，也不会实例化一个类，实际上，甚至不能说他们是一直特殊的函数类型，他们只是用new操作费调用的普通函数而已。
使用new来调用函数，会自动执行下面操作：
1，创建（或者构造一个）全新的对象
2，这个对象会被执行【原型】连接
3，这个新对象会被绑定到函数调用的this,
4，如果函数没有返回其他对象，那么new表达式中的函数调用会自动返回这个新对象
上面的代码，使用new调用foo()时，我们会构造一个新的对象并把它绑定到foo()调用中的this上，new是最后一个可以影响函数调用时this邦定行为的方法，我们称之为new绑定