转载:[译] 让我们一起解决“this”难题—第一部分

难道我们就不能彻底搞清楚“this”吗？在某种程度上，几乎所有的 JavaScript 开发人员都曾经思考过“this”这个事情。对我来说，每当“this”出来捣乱的时候，我就会想方设法地去解决掉它，但过后就把它忘了，我想你应该也曾遇到过类似的场景。但是今天，让我们弄明白它，让我们一次性地彻底解决“this”的问题，一劳永逸。


前几天，我在图书馆遇到了一个意想不到的事情。

这本书的整个第二章都是关于“this”的，我很有自信地通读了一遍，但是发现其中有些地方讲到的“this”，我居然搞不懂它们是什么，需要去猜测。真的是时候反省一下我过度自信的愚蠢行为了。我再次把这一章重读了好几遍，发觉这里面的内容是每个 Javascript 开发人员都应该了解的。


因此，我尝试着用一种更彻底的方式和更多的示例代码来展示 凯尔·辛普森 在他的这本书 你不知道的 Javascript 中描述的那些规范。


在这里我不会通篇只讲理论，我会直接以曾经困扰过我的困难问题为例开始讲起，我希望它们也是你感到困难的问题。但不管这些问题是否会困挠你，我都会给出解释说明，我会一个接一个地向你介绍所有的规则，当然还会有一些追加内容。


在开始之前，我假设你已经了解了一些 JavaScript 的背景知识，当我讲到 global、window、this、prototype 等等的时候，你知道它们是什么意思。这篇文章中，我会同时使用 global 和 window，在这里它们就是一回事，是可以互换的。


在下面给出的所有代码示例中，你的任务就是猜一下控制台输出的结果是什么。如果你猜对了，就给你自己加一分。准备好了吗？让我们开始吧。


Example #1


function foo() { 

console.log(this); 

bar(); 

}


function bar() { 

console.log(this); 

baz(); 

}

function baz() { 

console.log(this); 

}

foo();

复制代码你被难住了吗？为了测试，你当然可以把这段代码复制下来，然后在浏览器或者 Node 的运行环境中去运行看看结果。再来一次,你被难住了吗？好吧，我就不再问了。但说真的，如果你没被难住，那就给你自己加一分。

如果你运行上面的代码，就会在控制台中看到 global 对象被打印出三次。为了解释这一点，让我来介绍 第一个规则，默认绑定。规则规定，当一个函数执行独立调用时，例如只是 funcName();，这时函数的“this”被指向 global 对象。

需要理解的是，在调用函数之前，“this”并没有绑定到这个函数，因此，要找到“this”，你应该密切注意该函数是如何调用，而不是在哪里调用。所有三个函数 foo();bar(); 和 baz();_ 都是独立的调用，因此这三个函数的“this”都指向全局对象。

Example #2

‘use strict’;

function foo() {

console.log(this);

bar();

}

function bar() {

console.log(this);

baz();

}

function baz() {

console.log(this);

}

foo();

复制代码注意下最开始的“use strict”。在这种情况下，你觉得控制台会打印什么？当然，如果你了解 strict mode，你就会知道在严格模式下 global 对象不会被默认绑定。所以，你得到的打印是三次 undefined 的输出，而不再是 global。

回顾一下，在一个简单调用函数中，比如独立调用中，“this”在非严格模式下指向 global 对象，但在严格模式下不允许 global 对象默认绑定，因此这些函数中的“this”是 undefined。

为了使我们对默认绑定概念理解得更加具体，这里有一些示例。

Example #3

function foo() {

function bar() {

  console.log(this);

}

bar();

}

foo();

复制代码foo 先被调用，然后又调用 bar，bar 将“this”打印到控制台中。这里的技巧是看看函数是如何被调用的。foo 和 bar 都被单独调用，因此，他们内部的“this”都是指向 global 对象。但是由于 bar 是唯一执行打印的函数，所以我们看到 global 对象在控制台中输出了一次。

我希望你没有回答 foo 或 bar。有没有？

我们已经了解了默认绑定。让我们再做一个简单的测试。在下面的示例中，控制台输出什么？

Example #4

var a = 1;

function foo() { 

console.log(this.a); 

}

foo();

复制代码输出结果是 undefined？是 1？还是什么？

如果你已经很好地理解了之前讲解的内容，那么你应该知道控制台输出的是“1”。为什么？首先，默认绑定作用于函数 foo。因此 foo 中的“this”指向 global 对象，并且 a 被声明为 global 变量，这就意味着 a 是 global 对象的属性（也称之为全局对象污染），因此 this.a 和 var a 就是同一个东西。

随着本文的深入，我们将会继续研究默认绑定，但是现在是时候向你介绍下一个规则了。

