JavaScript 中的作用域是词法作用域。而JavaScript中的 this 却更加类似于 动态作用域的机制。
this是在调用时被绑定的，完全取决于函数的调用位置。
一、调用位置
嗲偶偶那个位置就是函数在代码中被调用的位置(而不是声明的位置)
寻找调用位置，就是要分析调用栈(即为了到达当前执行位置所调用的所有函数)。
function baz() {
// 当前调用栈是：baz
// 因此，当前调用位置是全局作用域
console.log('baz')
bar() // bar 的调用位置
}
function bar() {
// 当前调用栈是 baz ---> bar
// 因此，当前调用位置在 baz 中
console.log('bar')
foo() // foo 的调用位置
}
function foo() {
// 当前调用栈是 baz -> bar -> foo
// 因此，当前调用位置在 bar 中
console.log('foo')
}
baz() // baz 的调用位置
二、绑定规则
找到调用位置后，需要分段绑定规则。绑定规则有四条
2.1、默认绑定
function foo() {
console.log(this.a)
}
var a = 2
foo() // 2
当调用 foo() 是，this.a 被解析成立全局变量a。因为这里应用了 this 的默认绑定。this 指向了全局对象。而在全局对象中声明的变量，就是全局对象的一个同名属性。
如果使用 严格模式(strict mode)，则不能将全局对象用于弄人绑定，因此 this 会绑定到 undefined
function foo() {
"use strict"
console.log(this.a)
}
var a = 2
foo() // TypeError：Cannot read property 'a' of undefined
这里有一个微妙但是非常重要的细节，虽然 this 的绑定规则完全取决于调用位置，但是只有 foo() 运行在非 strict mode 下时，默认绑定才能绑定到全局对象；在严格模式下调用foo() 则不影响默认绑定：
function foo() {
console.log(this.a)
}
var a = 2
(function() {
"use strict"
foo() // 2
})()
2.2、隐式绑定
另一条需要考虑的规则是调用位置是否有上下文对象，或者说是否被某个对象拥有或者包含。
function foo() {
console.log(this.a)
}
bar obj = {
a: 2,
foo: foo
}
obj.foo() // 2
需要注意的是，无论是直接在 obj 中定义还是先定义再添加为引用属性，这个函数严格来说都不属于 obj 对象。然而调用位置会使 obj 上下文来引用函数，可以使函数被调用时 obj 对象 “拥有” 或者 “包含” 函数引用。
当 foo() 被调用时，它的前面确实加上了对 obj 的引用。当函数引用有上下文对象时，隐式绑定规则会把函数调用中的this绑定到这个上下文对象。
对象属性引用链中只有上一层或者说最后一层在调用位置中起作用。
function foo() {
console.log(this.a)
}
var obj2 = {
a: 42,
foo: foo
}
var obj1 = {
a: 2,
obj2: obj2
}
obj1.obj2.foo() // 42
隐式丢失
隐式绑定的函数丢失绑定对象，也就是说它会应用默认绑定，从而把this绑定到全局对象或者undefined 上，取决于是否是严格模式。
function foo() {
console.log(this.a)
}
var obj = {
a: 2,
foo: foo
}
var bar = obj.foo // 函数别名
var a = "global"
bar() // global
虽然 bar 是 obj.foo 的一个引用，但实际上，它引用的是 foo 函数本身，因此此时的 bar 其实是一个不带任何修饰的函数调用，因此应用了默认绑定。
2.3、显式绑定
JavaScript 中 “所有” 函数都有一些有用的特性，这和他们的 [[prototype]] 有关。具体点说，可以使用函数的 call(...) 和 apply(...)方法。这两个方法第一个参数是一个对象，是给 this 准备的，接着再调用函数时将其绑定到 this。因为你可以直接指定 this 的绑定对象，因此我们称之为显式绑定。
function foo() {
console.log(this.a)
}
var obj = {
a: 2
}
foo.call( obj ) // 2
通过 foo.call(...) ，可以在调用foo时强制把它的this绑定到 obj 上
如果传入了一个原始值来当做 this 的绑定对象，这个原始值会被转换成它的对象形式(也就是 new String(...)、new Number(...))。这通常被称为“装箱”
硬绑定
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
我们创建了函数 bar()，并在它的内部调用了 foo.call(obj)，因此强制把 foo 的 this 绑定到了 obj。无论之后如何调用函数 bar，他总会手动在 obj 上调用 foo。这种绑定是一种显式的强制绑定，一般称之为硬绑定
硬绑定的典型应用场景就是创建一个包裹的函数，负责接收参数并返回值：
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
另一种使用法法是创建一个可以重复使用的辅助函数：
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，bind() 会返回一个硬编码的新函数，它会把你指定的参数设置为 this 的上下文并调用原始函数。
API 调用的 “上下文”
第三方库的许多函数，以及 JavaScript 语言和宿主环境中许多新的内置函数，都提供了一个可选的参数，通常被称为“上下文”(context)，其作用和bind(...)一样，确保你的回调函数使用指定的this
function foo(el) {
console.log( el, this.id )
}
var obj = {
id: 'awesome'
};
// 调用 foo(...) 时把this 绑定到 obj
[1, 2, 3].forEach( foo, obj )
// 1 awesome 2 awesome 3 awesome
这些函数实际上就是通过 call(...) 或者 apply(...) 实现了显式绑定，这样可以少写一些代码
2.4、new 绑定
最后一条 this 的绑定规则，再次之前需要知道，在传统的面向类的语言中，“构造函数” 是类中的一些特殊方法，使用 new 初始化类时会调用类中的构造函数。通常的形式是这样的；
something = new MyClass
JavaScript 中 new 的机制实际上和面向类的语言完全不同，在 JavaScript 中，构造函数只是一些使用 new 操作符时被调用的函数。它们并不属于某个类，也不会实例化一个类。实际上它们甚至都不能说是一种特殊的函数类型，它们只是被 new 操作符调用的普通函数而已。所有函数都可以用 new 来调用，这种函数调用被称为构造函数调用，这里有一个重要但是非常细微的区别：实际上并不存在所谓的“构造函数”，只是对于函数的“构造调用”
使用 new 来调用函数，或者说发生构造函数调用时，会自动执行下面的操作。
- 创建（或者说构造）一个全新的对象
- 这个新对象会被执行[[Prototype]] 连接
- 这个新对象会绑定到函数调用的this
- 如果函数没有返回其他对象，那么new表达式中的函数调用会自动返回这个新对象。
function foo(a) {
this.a = a
}
var bar = new foo(2)
console.log(bar.a) // 2
使用 new 来调用 foo(...) 时，会构造一个新对象，把它绑定到 foo(...) 调用的this 上。new 是最后一种可以影响函数调用时 this 绑定行为的方法，我们称之为 new 绑定。
三、优先级
现在已经知道了 this绑定的 四条规则。但是，如果某个调用位置可以应用多条规则怎么办？那么就必须给这些规则设定优先级。
首先，毫无疑问。默认绑定 是四条规则中优先级最低的。
显式绑定和隐式绑定哪个优先级更高勒？
function foo() {
console.log(this.a)
}
var obj1 = {
a: 2,
foo: foo
}
var obj2 = {
a: 3,
foo: foo
}
obj1.foo() // 2
obj2.foo() // 3
obj1.foo.call(obj2) // 3
obj2.foo.call(obj1) // 2
可以看到，显式绑定的优先级高于隐式绑定
new 绑定 和 隐式绑定的优先级
function foo(something) {
this.a = something
}
var obj1 = {
foo: foo
}
var obj2 = {}
obj1.foo(2)
console.log( obj1.a ) // 2
obj1.foo.call( obj2, 3 )
console.log( obj2.a ) // 3
var bar = new obj1.foo( 4 )
console.log( obj1.a ) // 2
console.log( bar.a ) // 4
可以看到， new 绑定 比 隐式绑定 优先级高
new 绑定和 显式绑定 比较：
function foo(something) {
this.a = something
}
var obj1 = {}
var bar = foo.bind( obj1 )
bar( 2 )
console.log( obj1.a ) // 2
var baz = new bar( 3 )
console.log( obj1.a ) // 2
console.log( baz.a ) // 3
new 修改了硬绑定(到 obj1的 ) 调用 bar(...) 中的 this。因为使用了 new 绑定，得到了一个名字为 baz 的新对象，并且 baz.a 的值是3.
实际上，ES5 中内置的 Function.prototype.bind(...) 是很复杂的。bind() 会返回硬绑定函数是否被new 调用，如果是的话就会使用新创建的 this 来替换硬绑定的 this。
在 new 中使用硬绑定函数，主要目的是预先设置函数的一些参数，这样在使用 new 进行初始化时就可以只传入其余的参数。bind(...) 的功能之一就是可以把除了第一个参数(第一个参数 用于绑定 this)之外的其他参数都传给下层的函数( 这种技术称为 “部分应用”， 是 “柯里化” 的一种)。
function foo(p1, p2) {
this.val = p1 + p2
}
// 之所以使用 null 是因为在本例中我们并不关心硬绑定的this是什么
// 反之使用 new 是 this会被修改
var bar = foo.bind(null, 'p1')
var baz = new bar('p2')
baz.val // p1, p2
被忽略的this
如果把 null 或者 undefined 作为 this 的绑定对象传入 call、apply 或者 bind，这些值在调用时会被忽略，实际应用的默认绑定规则。创建的作用是使用 apply() 来展开一个数组，bind() 可以对参数进行柯里化(预先设置一些参数)
function foo(a, b) {
console.log(`a: ${a}, b: ${b}`)
}
// 把数组 展开成参数
foo.apply(null, [2, 3]) // a: 2, b: 3
// 使用bind() 进行柯里化
var bar = foo.bind( null, 2 )
bar(3) // a: 2, b: 3
更安全的this
如果函数并不关心this 的话，你可任然需要传入一个占位值，这时null可以能是一个不错的选择。一种“更安全” 的做法是传入一个特殊对象，把 this 绑定到这个对象不会对你的程序产生任何副作用。我们可以创建一个 “DMZ”(demilitarized zone)对象 —— 他就是一个空的非委托的对象。
在 JavaScript 中创建一个空对象最简单的方法都是 Object.create(null)。 Object.create(null) 和 {} 很像，但是比奴会创建 Object.prototype 这个委托，所以它比 {} “更空”
function foo(a, b) {
console.log(`a: ${a}, b: ${b}`)
}
// DMZ 空对象
var DMZ = Object.create(null)
// 把数组展开成参数
foo.apply(DMZ, [2, 3])
// bind() 柯里化
var bar = foo.bind(DMZ, 2)
bar(3)
现在我们可以根据优先级来判断函数在某个调用位置应用的是哪条规则。
- 函数是否在 new 中调用（new绑定）？如果是的话 this 绑定的是新创建的对象。
var bar = new foo() - 函数是否通过 call、apply（显示绑定）或者硬绑定调用？如果是的话，this绑定的是指定的对象
var bar = foo.calal(obj2) - 函数是否在某个上下文对象中调用（隐式绑定）？如果是的话，this 绑定的是那个上下文对象
var bar = obj1.foo() - 如果都不是的话，使用（默认绑定）。如果在严格模式下，就绑定到 undefined，否则绑定到全局对象。
var bar = foo()
网友评论