其实this是一个老生常谈的问题了。关于this的文章非常多，其实我本以为自己早弄明白了它，不过昨天在做项目的过程中，还是出现了一丝疑惑，想到大概之前在JavaScript weekly里收藏待看的一篇详解this的文章（后有链接，也附上了稀土上的中文译文）和另一篇一位前辈推荐的文章，就把它们看了看，对this的认识确实提升了一些。
JavaScript 中的'this‘是动态的，它在函数运行时被确定而非在函数声明时被确定。所有的函数都可以调用'this'，这无关于该函数是否属于某个对象。关于this，主要有以下四种情况。
1.被当做对象的方法被调用
如果该函数是被当做某一个对象的方法，那么该函数的this指向该对象；
var john = { firstName: "John" } function func() { alert(this.firstName + ": hi!") } john.sayHi = func john.sayHi() // this = john
这里有一点值得注意，当一个对象的方法被取出来赋值给一个变量时，该方法变为函数触发，this指向window或underfind（严格模式）。
2.函数之内调用
当函数中有 this，其实就意味着它被当做方法调用，之间调用相当于把他当做window对象的方法，this指向window，值得注意的是ES5其实是规定这种情况this=undefined的，只浏览器大多还是按照老的方法执行(本人在最新版的Chrome，Safari，Firefox中测试都指向window（201607）),在火狐下使用严格模式指向undefined；
func() function func() { alert(this) // [object Window] or [object global] or kind of.. }
为了传递this，()之前应该为引用类型，类似于obj.a 或者 obj['a'],不能是别的了。
这里还存在一个小坑，当对象的方法中还存在函数时，该函数其实是当做函数模式触发，所以其this默认为window（严格模式下为undefined）解决办法是给该函数绑定this。
var numbers = { numberA: 5, numberB: 10, sum: function() { console.log(this === numbers); // => true function calculate() { // this is window or undefined in strict mode console.log(this === numbers); // => false return this.numberA + this.numberB; } return calculate(); } }; numbers.sum(); // => NaN or throws TypeError in strict mode var numbers = { numberA: 5, numberB: 10, sum: function() { console.log(this === numbers); // => true function calculate() { console.log(this === numbers); // => true return this.numberA + this.numberB; } // use .call() method to modify the context return calculate.call(this); } }; numbers.sum(); // => 15
3.在new中调用
一个引用对象的变量实际上保存了对该对象的引用，也就是说变量实际保存的是对真实数据的一个指针。
使用new关键字时this的改变其实有以下几步：
创建 this = {}.
new执行的过程中可能改变this，然后添加属性和方法；
返回被改变的this.
function Animal(name) { this.name = name this.canWalk = true } var animal = new Animal("beastie") alert(animal.name)
需要注意的是如果构造函数返回一个对象，那么this指向返回的那个对象；
function Animal() { this.name = 'Mousie'; this.age = '18'; return { name: 'Godzilla' } // <-- will be returned } var animal = new Animal() console.log(animal.name) // Godzilla console.log(animal.age)//undefined
这里需要注意的是不要忘记使用new，否则不会创建一个新的函数。而是只是执行了函数，相当于函数调用，this其实指向window
function Vehicle(type, wheelsCount) { this.type = type; this.wheelsCount = wheelsCount; return this; } // Function invocation var car = Vehicle('Car', 4); car.type; // => 'Car' car.wheelsCount // => 4 car === window // => true
4.明确调用this，使用call和apply
这是最具JavaScript特色的地方。
如下代码：
func.call(obj, arg1, arg2,...)
第一个参数将作为this的指代对象，之后的参数将被作为函数的参数，解决方法是使用bind。
function Animal(type, legs) { this.type = type; this.legs = legs; this.logInfo = function() { console.log(this === myCat); // => true console.log('The ' + this.type + ' has ' + this.legs + ' legs'); }; } var myCat = new Animal('Cat', 4); // logs "The Cat has 4 legs" setTimeout(myCat.logInfo.bind(myCat), 1000); // setTimeout?? var john = { firstName: "John", surname: "Smith" } function func(a, b) { alert( this[a] + ' ' + this[b] ) } func.call(john, 'firstName', 'surname') // "John Smith"
至于apply，其只是以数组的方传入参数，其它部分是一样的，如下:
func.call(john, 'firstName', 'surname') func.apply(john, ['firstName', 'surname'])
它们也可用于在 ES5 中的类继承中，调用父级构造器。