让我们一起解决“this”难题 — 第一部分 #4210

geniusq1981 · 2018-07-27T06:18:31Z

译文翻译完成，resolve #4181

Moonliujk · 2018-07-27T13:18:48Z

@leviding 校对认领

fanyijihua · 2018-07-27T13:19:23Z

@Moonliujk 好的呢 🍺

Moonliujk

文章总体上翻译的很好，但还有一些小错误需要修改一下！

Moonliujk · 2018-07-27T13:47:36Z

TODO1/lets-settle-this-part-one.md


 ![](https://i.loli.net/2018/07/23/5b553e2648b71.png)

-The second chapter of the book is all about ‘this’, I read it through, felt confident, couple of pages down a scenario pops up where I need to guess what ‘this’ is, and I mess up. That was one hell of a moment for introspection for my dumb self. I reread the chapter and then some and figured this is something every JS developer should know about.
+这本书的整个第二章都是关于“this”的，我很有自信地通读了一遍，但是发现其中有些地方讲到的“this”，我居然搞不懂它们是什么，需要去猜测。真的是时候反省一下我多度自信的愚蠢行为了。我再次把这一章重读了好几遍，发觉这里面的内容是每个 Javascript 开发人员都应该了解的。


真的是时候反省一下我多度自信的愚蠢行为了
=>
真的是时候反省一下我过度自信的愚蠢行为了
错别字

Moonliujk · 2018-07-27T13:52:01Z

TODO1/lets-settle-this-part-one.md


 ![](https://i.loli.net/2018/07/23/5b553df9455fa.png)

-Can’t we all relate to this? At some point ‘this’ has been a thing to think about for almost all JavaScript developers. For me, whenever ‘this’ started to rear its ugly head I somehow managed to make things work and then forgot about it, and I’d like think you did the same, at some point. But let’s be done with it, today, once and for all _`*dramatic drumroll*`_ let’s settle ‘this’.
+难道我们就不能彻底搞清楚“this”吗?在某种程度上，几乎所有的 JavaScript 开发人员都曾经思考过“this”这个事情。对我来说，每当“this”出来捣乱的时候，我就会想方设法地去解决掉它，但过后就把它忘了，我想您应该也曾遇到过类似的场景。但是今天，让我们弄明白它，让我们一次性地彻底解决“this”的问题，一劳永逸。


？应使用全角标点中文标点

Moonliujk · 2018-07-27T13:57:02Z

TODO1/lets-settle-this-part-one.md


-Now I am not all about theory, I will right away start with examples that tripped me and I hope they trip you too. Whether you get tripped or not I will provide an explanation and that way, one by one I will introduce you to all the rules and some bonus ones as well.
+在这里我不会通篇只讲理论，我会直接以曾经困扰过我的困难问题为例开始讲起，我希望它们也是你感到困难的问题。但不管这些问题是否会困挠你，我都会给出解释说明，我会一个接一个地向你介绍所有的规则，当然还会有一些额外追加的内容。


额外追加
=>
额外
拙见：两个词语语义有所重复，我觉得可以删去其中一个

Moonliujk · 2018-07-27T13:59:41Z

TODO1/lets-settle-this-part-one.md


 ![](https://i.loli.net/2018/07/23/5b553df9455fa.png)

-Can’t we all relate to this? At some point ‘this’ has been a thing to think about for almost all JavaScript developers. For me, whenever ‘this’ started to rear its ugly head I somehow managed to make things work and then forgot about it, and I’d like think you did the same, at some point. But let’s be done with it, today, once and for all _`*dramatic drumroll*`_ let’s settle ‘this’.
+难道我们就不能彻底搞清楚“this”吗?在某种程度上，几乎所有的 JavaScript 开发人员都曾经思考过“this”这个事情。对我来说，每当“this”出来捣乱的时候，我就会想方设法地去解决掉它，但过后就把它忘了，我想您应该也曾遇到过类似的场景。但是今天，让我们弄明白它，让我们一次性地彻底解决“this”的问题，一劳永逸。


您
=>
你
拙见：后面文章中，“您”和”你“都出现过，我觉得为了文风保持统一，选择其一即可，推荐用“你”

Moonliujk · 2018-07-27T14:10:16Z

TODO1/lets-settle-this-part-one.md


-One thing to understand is that ‘this’ is not bound to a function until the function is invoked, therefore, to find ‘this’ you should pay a close attention to **_how the function is called or invoked and not where_**. All the three function invocations _foo(); bar();_ and _baz();_ are standalone invocations hence ‘this’ for all the three functions is the global object.
+需要理解的是，在调用函数之前，“this”并没有绑定到一个函数，因此，要找到“this”，您应该密切注意该函数是如何调用或调用的，而不是在哪里。所有三个函数调用 _foo();bar();和 baz();_ 都是是独立的调用，因此这三个函数的 “this” 都是 global 对象。


在调用函数之前，“this”并没有绑定到一个函数
=>
在调用函数之前，“this”并没有绑定到这个函数
文中使用‘the’，所以在这里翻译成“这个”，表示特指前面提到的函数，更加恰当

Moonliujk · 2018-07-27T15:10:06Z

TODO1/lets-settle-this-part-one.md


-Anywho, let’s see how you handle this (pun intended).
+不管是谁，让我们看看是怎么处理的（双关语）。


不管是谁
=>
不管采用哪条规则
我觉得这里采用意译的方式更恰当，这里指的应该是：不管采用哪条规则（默认绑定 or 隐式绑定）

Moonliujk · 2018-07-27T15:12:25Z

TODO1/lets-settle-this-part-one.md


-Just like _var a_ in Example #4 became a property of the global object so does _bar._ And since foo is invoked stand-a-lonely(if that’s a word) ‘this’ inside foo is the global object (Default Binding) hence _this.bar_ inside _foo_ and _bar_ are the same exact thing. But the actual question is what gets logged to the console?
+就像示例#4 中的 _var a_ 一样， _bar_ 也是全局对象的属性。因为 foo 被单独调用了，它内部的“this”就是全局对象(默认绑定规则)。因此 _foo_ 内部的 _this.bar_ 就是 _bar_ 。但实际的问题是，控制台中输出什么？


示例#4
=>
示例 #4
这里不知道需不需保留加空格

Moonliujk · 2018-07-27T15:20:43Z

TODO1/lets-settle-this-part-one.md


-The function _foo_ accepts a callback function as parameter. And that’s what we did we put a function between the parans of _foo_ while invoking it.
+函数 _foo_ 接受一个回调函数作为参数。这就是我们所做的我们在调用_foo_的时候在parans之间放置一个函数。


parans 前后加空格空格添加

Moonliujk · 2018-07-27T15:23:01Z

TODO1/lets-settle-this-part-one.md


-The function _foo_ accepts a callback function as parameter. And that’s what we did we put a function between the parans of _foo_ while invoking it.
+函数 _foo_ 接受一个回调函数作为参数。这就是我们所做的我们在调用_foo_的时候在parans之间放置一个函数。


这就是我们所做的我们在调用_foo_的时候在parans之间放置一个函数
=>
我们所做的就是在调用_foo_的时候在 parans 之间放置一个函数
拙见：调整语序使句意更加通顺

Moonliujk · 2018-07-27T15:38:29Z

TODO1/lets-settle-this-part-one.md

 1000 spent in January, undefined  
 2000 spent in February, undefined  
 3000 spent in March, undefined
 ```

-It’s all about the _printExpenses_ function here. First of all notice how it’s invoked. Implicit binding right? yes. So ‘this’ inside _printExpenses_ is the object _yearlyExpense._ Which means _this.expenses_ is the _expenses_ array inside the _yearlyExpense_ object, so no problem here. Now when it comes to ‘this’ inside the callback function passed to forEach it’s of course the global object, refer example #9.
+这都是关于 _printExpenses_ 函数的。首先注意下它是如何被调用的。隐式绑定？是的。所以 _printExpenses_ 中的“this”是对象 _yearlycost_ 。这意味着 _this.expenses_ 是 _yearlyExpense_ 对象中的 _expenses_ 数组，所以这里没有问题。现在，当它在传递给 forEach 的回调函数中出现“this”时，它当然是全局对象，请参考例 #9。


“this”是对象 _yearlycost
=>
“this”指向的是对象 _yearlycost
拙见：为了使表意更加准确

Moonliujk · 2018-07-27T16:01:48Z

@geniusq1981 @leviding 校对完毕

leviding · 2018-07-30T01:44:00Z

@geniusq1981 可以先修改一下了

lance10030 · 2018-07-30T02:55:30Z

@leviding 校对认领

fanyijihua · 2018-07-30T02:55:33Z

@lance10030 妥妥哒 🍻

leviding · 2018-08-02T00:17:22Z

@lance10030 校对好了吗，准备发布了

lance10030 · 2018-08-02T14:20:13Z

TODO1/lets-settle-this-part-one.md

@@ -226,29 +233,29 @@ Array.prototype.myCustomFunc = function() {
 arr.myCustomFunc();
 ```

-If you have no idea what a _.prototype_ is in JavaScript just see it as any other object for now but if you are a JavaScript developer you _should_ know what it is. You know what? Do yourself a favor and go ahead and read a little about what prototypes are. I’ll wait.
+如果你不知道 Javascript 里面的 _.prototype_ 是什么的话，那你就权且把它和其他对象等同看待，但是如果你是一个 JavaScript 开发人员，你应该知道它是什么。你知道吗？帮自己一个忙，去读一些关于原型链相关的书。我在这里等你。


你知道吗?这句是不是稍微斟酌一下这一整句意译更好?仅供译者参考

lance10030 · 2018-08-02T14:39:04Z

TODO1/lets-settle-this-part-one.md

@@ -424,13 +431,13 @@ var bar = obj.foo;
 bar();
 ```

-No need to get distracted by all the fancy code here, to find ‘this’ inside a function simply notice how the function has been invoked. You must have had gotten the hang of this trick by now. First _obj.foo()_ is invoked, since _foo_ is preceded by an object reference, the first thing that gets logged is the object _obj_. _bar_ of course undergoes standalone invocation and therefore global is what gets logged to the console next. Just to remind you, remember in strict mode global object is not eligible for default binding, therefore if you have strict mode on undefined will be logged to the console instead of global.
+不要被这里面的花哨代码所分心，只需注意函数是如何被调用的，就可以弄明白“this”的含义。你现在一定已经掌握这个技巧了吧。首先 _object .foo()_ 被调用，因为 _foo_ 前面有一个对象引用，所以首先输出的是对象 _obj_ 。 _bar_ 当然是被独立调用的，因此下一个输出是全局变量。提醒你一下，记住在严格模式下，全局对象是不会默认绑定的，因此如果你在开启了严格模式，那么控制台输出的就是 undefined，而不再是全局变量。


object .foo() => obj.foo()

lance10030 · 2018-08-03T03:29:43Z

@leviding 校对完成. 之前校对完了就想@了可是最近网络三天两头炸,半天加载不出,有点晚,不好意思哈

leviding

@geniusq1981 @Moonliujk @lance10030 格式还是有些问题，都注意一下哈

leviding · 2018-08-03T16:59:43Z

@geniusq1981 已经 merge 啦~ 快快麻溜发布到掘金然后给我发下链接，方便及时添加积分哟。

掘金翻译计划有自己的知乎专栏，你也可以投稿哈，推荐使用一个好用的插件。
专栏地址：https://zhuanlan.zhihu.com/juejinfanyi

geniusq1981 · 2018-08-06T09:01:31Z

@leviding 已发布：https://juejin.im/post/5b680d8b518825196730a00f

geniusq1981 added 7 commits July 25, 2018 09:00

Update lets-settle-this-part-one.md

4d2f8a2

Update lets-settle-this-part-one.md

1c09992

Update lets-settle-this-part-one.md

ecb5204

Update lets-settle-this-part-one.md

5f4cf53

Update lets-settle-this-part-one.md

4ad5819

Update lets-settle-this-part-one.md

4906130

Update lets-settle-this-part-one.md

97c9bea

fanyijihua added the 校对认领 label Jul 27, 2018

fanyijihua added the 正在校对 label Jul 27, 2018

Moonliujk reviewed Jul 27, 2018

View reviewed changes

leviding changed the title ~~让我们一起解决“this”难题 — 第一部分~~ 让我们一起解决“this”难题 — 第一部分 Jul 28, 2018

leviding added the 前端 label Jul 28, 2018

校对完成

3818598

fanyijihua removed the 校对认领 label Jul 30, 2018

lance10030 reviewed Aug 2, 2018

View reviewed changes

修改完成

9173adc

leviding added the 标注待管理员 Review label Aug 3, 2018

修正格式问题

2e7522a

leviding approved these changes Aug 3, 2018

View reviewed changes

leviding merged commit 0267292 into xitu:master Aug 3, 2018

leviding added the 翻译完成 label Aug 3, 2018

leviding removed 标注待管理员 Review 正在校对 labels Aug 3, 2018

geniusq1981 deleted the let_us_settle_this_part_one.md branch August 7, 2018 05:31

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

让我们一起解决“this”难题 — 第一部分 #4210

让我们一起解决“this”难题 — 第一部分 #4210

geniusq1981 commented Jul 27, 2018 •

edited by leviding

Loading

Moonliujk commented Jul 27, 2018

fanyijihua commented Jul 27, 2018

Moonliujk left a comment

Moonliujk Jul 27, 2018

Moonliujk Jul 27, 2018

Moonliujk Jul 27, 2018

Moonliujk Jul 27, 2018

Moonliujk Jul 27, 2018

Moonliujk Jul 27, 2018

Moonliujk Jul 27, 2018

Moonliujk Jul 27, 2018

Moonliujk Jul 27, 2018

Moonliujk Jul 27, 2018

Moonliujk commented Jul 27, 2018

leviding commented Jul 30, 2018

lance10030 commented Jul 30, 2018

fanyijihua commented Jul 30, 2018

leviding commented Aug 2, 2018

lance10030 Aug 2, 2018

lance10030 Aug 2, 2018

lance10030 commented Aug 3, 2018

leviding left a comment

leviding commented Aug 3, 2018

geniusq1981 commented Aug 6, 2018


		Now I am not all about theory, I will right away start with examples that tripped me and I hope they trip you too. Whether you get tripped or not I will provide an explanation and that way, one by one I will introduce you to all the rules and some bonus ones as well.
		在这里我不会通篇只讲理论，我会直接以曾经困扰过我的困难问题为例开始讲起，我希望它们也是你感到困难的问题。但不管这些问题是否会困挠你，我都会给出解释说明，我会一个接一个地向你介绍所有的规则，当然还会有一些额外追加的内容。


		One thing to understand is that ‘this’ is not bound to a function until the function is invoked, therefore, to find ‘this’ you should pay a close attention to _how the function is called or invoked and not where_. All the three function invocations _foo(); bar();_ and _baz();_ are standalone invocations hence ‘this’ for all the three functions is the global object.
		需要理解的是，在调用函数之前，“this”并没有绑定到一个函数，因此，要找到“this”，您应该密切注意该函数是如何调用或调用的，而不是在哪里。所有三个函数调用 _foo();bar();和 baz();_ 都是是独立的调用，因此这三个函数的 “this” 都是 global 对象。


		Anywho, let’s see how you handle this (pun intended).
		不管是谁，让我们看看是怎么处理的（双关语）。


		Just like _var a_ in Example #4 became a property of the global object so does _bar._ And since foo is invoked stand-a-lonely(if that’s a word) ‘this’ inside foo is the global object (Default Binding) hence _this.bar_ inside _foo_ and _bar_ are the same exact thing. But the actual question is what gets logged to the console?
		就像示例#4 中的 _var a_ 一样， _bar_ 也是全局对象的属性。因为 foo 被单独调用了，它内部的“this”就是全局对象(默认绑定规则)。因此 _foo_ 内部的 _this.bar_ 就是 _bar_ 。但实际的问题是，控制台中输出什么？


		The function _foo_ accepts a callback function as parameter. And that’s what we did we put a function between the parans of _foo_ while invoking it.
		函数 _foo_ 接受一个回调函数作为参数。这就是我们所做的我们在调用_foo_的时候在parans之间放置一个函数。

让我们一起解决“this”难题 — 第一部分 #4210

让我们一起解决“this”难题 — 第一部分 #4210

Conversation

geniusq1981 commented Jul 27, 2018 • edited by leviding Loading

Moonliujk commented Jul 27, 2018

fanyijihua commented Jul 27, 2018

Moonliujk left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Moonliujk commented Jul 27, 2018

leviding commented Jul 30, 2018

lance10030 commented Jul 30, 2018

fanyijihua commented Jul 30, 2018

leviding commented Aug 2, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lance10030 commented Aug 3, 2018

leviding left a comment

Choose a reason for hiding this comment

leviding commented Aug 3, 2018

geniusq1981 commented Aug 6, 2018

geniusq1981 commented Jul 27, 2018 •

edited by leviding

Loading