与其他语言相比，函数的 this 关键字在JavaScript中的行为略有不同。它在严格模式和非严格模式之间也有一些区别。
在绝大多数情况下，函数的调用方式决定了this的值。this不能在执行期间被赋值，在每次函数被调用时this的值也可能会不同。ES5引入了bind方法来设置函数的this值，而不用考虑函数如何被调用的。
全局上下文
- 在全局运行上下文中（在任何函数体外部），this指代全局对象，无论是否在严格模式下。
console.log(this.document === document); // true
// 在浏览器中，全局对象为 window 对象：
console.log(this === window); // true
this.a = 37;
console.log(window.a); // 37
函数上下文
- 在函数内部，this的值取决于函数是如何调用的。
1.直接调用
如果不是在严格模式下执行，并且this的值不会在函数执行时被设置，此时的this的值会默认设置为全局对象。
function f1(){
return this;
}
this === window; // true
然而，在严格模式下，this将保持他进入执行环境时的值，所以直接调用的this将会默认为undefined或者报错
function f2(){
"use strict"; // 这里是严格模式
return this;
}
this === undefined; // true
2.对象方法中的 this
当以对象里的方法的方式调用函数时，它们的 this 是调用该函数的对象.
var o = {
prop: 37,
f: function() {
return this.prop;
}
};
console.log(o.f()); // 37
or
var o = {prop: 37};
function independent() {
return this.prop;
}
o.f = independent;
console.log(o.f()); // logs 37
3.原型链中的 this
相同的概念在定义在原型链中的方法也是一致的。如果该方法存在于一个对象的原型链上，那么this指向的是调用这个方法的对象，表现得好像是这个方法就存在于这个对象上一样。
var o = {
f : function(){
return this.a + this.b;
}
};
var p = Object.create(o);
p.a = 1;
p.b = 4;
console.log(p.f()); // 5
4.getter 与 setter 中的 this
作为getter或setter函数都会绑定 this 到从设置属性或得到属性的那个对象。
function modulus(){
return Math.sqrt(this.re * this.re + this.im * this.im);
}
var o = {
re: 1,
im: -1,
get phase(){
return Math.atan2(this.im, this.re);
}
};
Object.defineProperty(o, 'modulus', {
get: modulus, enumerable:true, configurable:true});
console.log(o.phase, o.modulus); // logs -0.78 1.4142
5.构造函数中的 this
当一个函数被作为一个构造函数来使用（使用new关键字），它的this与即将被创建的新对象绑定。
var Obj = function (p) {
this.p = p;
};
Obj.prototype.m = function() {
return this.p;
};
var o = new Obj('Hello World!');
o.p // "Hello World!"
o.m() // "Hello World!"
call 和 apply，bind 方法
- ECMAScript 5 引入了 Function.prototype.bind
调用f.bind(someObject)会创建一个与f具有相同函数体和作用域的函数，但是在这个新函数中，this将永久地被绑定到了bind的第一个参数，无论这个函数是如何被调用的。
bind比call方法和apply方法更进一步的是，除了绑定this以外，还可以绑定原函数的参数。
function.prototype.bind()
function f(){
return this.a;
}
var g = f.bind({a:"azerty"});
console.log(g()); // azerty
var o = {a:37, f:f, g:g};
console.log(o.f(), o.g()); // 37, azerty
bind比call方法和apply方法更进一步的是，除了绑定this以外，还可以绑定原函数的参数。
2.当一个函数的函数体中使用了this关键字时，通过所有函数都从Function对象的原型中继承的call()方法和apply()方法调用时，它的值可以绑定到一个指定的对象上。
call方法的参数，应该是一个对象。如果参数为空、null和undefined，则默认传入全局对象。
var n = 123;
var obj = { n: 456 };
function a() {
console.log(this.n);
}
a.call() // 123
a.call(null) // 123
a.call(undefined) // 123
a.call(window) // 123
a.call(obj) // 456
call方法还可以接受多个参数
func.call(thisValue, arg1, arg2, ...)
call的第一个参数就是this所要指向的那个对象，后面的参数则是函数调用时所需的参数。
3.function.prototype.apply()
apply方法的作用与call方法类似，也是改变this指向，然后再调用该函数。唯一的区别就是，它接收一个数组作为函数执行时的参数，使用格式如下。
func.apply(thisValue, [arg1, arg2, ...])
apply方法的第一个参数也是this所要指向的那个对象，如果设为null或undefined，则等同于指定全局对象。第二个参数则是一个数组，该数组的所有成员依次作为参数，传入原函数。原函数的参数，在call方法中必须一个个添加，但是在apply方法中，必须以数组形式添加。
function f(x,y){
console.log(x+y);
}
f.call(null,1,1) // 2
f.apply(null,[1,1]) // 2
DOM事件处理函数中的 this
- 当函数被用作事件处理函数时，它的this指向触发事件的元素（一些浏览器在使用非addEventListener的函数动态添加监听函数时不遵守这个约定）。
// 被调用时，将关联的元素变成蓝色
function bluify(e){
console.log(this === e.currentTarget); // 总是 true
// 当 currentTarget 和 target 是同一个对象是为 true
console.log(this === e.target);
this.style.backgroundColor = '#A5D9F3';
}
// 获取文档中的所有元素的列表
var elements = document.getElementsByTagName('*');
// 将bluify作为元素的点击监听函数，当元素被点击时，就会变成蓝色
for(var i=0 ; i<elements.length ; i++){
elements[i].addEventListener('click', bluify, false);
}
内联事件处理函数中的 this
- 当代码被内联处理函数调用时，它的this指向监听器所在的DOM元素
<button onclick="alert(this.tagName.toLowerCase());">
Show this
</button>
上面的alert会显示button
其实，几句话就可以概括，实践中记住这几点就可以了，偷了几句学霸的总结：
this在函数执行时才能确定，JavaScript 中的 this 可以显式的确定，比如通过call apply bind 以及尚未纳入标准的函数绑定运算符::。
确认this具体是什么有三个办法：
console.log(this)
source code, look for .call
API documentation
面试的时候，不能 log，没有文档，源码又没有用 call 之类的显式的确定，就需要自己手动的转换成fn.call(...)调用的方式来确定 this
PS: 需要注意的是箭头函数函数体内的this，就是定义时所在的对象，而不是使用时所在的对象。
网友评论