参考文章：JavaScript 的 this 原理
一、问题的由来
学懂 JavaScript 语言，一个标志就是理解下面两种写法，可能有不一样的结果。
var obj = {
foo: function () {}
};
var foo = obj.foo;
// 写法一
obj.foo()
// 写法二
foo()
上面代码中，虽然obj.foo和foo指向同一个函数，但是执行结果可能不一样。
请看下面的例子。
var obj = {
foo: function () { console.log(this.bar) },
bar: 1
};
var foo = obj.foo;
var bar = 2;
obj.foo() // 1
foo() // 2
这种差异的原因，就在于函数体内部使用了this关键字。很多教科书会告诉你，this指的是函数运行时所在的环境。对于obj.foo()来说，foo运行在obj环境，所以this指向obj；对于foo()来说，foo运行在全局环境，所以this指向全局环境。所以，两者的运行结果不一样。
这种解释没错，但是教科书往往不告诉你，为什么会这样？也就是说，函数的运行环境到底是怎么决定的？举例来说，为什么obj.foo()就是在obj环境执行，而一旦var foo = obj.foo，foo()就变成在全局环境执行？
本文就来解释 JavaScript 这样处理的原理。理解了这一点，你就会彻底理解this的作用。
- 不管是什么场合，this都有一个共同点：它总是返回一个对象。
二、内存的数据结构
JavaScript 语言之所以有this的设计，跟内存里面的数据结构有关系。
var obj = { foo: 5 };
上面的代码将一个对象赋值给变量obj。JavaScript 引擎会先在内存里面，生成一个对象{ foo: 5 }，然后把这个对象的内存地址赋值给变量obj。
image
也就是说，变量
obj是一个地址（reference）。后面如果要读取obj.foo，引擎先从obj拿到内存地址，然后再从该地址读出原始的对象，返回它的foo属性。
原始的对象以字典结构保存，每一个属性名都对应一个属性描述对象。举例来说，上面例子的foo属性，实际上是以下面的形式保存的。
image
- 注意，foo属性的值保存在属性描述对象的value属性里面。
三、函数
这样的结构是很清晰的，问题在于属性的值可能是一个函数。
var obj = { foo: function () {} };
这时，引擎会将函数单独保存在内存中，然后再将函数的地址赋值给foo属性的value属性。
image
{
foo: {
[[value]]: 函数的地址
...
}
}
由于函数是一个单独的值，所以它可以在不同的环境（上下文）执行。
var f = function () {};
var obj = { f: f };
// 单独执行
f()
// obj 环境执行
obj.f()
四、环境变量
- JavaScript 允许在函数体内部，引用当前运行环境的其他变量。
var f = function () {
console.log(x);
};
上面代码中，函数体里面使用了变量x。该变量由运行环境提供。
现在问题就来了，由于函数可以在不同的运行环境执行，所以需要有一种机制，能够在函数体内部获得当前的运行环境（context）。所以，this就出现了，它的设计<font color=red size=4>目的</font>就是在函数体内部，指定函数当前的运行环境。
var f = function () {
console.log(this.x);
}
上面代码中，函数体里面的this.x就是指当前运行环境的x。
var f = function () {
console.log(this.x);
}
var x = 1;
var obj = {
f: f,
x: 2,
};
// 单独执行（全局环境执行）
f() // 1
// obj 环境执行
obj.f() // 2
上面代码中，函数f在全局环境执行，相当于window.f()，this.x指向全局环境的x。在obj环境执行，this.x指向obj.x。
回到本文开头提出的问题(如下)，obj.foo()是通过obj找到foo，所以就是在obj环境执行。只要函数被赋给另一个变量，this的指向就会变。一旦var foo = obj.foo，obj.foo被赋值给变量foo，内部的this就会指向foo()运行时所在的对象（本例是顶层对象window）。
var obj = {
foo: function () {}
};
var foo = obj.foo;
// 写法一
obj.foo()
// 写法二
foo()//相当于window.foo()
- 再看一个网页编程的例子。
<input type="text" name="age" size=3 onChange="validate(this, 18, 99);">
<script>
function validate(obj, lowval, hival){
if ((obj.value < lowval) || (obj.value > hival))
console.log('Invalid Value!');
}
</script>
上面代码是一个文本输入框，每当用户输入一个值，就会调用onChange回调函数，验证这个值是否在指定范围。浏览器会向回调函数传入当前对象，因此this就代表传入当前对象（即文本框），然后就可以从this.value上面读到用户的输入值。
五、使用场合
注意：this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是最终调用它的对象
- （1）全局环境
全局环境使用this，它指的就是顶层对象window。
this === window // true
function f() {
console.log(this === window);
}
f() // true 相当于window.f()
上面代码说明，不管是不是在函数内部，只要是在全局环境下运行，this就是指顶层对象window。
- （2）构造函数
var Obj = function (p) {
this.p = p;
};
var o = new Obj('Hello World!');
o.p // "Hello World!"
直接Obj()调用，this指向window。用new把Obj作为构造函数来调用，this指向原型为Obj.prototype的空对象。Obj函数表达式中，没有写返回值，默认用this作为返回值赋给o，所以o有了p属性。
- （2.1）构造函数中的
this碰到return时
如果返回值是一个对象，会将return的对象作为返回值。
如果没有返回值，或者返回值是基本类型，那么this会作为返回值。
function fn()
{
this.user = '追梦子';
return { user: 11 };
}
var a = new fn;
console.log(a.user); //11
//fn ----> Function.prototype ----> Object.prototype ----> null
function fn()
{
this.user = '追梦子';
return function(){};//函数对象作为返回值
}
var a = new fn;
console.log(a.user); //undefine
function fn()
{
this.user = '追梦子';
return 1;//this作为返回值
}
var a = new fn;
console.log(a.user); //追梦子
function fn()
{
this.user = '追梦子';
return undefined;//this作为返回值
}
var a = new fn;
console.log(a.user); //追梦子
function fn()
{
this.user = '追梦子';
return null;//this作为返回值
}
var a = new fn;
console.log(a.user); //追梦子
- 注意：
return之后的内容不执行。 - （3）对象的方法
如果对象的方法里面包含this，this的指向就是方法运行时所在的对象。
- （3.1）但是，这条规则很不容易把握。请看下面的代码。
var obj ={
foo: function () {
console.log(this);
}
};
obj.foo() // obj
上面代码中，obj.foo方法执行时，它内部的this指向obj。
- （3.2）但是，下面这几种用法，都会改变
this的指向(有些难懂)。
var obj ={
foo: function () {
console.log(this);
}
};
(obj.foo = obj.foo)() // window
(false || obj.foo)() // window
(1, obj.foo)() // window
上面代码中，obj.foo就是一个值。这个值真正调用的时候，运行环境已经不是obj了，而是全局环境，所以this不再指向obj。
- （3.3）如果
this所在的方法不在对象的第一层，这时this只是指向当前一层的对象，而不会继承更上面的层。即这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象
var a = {
p: 'Hello',
b: {
m: function() {
console.log(this.p);
}
}
};
a.b.m() // undefined
上面代码中，a.b.m方法在a对象的第二层，该方法内部的this不是指向a，而是指向a.b。
如果要达到预期效果，只有写成下面这样。
var a = {
b: {
m: function() {
console.log(this.p);
},
p: 'Hello'
}
};
a.b.m() // Hello
- （3.4）该函数方法赋值给另一个对象，就会改变this的指向。
var o = {
a:10,
b:{
a:12,
fn:function(){
console.log(this.a); //undefined
console.log(this); //window
}
}
}
var j = o.b.fn;
j();
以上虽然函数fn是被对象b所引用，但是在将fn赋值给变量j的时候并没有执行，所以最终指向的是window。this永远指向的是最后调用它的对象，也就是看它执行的时候是谁调用的。
为了避免这个问题，可以只将fn所在的对象赋值给j，这样调用时，this的指向就不会变。
var j = o.b;
j.fn() // Hello
- （3.5）对象原型链上的
this
var o={f:function(){return this.a+this.b;}};
var p =Object.create(o);//p的原型指向o
p.a=1;
p.b=4;
console.log(p.f());//5
p调用原型链上的方法f，此时原型链上对象o也是可以去拿到p的属性a，b的。
- （5）箭头函数与this
ES6箭头函数中的this绑定问题
var obj = {
birth: 1990,
getAge: function () {
console.log(this); //obj
var b = this.birth; // 1990
var fn = function () {
console.log(b); // 1990
console.log(this); //window
return new Date().getFullYear() - this.birth;
// 没有某个对象进行显示调用fn，this指向window或undefined
};
return fn();
}
};
obj.getAge();
现在，箭头函数完全修复了this的指向，使this的指向很明确，this总是指向最外层调用者obj（箭头函数体内的this对象就是定义时所在的对象，而不是使用时所在对象）（箭头函数没有自己的this，它的this继承于外层代码库中的this）：
var obj = {
birth: 1990,
getAge: function () {
var b = this.birth; // 1990
var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
return fn();
}
};
obj.getAge(); // 25
（6）隐式绑定有一个大陷阱，绑定很容易丢失
一种丢失：var Hi = person.sayHi;
另一种丢失：隐式绑定的丢失是发生在回调函数中(事件回调也是其中一种)
六、使用注意点
- 避免多层 this
由于this的指向是不确定的，所以切勿在函数中包含多层的this。
var o = {
f1: function () {
console.log(this);
var f2 = function () {
console.log(this);
}();//函数赋值给变量，改变了this指向到window
h}
}
o.f1()
// Object
// Window
上面代码包含两层this，结果运行后，第一层指向对象o，第二层指向全局对象，因为实际执行的是下面的代码。
var temp = function () {
console.log(this);
};
var o = {
f1: function () {
console.log(this);
var f2 = temp();
}
}
一个解决方法是在第二层改用一个指向外层
this的变量。
var o = {
f1: function() {
console.log(this);
var that = this;
var f2 = function() {
console.log(that);
}();
}
}
o.f1()
// Object
// Object
上面代码定义了变量that，固定指向外层的this，然后在内层使用that，就不会发生this指向的改变。
注意： 使用一个变量固定this的值，然后内层函数调用这个变量，是非常常见的做法，请务必掌握。
另一种解决方法是JavaScript
提供了严格模式，也可以硬性避免这种问题。严格模式下，如果函数内部的this指向顶层对象，就会报错。
var counter = {
count: 0
};
counter.inc = function () {
'use strict';
this.count++
};
var f = counter.inc;
f()
// TypeError: Cannot read property 'count' of undefined
上面代码中，inc方法通过'use strict'声明采用严格模式，这时内部的this一旦指向顶层对象，就会报错。
- 避免数组处理方法中的
this
数组的map和foreach方法，允许提供一个函数作为参数。这个函数内部不应该使用this。
var o = {
v: 'hello',
p: [ 'a1', 'a2' ],
f: function f() {
this.p.forEach(function (item) {
console.log(this.v + ' ' + item);
});
}
}
o.f()
// undefined a1
// undefined a2
上面代码中，foreach方法没有指定上下文参数，所以其回调函数中的this，其实是指向window对象，因此取不到o.v的值。
解决这个问题的方法有两种：
- 就是前面提到的，使用中间变量固定
this。
var o = {
v: 'hello',
p: [ 'a1', 'a2' ],
f: function f() {
var that = this;
this.p.forEach(function (item) {
console.log(that.v+' '+item);
});
}
}
o.f()
// hello a1
// hello a2
- 将this当作foreach方法的第二个参数，固定它的运行环境。
var o = {
v: 'hello',
p: [ 'a1', 'a2' ],
f: function f() {
this.p.forEach(function (item) {
console.log(this.v + ' ' + item);
}, this);
}
}
o.f()
// hello a1
// hello a2
- 避免回调函数中的 this
回调函数中的this往往会改变指向，最好避免使用。
var o = new Object();
o.f = function () {
console.log(this === o);
}
// jQuery 的写法
$('#button').on('click', o.f);
上面代码中，点击按钮以后，控制台会显示false。原因是此时this不再指向o对象，而是指向按钮的 DOM 对象，因为f方法是在按钮对象的环境中被调用的。这种细微的差别，很容易在编程中忽视，导致难以察觉的错误。
为了解决这个问题，可以采用call、apply、bind方法对this进行绑定，也就是使得this固定指向某个对象，减少不确定性。
网友评论