Appearance
绑定规则
根据不同的使用场合，this 有不同的值，主要分为下面几种情况：
- 默认绑定
- 隐式绑定
- new 绑定
- 显示绑定
规则一：默认绑定
函数的 this 关键字在 JavaScript 中的表现略有不同，此外，在严格模式和非严格模式之间也会有一些差别
在绝大多数情况下，函数的调用方式决定了 this 的值（运行时绑定）
this 关键字是函数运行时自动生成的一个内部对象，只能在函数内部使用，总指向调用它的对象
全局环境中定义 person 函数，内部使用 this 关键字
javascript
var name = "Jenny";
function person() {
return this.name;
}
console.log(person()); //Jenny
1
2
3
4
5
2
3
4
5
上述代码输出 Jenny，原因是调用函数的对象在游览器中位 window，因此 this 指向 window，所以输出 Jenny
注意：
严格模式下，不能将全局对象用于默认绑定，this 会绑定到 undefined，只有函数运行在非严格模式下，默认绑定才能绑定到全局对象
规则二：隐式绑定
函数还可以作为某个对象的方法调用，这时 this 就指这个上级对象
javascript
function test() {
console.log(this.x);
}
var obj = {};
obj.x = 1;
obj.m = test;
obj.m(); // 1
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this 指向的也只是它上一级的对象
javascript
var o = {
a: 10,
b: {
fn: function () {
console.log(this.a); //undefined
},
},
};
o.b.fn();
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
上述代码中，this 的上一级对象为 b，b 内部并没有 a 变量的定义，所以输出 undefined
这里再举一种特殊情况
javascript
var o = {
a: 10,
b: {
a: 12,
fn: function () {
console.log(this.a); // undefined
console.log(this); // window
},
},
};
var j = o.b.fn;
j();
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
此时 this 指向的是 window，这里的大家需要记住，this 永远指向的是最后调用它的对象，虽然 fn 是对象 b 的方法，但是 fn 赋值给 j 时候并没有执行，所以最终指向 window
规则三：new 绑定
通过构建函数 new 关键字生成一个实例对象，此时 this 指向这个实例对象
javascript
function test() {
this.x = 1;
}
var obj = new test();
obj.x; // 1
1
2
3
4
5
6
2
3
4
5
6
上述代码之所以能过输出 1，是因为 new 关键字改变了 this 的指向 这里再列举一些特殊情况： new 过程遇到 return 一个对象，此时 this 指向为返回的对象
javascript
function fn() {
this.user = "xxx";
return {};
}
var a = new fn();
console.log(a.user); //undefined
1
2
3
4
5
6
2
3
4
5
6
如果返回一个简单类型的时候，则 this 指向实例对象
javascript
function fn() {
this.user = "xxx";
return 1;
}
var a = new fn();
console.log(a.user); //xxx
1
2
3
4
5
6
2
3
4
5
6
注意的是 null 虽然也是对象，但是此时 new 仍然指向实例对象
javascript
function fn() {
this.user = "xxx";
return null;
}
var a = new fn();
console.log(a.user); //xxx
1
2
3
4
5
6
2
3
4
5
6
规则四：显示修改
apply()、call()、bind()是函数的一个方法，作用是改变函数的调用对象。它的第一个参数就表示改变后的调用这个函数的对象。因此，这时 this 指的就是这第一个参数
javascript
var x = 0;
function test() {
console.log(this.x);
}
var obj = {};
obj.x = 1;
obj.m = test;
obj.m.apply(obj); // 1
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9