Example #5

var obj = { 

a: 1, 

foo: function() { 

  console.log(this); 

} 

};

obj.foo();

复制代码这里应该没有什么疑问，对象“obj”会被输出在控制台中。你在这里看到的是 隐式绑定。规则规定，当一个函数被作为一个对象方法被调用时，那么它内部的“this”应该指向这个对象。如果函数调用前面有多个对象（ obj1.obj2.func() ），那么函数之前的最后一个对象（obj3）会被绑定。

需要注意的一点是函数调用必须有效，那也就是说当你调用 obj.func() 时，必须确保 func 是对象 obj 的属性。

因此，在上面的例子中调用 obj.foo() 时，“this”就指向 obj，因此 obj 被打印输出在控制台中。

Example #6

function logThis() { 

console.log(this); 

}

var myObject = { 

a: 1, 

logThis: logThis 

};

logThis(); 

myObject.logThis();

复制代码你被难住了？我希望没有。

跟在 myObject 后面的这个全局调用 logThis() 通过 console.log(this) 打印的是 global 对象；而 myObject.logThis() 打印的是 myObject 对象。

这里需要注意一件有趣的事情：

console.log(logThis === myObject.logThis); // true

复制代码为什么不呢？它们当然是相同的函数，但是你可以看到 如何调用_logThis_ 会让其中的“this”发生改变。当 logThis 被单独调用时，使用默认绑定规则，但是当 logThis 作为前面的对象属性被调用时，使用隐式绑定规则。

不管采用哪条规则，让我们看看是怎么处理的（双关语）。

Example #8

function foo() { 

var a = 2; 

this.bar(); 

}

function bar() { 

console.log(this.a); 

}

foo();

复制代码控制台输出什么？首先，你可能会问我们可以调用“_this.bar()”吗？当然可以，它不会导致错误。

就像示例 #4 中的 var a 一样，bar 也是全局对象的属性。因为 foo 被单独调用了，它内部的“this”就是全局对象(默认绑定规则)。因此 foo 内部的 this.bar 就是 bar。但实际的问题是，控制台中输出什么？

如果你猜的没错，“undefined”会被打印出来。

注意 bar 是如何被调用的？看起来，隐式绑定在这里发挥作用。隐式绑定意味着 bar 中的“this”是其前面的对象引用。bar 前面的对象引用是全局对象，在 foo 里面是全局对象，对不对？因此在 bar 中尝试访问 this.a 等同于访问 [global object].a。没有什么意外，因此控制台会输出 undefined。

太棒了！继续向下讲解。

Example #7

var obj = { 

a: 1, 

foo: function(fn) { 

  console.log(this); 

  fn(); 

} 

};

obj.foo(function() { 

console.log(this); 

});

复制代码请不要让我失望。

函数 foo 接受一个回调函数作为参数。我们所做的就是在调用 foo 的时候在参数里面放了一个函数。

obj.foo( function() { console.log(this); } );

复制代码但是请注意 foo 是 如何 被调用的。它是一个单独调用吗？当然不是，因此第一个输出到控制台的是对象 obj 。我们传入的回调函数是什么？在 foo 内部，回调函数变为 fn ，注意 fn 是 如何 被调用的。对，因此 fn 中的“this”是全局对象，因此第二个被输出到控制台的是全局对象。

希望你不会觉得无聊。顺便问一下，你的分数怎么样？还可以吗？好吧，这次我准备难倒你了。

Example #8

var arr = [1, 2, 3, 4];

Array.prototype.myCustomFunc = function() {

console.log(this);

};

arr.myCustomFunc();

复制代码如果你还不知道 Javascript 里面的 .prototype 是什么，那你就权且把它和其他对象等同看待，但如果你是 JavaScript 开发者，你应该知道。你知道吗？努努力，再去多读一些关于原型链相关的书籍吧。我在这里等着你。

那么打印输出的是什么？是 Array.prototype 对象？错了！

这是和之前相同的技巧，请检查 custommyfunc 是 如何 被调用的。没错，隐式绑定把 arr 绑定到 myCustomFunc，因此输出到控制台的是 arr[1,2,3,4]。

我说的，你理解了吗？

Example #9

var arr = [1, 2, 3, 4];

arr.forEach(function() { 

console.log(this); 

});

复制代码执行上述代码的结果是，在控制台中输出了 4 次全局对象。如果你错了，也没关系。请再看示例#7。还没理解？下一个示例会有所帮助。

Example #10

var arr = [1, 2, 3, 4];

Array.prototype.myCustomFunc = function(fn) { 

console.log(this); 

fn(); 

};

arr.myCustomFunc(function() { 

console.log(this); 

});

