Appearance
this
this 是一种相对复杂的机制，那为什么要使用 this 呢？
为什么使用 this
看一段代码
js
var me = {
name: "Kyle"
};
var you = {
name: "Reader"
}
function identify() {
return this.name.toUpperCase();
}
function speak() {
var greeting = "Hello, " + identify.call(this);
console.log(greeting);
}
identify.call(me); // KYLE
identify.call(you); // READER
speak.call(me); // Hello, KYLE
speak.call(you); // Hello, READER
这段代码可以在不同的上下文对象（me 和 you）中重复的使用函数 identify() 和 speak()。如果不使用 this，那就需要给 identify() 和 speak() 显式传入一个上下文对象。
js
function identify(context) {
return context.name.toUpperCase();
}
function speak(context) {
var greeting = "Hello, " + identify(context);
console.log(greeting);
}
identify(me); // KYLE
speak(you); // Hello, READER
相对于显式的传递，this 是一种更优雅的方式来隐式“传递”一个对象的引用，因此可以将 API 设计得更加简洁和易用。
this 的误解
this 的误解主要有两个：指向自身和指向作用域。
指向自身
this 并不像所想的那样指向函数本身：
js
function foo(num) {
console.log('foo: ' + num);
this.count++; // 记录函数调用的次数
}
foo.count = 0;
for (var i = 1; i <= 3; i++) {
foo(i);
}
// foo: 1
// foo: 2
// foo: 3
// foo 被调用了多少次
console.log(foo.count); // 0 -- 为什么？！
foo 被调用了 3 次，但是 foo.count 仍然等于 0。执行 foo.count = 0 给函数对象 foo 添加了一个属性 count。但是函数的内部代码 this.count 中的 this 并不是指向那个函数对象。
指向作用域
需要明确的是，this 在任何情况下都不指向函数的词法作用域。在 JavaScript 内部，作用域确实和对象很像，可见的标识符都是它的属性。但是作用域“对象”无法通过 JavaScript 代码来访问，它存在于 JavaScript 引擎内部。
看一段代码，它试图通过 this 来联通作用域：
js
function foo() {
var a = 2;
this.bar()
}
function bar() {
console.log(this.a);
}
foo(); // ReferenceError: a is not defined
这段代码错误不止一个，它非常完美（同时也令人伤感）地展示了 this 多么容易误导人。
它首先试图通过 this.bar() 来引用 bar() 函数（虽然成功了，但是纯属意外，可以看后面 this 的判断），此外还试图通过 this 联通 foo() 和 bar() 的词法作用域，从而可以访问 a。这是不可能实现的，使用 this 不可能在词法作用域查找到什么。
this 是什么
this 是在调用时绑定的，完全取决于函数的调用位置（也就是函数的调用方法）。调用位置就是函数在代码中被调用的位置，而不是声明的位置。
那调用位置如何决定 this 的绑定对象呢？
绑定规则
正常函数有 4 中绑定规则。
1. 默认绑定
独立函数调用，也就是直接使用不带任何修饰符的函数引用进行调用，只能使用默认绑定。非严格模式下，this 的默认绑定会绑定到全局对象，而在严格模式下，this 绑定到 undefined。
js
// 运行在非严格模式下，this 会绑定全局对象
function foo() {
console.log( this.a );
}
var a = 2;
foo(); // 2
// 运行在严格模式下，this 会绑定到 undefined
function foo() {
"use strict";
console.log( this.a );
}
var a = 2;
foo(); // TypeError: Cannot read property 'a' of undefined
还有一个微妙的细节，虽然 this 的绑定规则完全取决于调用位置，但是只有运行在非 strict mode 下时，默认绑定才会绑定到全局对象，在严格模式的调用不影响默认绑定。
js
function foo() {
console.log(this.a);
}
var a = 2;
(function () {
"use strict";
foo(); // 2
console.log(this.a); // TypeError: Cannot read property 'a' of undefined
})();
2. 隐式绑定
当函数引用有上下文对象时，隐式绑定规则会把函数中的 this 绑定到这个上下文对象。对象属性引用链中只有上一层或者说最后一层在调用中起作用。
js
function foo() {
console.log( this.a );
}
var obj = {
a: 2,
foo: foo
};
obj.foo(); // 2
var obj2 = {
a: 1,
obj: obj
}
obj2.obj.foo(); // 2
一个常见的 this 绑定问题就是被隐式绑定的函数会丢失绑定对象，也就是它应用了默认绑定，这就是绑定丢失。
js
// 虽然 bar 是 obj.foo 的一个引用，但是实际上，它引用的是foo函数本身
// bar() 是一个不带任何修饰的函数调用，应用默认绑定
function foo() {
console.log( this.a );
}
var obj = {
a: 2,
foo: foo
};
var bar = obj.foo; // 函数别名
var a = "oops, global"; // a 是全局对象的属性
bar(); // "oops, global"
3. 显式绑定
通过 call(..) 或者 apply(..) 方法。它们的第一个参数是一个对象，是给 this 准备的，在调用函数时将这个对象绑定到 this。因为直接指定 this 的绑定对象，称之为显示绑定。
js
function foo() {
console.log( this.a );
}
var obj = {
a: 2
};
// 调用 foo 时强制把 this 绑定到 obj
foo.call( obj ); // 2
- 硬绑定
创建函数 bar()，并在它的内部手动调用 foo.call(obj)，强制把 foo 的 this 绑定到了 obj。
js
function foo() {
console.log( this.a );
}
var obj = {
a: 2
};
var bar = function() {
foo.call( obj );
};
bar(); // 2
setTimeout( bar, 100 ); // 2
// 硬绑定的 bar 不可能再修改它的 this
bar.call( window ); // 2
硬绑定的典型应用场景就是创建一个包裹函数，负责接收参数并返回值：
js
function foo(something) {
console.log( this.a, something );
return this.a + something;
}
var obj = {
a: 2
};
var bar = function() {
return foo.apply( obj, arguments );
};
var b = bar( 3 ); // 2 3
console.log( b ); // 5
另一个使用方法就是创建一个可以重复使用的辅助函数：
js
function foo(something) {
console.log( this.a, something );
return this.a + something;
}
// 简单的辅助绑定函数
function bind(fn, obj) {
return function() {
return fn.apply( obj, arguments );
}
}
var obj = {
a: 2
};
var bar = bind( foo, obj );
var b = bar( 3 ); // 2 3
console.log( b ); // 5
由于硬绑定是一种常用的模式，ES5 提供了内置方法 Function.prototype.bind，用法如下：
js
function foo(something) {
console.log( this.a, something );
return this.a + something;
}
var obj = {
a: 2
};
var bar = foo.bind( obj );
var b = bar( 3 ); // 2 3
console.log( b ); // 5
- API调用的“上下文”
第三方库的许多函数，以及 JavaScript 语言许多内置函数提供了一个可选参数，通常称之为“上下文”（context），其作用和 bind(..) 一样，确保回调函数使用指定的 this。这些函数实际上通过 call(..) 和 apply(..) 实现了显式绑定。
js
function foo(el) {
console.log( el, this.id );
}
var obj = {
id: "awesome"
}
var myArray = [1, 2, 3]
// 调用 foo(..) 时把 this 绑定到 obj
myArray.forEach( foo, obj );
// 1 awesome 2 awesome 3 awesome
4. new 绑定
JavaScript 有一个 new 操作符，但是和其它面向类的语言完全不同。
- 在 JavaScript 中，构造函数只是使用
new操作符时被调用的普通函数，他们不属于某个类，也不会实例化一个类。 - 包括内置对象函数（比如
Number(..)）在内的所有函数都可以用new来调用，这种函数调用被称为构造函数调用。 - 实际上并不存在所谓的“构造函数”，只有对于函数的“构造调用”。
使用new来调用函数，或者说发生构造函数调用时，会自动执行下面的操作：
- 创建（或者说构造）一个新对象。
- 这个新对象会被执行
[[Prototype]]连接。 - 这个新对象会绑定到函数调用的
this。 - 如果函数没有返回其他对象，那么
new表达式中的函数调用会自动返回这个新对象。
js
function foo(a) {
this.a = a;
}
var bar = new foo(2); // bar和foo(..)调用中的this进行绑定
console.log( bar.a ); // 2
绑定规则的优先级
毫无疑问，默认绑定的优先级最低；然后是隐式绑定，接着是显示绑定，最高是 new 绑定。
判断 this
知道了优先级，就可以根据优先级来判断某个函数调用位置应用的是哪条规则了，可以按照下面的顺序判断：
- 函数是否在
new中调用（new绑定）？如果是的话，this绑定的是新创建的对象。例如var bar = new foo()。 - 函数是否通过 call、apply（显式绑定）？如果是的话，
this绑定的是指定的对象。例如var bar = foo.call(obj)。 - 函数是否在某个上下文对象中调用（隐式绑定）？如果是的话，
this绑定的是那个上下文对象。例如var bar = obj.foo()。 - 如果都不是的话，使用默认绑定。如果在严格模式下，就绑定到
undefined，否则绑定到全局对象。例如var bar = foo()。
正常情况下，根据这些就可以判断了，但是有一些例外。
绑定例外
- 被忽略的 this
把 null 或者 undefined 作为 this 的绑定对象传入 call、apply 或者 bind，这些值在调用时会被忽略，实际应用的是默认规则。
js
function foo(a, b) {
console.log(this.a)
}
var a = 2;
foo.call(null); // 2
那一般什么情况我们才会传入 null 呢？
js
function foo(a, b) {
console.log( "a:" + a + "，b:" + b );
}
// 1. 把数组展开成参数
foo.apply( null, [2, 3] ); // a:2，b:3
// 2. 使用 bind(..) 进行柯里化，预先设置一些参数
var bar = foo.bind( null, 2 );
bar( 3 ); // a:2，b:3
- 间接引用
间接引用下，调用这个函数会应用默认绑定规则。间接引用最容易在赋值时发生。
js
function foo() {
console.log( this.a );
}
var a = 2;
var o = { a: 3, foo: foo };
var p = { a: 4};
o.foo(); // 3
// p.foo = o.foo 的返回值是目标函数的引用
// 所以调用位置是 foo() 而不是 p.foo() 或者 o.foo()
(p.foo = o.foo)(); // 2
- 软绑定
硬绑定可以把 this 强制绑定到指定的对象（new 除外），防止函数调用应用默认绑定规则。但是会降低函数的灵活性，使用硬绑定之后就无法使用隐式绑定或者显式绑定来修改 this。
如果给默认绑定指定一个全局对象和 undefined 以外的值，那就可以实现和硬绑定相同的效果，同时保留隐式绑定或者显示绑定修改 this 的能力，这就是软绑定。
js
if(!Function.prototype.softBind) {
Function.prototype.softBind = function(obj) {
var fn = this;
// 捕获所有curried参数
var curried = [].slice.call( arguments, 1 );
var bound = function() {
return fn.apply(
(!this || this === (window || global)) ? obj : this,
curried.concat.apply( curried, arguments )
);
};
bound.prototype = Object.create( fn.prototype );
return bound;
};
}
看看怎么使用它：
js
function foo() {
console.log("name:" + this.name);
}
var obj = { name: "obj" },
obj2 = { name: "obj2" },
obj3 = { name: "obj3" };
var fooOBJ = foo.softBind( obj );
fooOBJ(); // name: obj
obj2.foo = foo.softBind( obj );
obj2.foo(); // name: obj2 <---- 看！！！
fooOBJ.call( obj3 ); // name: obj3 <---- 看！！！
setTimeout( obj2.foo, 10 ); // name: obj
this 词法
ES6 新增一种特殊函数类型：箭头函数。箭头函数不使用 this 的 4 种标准规则，而是根据外层（函数或者全局）作用域来决定 this。
js
function foo() {
return (a) => {
// this 继承自 foo()
console.log( this.a );
};
}
var obj1 = {
a: 2
};
var obj2 = {
a: 3
}
var bar = foo.call( obj1 );
bar.call( obj2 ); // 2，不是3！
foo() 内部创建箭头函数会捕获调用时 foo() 的 this，由于 foo() 的 this 绑定到 obj1，所以 bar（引用箭头函数）的 this 也会绑定到 obj1。箭头函数的 this 绑定无法修改，new 也不行。
箭头函数可以向 bind(...) 一样确保函数的 this 被绑定到指定对象。此外，它还有一个重要的作用是它用更常见的词法作用域取代了传统的 this 机制。实际上，在 ES6 之前就已经使用一种几乎和箭头函数完全一样的模式：
js
function foo() {
var self = this;
setTimeout(function() {
console.log( self.a );
}, 100 );
}
var obj = {
a: 2
};
foo.call(obj); // 2
// 使用箭头函数
function foo() {
setTimeout(() => {
// 这里的 this 在词法上继承自 foo()
console.log( this.a );
}, 100 );
}
var obj = {
a: 2
};
foo.call(obj); // 2