复制代码就像示例 #7 一样，我们将回调函数 fn 作为参数传递给函数 myCustomFunc。结果是传入的函数会被独立调用。这就是为什么在前面的示例（#9）中输出全局对象，因为在 forEach 中传入的回调函数被独立调用。

类似地，在本例中，首先输出到控制台的是 arr，然后是输出的是全局对象。我知道这看上去有点复杂，但我相信如果你能再多用点心，你会弄明白的。

让我们继续使用这个数组的示例来介绍更多的概念。我想我会在这里使用一个简称，WGL 怎么样？作为 WHAT.GETS.LOGGED 的简称？好吧，在我开始老生常谈之前，下面是另外一个例子。

Example #11

var arr = [1, 2, 3, 4];

Array.prototype.myCustomFunc = function() { 

console.log(this);

(function() { 

console.log(this); 

})();

};

arr.myCustomFunc();

复制代码那么，输出是？

答案和示例 #10 完全一样。轮到你了，说一说为什么首先输出的是 arr？你看到第一个 console.log(this) 的下面有一段复杂的代码，它被称为 IIFE（立即调用的函数表达式）。这个名字不用再过多解释了，对吧？被 (…)(); 这样形式封装的函数会立即被调用，也就是说等同于被独立调用，因此它内部的“this”是全局变量，所以输出的是全局变量。

要来新概念了！让我们看看你对 ES2015 的熟悉程度。

Example #12

var arr = [1, 2, 3, 4];

Array.prototype.myCustomFunc = function() { 

console.log(this);

(function() { 

  console.log(‘Normal this : ‘, this); 

})();

(() =\> { 

  console.log(‘Arrow function this : ‘, this); 

})();

};

arr.myCustomFunc();

复制代码除了 IIFE 后面的增加了 3 行代码之外，其他代码与示例 #11 完全相同。它实际上也是一种 IIFE，只是语法稍有不同。嗨，这是箭头函数。

箭头函数的意思是，这些函数中的“this”是一个词法变量。也就是说，当将“this”与这种箭头函数绑定时，函数会从包裹它的函数或作用域中获取“this”的值。包裹我们这个箭头函数的函数里面的“this”是 arr。因此？

// This is WGL

arr [1, 2, 3, 4]

Normal this : global

Arrow function this : arr [1, 2, 3, 4]

复制代码如果我用箭头函数重写示例 #9 会怎么样？控制台输出什么呢？

var arr = [1, 2, 3, 4];

arr.forEach(() => {

console.log(this);

});

复制代码上面的这个例子是额外追加的，所以即使你猜对了也不用增加分数。你还在算分吗？书呆子。

现在请仔细关注以下示例。我会不惜一切代价让你弄懂他们 :-)。

Example #13

var yearlyExpense = {

year: 2016,

expenses: [

  {‘month’: ‘January’, amount: 1000},

  {‘month’: ‘February’, amount: 2000},

  {‘month’: ‘March’, amount: 3000}

  ],

printExpenses: function() {

  this.expenses.forEach(function(expense) {

  console.log(expense.amount + ‘ spent in ‘ + expense.month + ‘, ‘ +    this.year);

  });

  }

};

yearlyExpense.printExpenses();

复制代码那么,输出是？多点时间想一想。

这是答案，但我希望你在阅读解释之前先自己想想。

1000 spent in January, undefined 

2000 spent in February, undefined 

3000 spent in March, undefined

复制代码这都是关于 printExpenses 函数的。首先注意下它是如何被调用的。隐式绑定？是的。所以 printExpenses 中的“this”指向的是对象 yearlycost。这意味着 this.expenses 是 yearlyExpense 对象中的 expenses 数组，所以这里没有问题。现在，当它在传递给 forEach 的回调函数中出现“this”时，它当然是全局对象，请参考例 #9。

注意，下面的“修正”版本是如何使用箭头函数进行改进的。

var expense = {

year: 2016,

expenses: [

  {‘month’: ‘January’, amount: 1000},

  {‘month’: ‘February’, amount: 2000},

  {‘month’: ‘March’, amount: 3000}

  ],

printExpenses: function() {

  this.expenses.forEach((expense) => {

    console.log(expense.amount + ‘ spent in ‘ + expense.month + ‘, ‘ +  this.year);

  });

  }

};

expense.printExpenses();

复制代码这样我们就得到了想要的输出结果：

1000 spent in January, 2016 

2000 spent in February, 2016 

3000 spent in March, 2016

复制代码到目前为止，我们已经熟悉了隐式绑定和默认绑定。我们现在知道函数被调用的方式决定了它里面的“this”。我们还简要地讲了箭头函数以及它们内部的“this”是怎样定义的。

在我们讨论其他规则之前，你应该知道，有些情况下，我们的“this”可能会丢失隐式绑定。让我们快速地看一下这些例子。

Example #14

var obj = { 

a: 2, 

foo: function() { 

  console.log(this); 

} 

};

obj.foo();

var bar = obj.foo; 

bar();

复制代码不要被这里面的花哨代码所分心，只需注意函数是如何被调用的，就可以弄明白“this”的含义。你现在一定已经掌握这个技巧了吧。首先 obj.foo() 被调用，因为 foo 前面有一个对象引用，所以首先输出的是对象 obj。bar 当然是被独立调用的，因此下一个输出是全局变量。提醒你一下，记住在严格模式下，全局对象是不会默认绑定的，因此如果你在开启了严格模式，那么控制台输出的就是 undefined，而不再是全局变量。

bar 和 foo 是对同一个函数的引用，唯一区别是它们被调用的方式不同。

Example #15

var obj = { 

a: 2, 

foo: function() { 

  console.log(this.a); 

} 

};

function doFoo(fn) { 

fn(); 

}

doFoo(obj.foo);

复制代码这里也没什么特别的。我们是通过把 obj.foo 作为 doFoo 函数的参数（doFoo 这个名字听起来很有趣）。同样， fn 和 foo 是对同一个函数的引用。现在我要重复同样的分析过程， fn 被独立调用，因此 fn 中的“this”是全局对象。而全局对象没有属性 a，因此我们在控制台中得到了 undifined 的输出结果。

到这里，我们这部分就讲完了。在这一部分中，我们讨论了将“this”绑定到函数的两个规则。默认绑定和隐式绑定。我们研究了如何使用“use strict”来影响全局对象的绑定，以及如何会让隐式绑定的“this”失效。我希望在接下来的第二部分中，你会发现本文对你有所帮助，在那里我们将介绍一些新规则，包括 new 和显式绑定。那里再见吧！

在我们结束之前，我想用一个“简单”的例子来作为这一部分的收尾，当我开始使用 Javascript 时，这个例子曾经让我感到非常震惊。Javascript 里面也并不是所有的东西都是美的，也有看起来很糟糕的东西。让我们看看其中的一个。

var obj = { 

a: 2, 

b: this.a * 2 

};

console.log( obj.b ); // NaN

复制代码它读起来感觉很好，在 obj 里面，“this”应该是 obj，因此是 this.a 应该是 2。嗯,错了。因为在这个对象里面的“this”是全局对象，所以如果你像这么写…

var myObj = { 

a: 2, 

b: this 

};

console.log(myObj.b); // global

复制代码控制台输出的就是全局对象。你可能会说“但是，myObj 是全局对象的属性（示例 #4 和示例 #8），不对吗？”是的，绝对正确。

console.log( this === myObj.b ); // true 

console.log( this.hasOwnProperty(‘myObj’) ); //true

复制代码“也就是说，如果我像这样写的话，它就可以！”

var myObj = { 

a: 2, 

b: this.myObj.a * 2 

};

复制代码遗憾的是，不是这样的，这会导致逻辑错误。上面的代码是不正确的，编译器会抱怨它找不到未定义的属性 a。为什么会这样？我也不太清楚。

幸运的是，getters（隐式绑定）可以给我们提供帮助。

var myObj = { 

a: 2, 

get b() { 

  return this.a * 2 

} 

};

console.log( myObj.b ); // 4

复制代码你坚持到最后了！做得好。第二部分，我们再见。

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,013评论 6赞 481
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,205评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 152,370评论 0赞 342
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,168评论 1赞 278
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,153评论 5赞 371
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,954评论 1赞 283
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,271评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,916评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,382评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,877评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,989评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,624评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,209评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,199评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,418评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,401评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,700评论 2赞 345

推荐阅读更多精彩内容

  • JavaScript程序
    第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行（line），也就是一...
    悟名先生阅读 4,116评论 0赞 13
  • Node.js相关知识
    一、你不知道的JavaScript 1、作用域 作用域 LHS RHS RHS查询与简单地查找某个变量的值别无二...
    顶儿响叮当阅读 344评论 0赞 0
  • JavaScript之this使用
    1、调用位置 在理解this的绑定之前，首先理解调用位置,决定this的绑定 function a() { // ...
    winerss阅读 293评论 0赞 0
  • 2018-06-27
    JavaScript(面向对象+原型理解+继承+作用域链和闭包+this使用总结) 一、面向对象 1、什么是面向对...
    老头子_d0ec阅读 297评论 0赞 0
  • HTTPS:
    https.cer
    FlyTheKite阅读 121评论 0赞 0