专注:让你不再分心 pdf

In part 1 of this article series, I went into great detail (aka, wordiness) about the differences between what the traditional definition of "inheritance" means and how JS's [[Prototype]] mechanism works. We saw that JS operates oppositely to "inheritance", being better labeled as "behavior delegation". If you haven't read it and you have any twinges of doubt or confusion about that statement, I'd encourage you to go read part 1 first.

在本系列文章的第1部分中，我详细介绍了“继承”的传统含义与JS的[[Prototype]]机制的工作方式之间的区别(又称“单字”)。 我们看到JS的运作与“继承”相反，被更好地标记为“行为委托”。 如果您还没有阅读它，并且对该声明有任何疑问或困惑，我建议您先阅读第1部分。

Inheritance implies, to an extent, copying of behavioral definition down the chain, whereas behavior delegation implies delegating behavior up the chain. These aren't just word semantics, but an important distinction that, when examined, can de-mystify a lot of confusing stuff around JS objects.

继承在一定程度上暗示了行为定义在链下的复制，而行为委托意味着在行为上链的下放。 这些不仅是词的语义，而且是一个重要的区别，当加以检查时，它可以使JS对象周围的许多令人困惑的事物变得神秘。

I'm by far not the first dev to realize this truth about JS. What differs here is in my reaction to that realization. The response usually is layering on other concepts to smoothe out the rough edges or unexpected consequences of how "prototypal inheritance" can surprise us, to try to make JS feel more like classical OO.

到目前为止，我还不是第一个意识到JS真相的开发人员。 这里的不同之处在于我对这一认识的React。 该React通常是分层的其他概念smoothe出粗糙的边缘或如何“原型继承”能带给我们惊喜意想不到的后果，要尽量让JS 感觉更像经典OO。

I think those attempts just distract us from the plain truth of how JS works.

我认为这些尝试只会分散我们对JS工作原理的认识。

I would rather identify the things which are merely distractions, and set them aside, and embrace only the true essence of how JS's [[Prototype]] works. Rather than trying to make JS more "inheritance friendly", I'd rather rip out everything that confuses me (and others) into thinking JS has "inheritance" at all.

我宁愿识别那些只会使人分心的事物，将它们放在一边，并且只包含JS [[Prototype]]工作原理。 与其尝试使JS更“继承”，不如将所有使我(和其他人)迷惑的东西都视为JS完全具有“继承”。

种类 (Types)

It's often cited that in JavaScript, if you declare a function and add things to that function's prototype, then that alone makes a definition of a custom "type", which can be instantiated. If we were in a traditional OO language, that sort of thinking might be more appropriate, but here in JS land, it's just one of many distractions.

人们经常提到在JavaScript中，如果您声明一个函数并将其添加到该函数的原型中，那么仅此一个就可以定义一个可实例化的自定义“类型”。 如果我们使用的是传统的面向对象语言，那么这种想法可能更合适，但是在JS领域，这只是众多干扰因素之一。

You're not really creating a new type in any real sense of that word. It's not a new type that will be revealed by thetypeof operator, and it's not going to affect the internal [[Class]] characteristic of a value (what would be reported by default via Object#toString()). It is true that you can do some self-reflection to check if an object is an "instance of" some function's construction (via the instanceof operator). But importantly,foo1 instanceof Foo is just following the internal [[Prototype]] chain of your object foo1 to see if at any level of that chain it happens to find the .prototype object attached to the Foo function.

您实际上并没有真正从该词的意义上创建新类型。 它不是typeof运算符将显示的新类型，并且不会影响值的内部[[Class]]特性(默认情况下会通过Object#toString()进行报告)。 确实，您可以做一些自我反思，以检查对象是否是某个函数构造的“实例”(通过instanceof运算符 )。 但是重要的是， foo1 instanceof Foo仅跟随对象foo1的内部[[Prototype]]链，以查看在该链的任何级别上是否恰巧都找到了附加到Foo函数的.prototype对象。

In other words, the reflection you're doing is not about checking if the value is a specified type at all, nor is it about the function constructor. It's only about asking if one object is in another object's [[Prototype]] chain. The name and semantics of the instanceof operator (referring to "instances" and "constructor functions") are layering on extra and unnecessary meaning, which only confuses you into thinking there's anything more than simple [[Prototype]] chain checking going on.

换句话说，您所做的反映与检查值是否根本不是指定类型无关，也不与函数构造函数有关。 这仅是询问一个对象是否在另一个对象的[[Prototype]]链中。 instanceof运算符的名称和语义 (指“实例”和“构造函数”)位于多余和不必要的意义上，这仅使您认为除了简单的[[Prototype]]链检查之外，还有其他问题。

Some developers frown on the usage of instanceof, and so an alternate form of determining the "type" of some object is called duck typing, which is basically inferring a value's "type" by inspecting the object for one or more charateristic features, like a specific method or property.

一些开发人员不赞成使用instanceof ，因此，确定某种对象的“类型”的另一种形式称为“ 鸭子类型” ，它基本上是通过检查对象的一个​​或多个特征来推断值的“类型”，例如具体方法或属性。

Either way, these aren't really "types", they're just approximations of types, which is one part of what makes JS's object mechanism more complicated than other languages.

无论哪种方式，这些并不是真正的“类型”，它们只是类型的近似，这是使JS的对象机制比其他语言更复杂的原因之一。

混合蛋白 (Mixins)

Another distraction is trying to mimic the automatic "copying" of inheritance by using the "mixin" pattern, which essentially manually iterates through all the methods/properties on an object and makes a "copy" (techically just a reference for functions and objects) onto the target object.

另一个分散注意力的尝试是通过使用“ mixin”模式来模仿继承的自动“复制”， 该模式本质上是手动遍历对象上的所有方法/属性并进行“复制”(从技术上讲，只是功能和对象的引用)到目标对象上。

I'm not saying that mixins are bad -- they're a very useful pattern. However, mixins have nothing to do with the[[Prototype]] chain or inheritance or delegation or any of that -- they rely entirely on implicit assignment ofthis by having an "owning object" at the call-time of a function/method. They are, in fact, completely circumventing the [[Prototype]] chain.

我并不是说mixin不好-它们是非常有用的模式。 但是， mixins与[[Prototype]]链 ，继承或委托无关 ， 也没有任何关系-它们在函数/方法的调用时通过拥有“拥有对象”而完全依赖this对象的隐式分配。 实际上，它们完全绕过了[[Prototype]]链。

Take any two independent objects, call them A and B (they don't have to be linked via [[Prototype]] at all), and you can still mixin A's stuff into B. If that style of code works for your situation, use it! But just note that it has nothing to do with [[Prototype]] or inheritance. Trying to think of them as related is just a distraction.

拿任意两个独立的对象，将它们称为A和B (它们根本不需要通过[[Prototype]]链接)，您仍然可以A的内容混入B 。 如果该代码风格适合您的情况，请使用它！ 但是请注意，它与[[Prototype]]或继承无关。 试图将它们视为相关的只是一种干扰 。

Another related distraction is when the inevitable desire to create "multiple inheritance" comes up, because JavaScript only allows an object to be [[Prototype]] linked to one other object at a time. When we read about the lack of multiple inheritance in JavaScript, several problems come up, and various "solutions" are often proposed, but we never actually solve them, we just do more fancy hand-waiving to distract us from the difficulties that JS poses at the syntax/semantic level.

另一个相关的分心是，当不可避免的愿望，打造“多重继承”来了，因为JavaScript和只允许被一个对象[[Prototype]]链接到一个其他对象在同一时间。 当我们了解到JavaScript中缺少多重继承时 ，会出现一些问题，并且经常提出各种“解决方案”，但是我们从来没有真正解决它们，我们只是花了很多力气，以分散我们对JS带来的困难的注意力。在语法/语义级别。

For example, you basically end up doing some form of "mixin" to get multiple different sets of properties/methods added into your object, but these techniques don't, without elaborate and inefficient work-arounds, gracefully handle collision if two of your "ancestor" objects have the same property or method name. Only one version of the property/method is going to end up on your object, and that's usually going to be the last one you mixed-in. There's not really a clean way to have your object reference the different versions simultaneously.

例如，您基本上最终做了某种形式的“混合”以将多个不同的属性/方法集添加到对象中，但是，如果没有两个复杂而又无效率的解决方法，这些技术就无法优雅地处理冲突(如果您的两个“祖先”对象具有相同的属性或方法名称。 只有一种版本的属性/方法将最终出现在您的对象上，并且通常是您混入的最后一个版本。 确实没有一种让对象同时引用不同版本的干净方法。

Some people choose another distraction to resolve these problems, by using the "composition" pattern. Basically, instead of wiring your object C to both A and B, you just maintain a separate instance of each of A andB inside your C object's properties/members. Again, this is not a bad pattern, it has plenty of goodness to it.

有些人通过使用“组合”模式来选择另一种分散注意力的方法来解决这些问题。 基本上，您无需在C对象的属性/成员内部维护A和B的每个实例，而无需将对象C既连接到A又连接到B 同样，这不是一个坏模式，它具有很多优点。

Parasitic Inheritance is another example of a pattern that works around this "problem" that [[Prototype]] doesn't work like classes by simply avoiding [[Prototype]] altogether. It's a fine pattern, but I think it's a confusing distraction because it makes you feel like you're doing OO when you're not.

寄生继承是解决此“问题”的另一种模式，通过完全避免[[Prototype]] ， [[Prototype]]不能像类那样工作。 这是一个很好的模式，但是我认为这是一个令人困惑的分心，因为它会使您感到自己在做OO，而不是在做OO。

Whatever technique you use here, you basically end up ignoring the [[Prototype]] chain, and doing things manually, which means you've moved away from JavaScript's "prototypal inheritance" mechanism altogether.

无论您在这里使用什么技术，基本上都将忽略[[Prototype]]链，而是手动进行操作，这意味着您完全摆脱了JavaScript的“原型继承”机制。

多态性 (Polymorphism)

One particular distraction that ends up creating some of the most awkward code patterns we deal with in JS is polymorphism, which is the practice of having the same method or property name at different levels of your "inheritance chain", and then using super-style relative references to access ancestor versions of the same.

导致创建一些我们在JS中处理的最尴尬的代码模式的一种特殊干扰是多态，即在“继承链”的不同级别上具有相同的方法或属性名称，然后使用super样式的做法。相同的访问祖先版本的相对引用。

The problem is mechanical: JavaScript provides a this property, but importantly it is always rooted at the bottom of the [[Prototype]] chain, not whatever level of the chain the current function was found at. While it's true that this.foobar() might end up resolving (finding) foobar() at an ancestor level of the chain, inside that call, his this will still be the original rooted this object.

问题是机械的：JavaScript提供了this属性，但重要的是它始终植根于[[Prototype]]链的底部，而不是当前函数所在链的任何级别。 的确， this.foobar()可能最终会在链的祖先级别解析(发现) foobar() ，但在该调用内，他的this仍将是this对象的原始根源。

Put more simply, this is not relative, but absolute to the beginning of the call stack. If JS had a super or acurrentThis (as I proposed recently), then those references would be relative to whatever the currently resolved link in the [[Prototype]] chain was, which would allow you to make a relative reference to a link "above". But, JS does not currently have any such mechanism. And this being absolute rooted makes it an ineffective (or inefficient at best, thus impractical) solution to these relative references that polymorphism requires.

简而言之， this与调用堆栈的开始不是相对的，而是绝对的。 如果JS有一个super或者currentThis (因为我提出的最近 )，则这些引用是相对于无论在当前解析链接的[[Prototype]]链是，这将让你做出一个相对引用链接“以上”。 但是，JS目前没有任何这种机制。 和this被绝对植根它的无效(或品牌低效充其量 ，因而不切实际)溶液于这些相对引用该多态性需要。

Most of the OO helper libraries try to provide a way for you to make super calls, but all of them end up having to do inefficient things under the covers to make that kind of relative call work.

大多数OO帮助程序库都试图为您提供一种进行super调用的方法，但是它们最终都不得不做一些低效率的事情才能使这种相对调用工作。

类{..} (class { .. })

Lastly, I think the long and hotly debated topic of class { .. } syntax that is coming to the language in ES6 represents more of the attempt to cover up what JS actually does with what people wished JS did. These sorts of distractions are not likely to make understanding JS's actual mechanisms better. Some speculate that it will make JS more approachable from traditional OO devotees, which may be true at first, but I suspect the ultimate result is that they'll quickly become frustrated about how it doesn't work as they'd expect.

最后，我认为ES6语言中出现的class { .. }语法的话题是一个经过长时间讨论的热门话题，它更多地试图掩盖JS实际所做的事情与人们希望JS所做的事情 。 这些干扰可能无法使人们更好地理解JS的实际机制。 有人推测这将使JS与传统的OO奉献者更容易相处 ，一开始可能是正确的，但我怀疑最终结果是他们会很快对JS不能正常工作感到沮丧。

What's important to understand is that the new class syntax we're getting is not introducing radically new behavior or a more classical version of inheritance. It's wrapping up how JS [[Prototype]] delegation currently works, in a syntax and semantics which come pre-loaded with lots of baggage understanding and expectation, which run quite contradictory to what you'll really get with JS classes. If you currently do not understand, or don't like, JS object "inheritance", the class {..} syntax is pretty unlikely to satisfy you.

重要的是要理解，我们得到的新类语法不会引入根本的新行为或继承的经典版本。 它以预载了许多语法和语义的语法和语义概括了JS [[Prototype]]委派目前的工作方式 行李 理解和期望，这与您通过JS类获得的东西完全矛盾 。 如果您当前不了解或不喜欢JS对象“继承”，则class {..}语法不太可能满足您的要求。

Yes, the syntax takes away some of the boilerplate of explicitly adding items to a "constructor" function's.prototype object, and goodness knows we all will love not having to type the function keyword as many times. Hooray! If you already fully understand the awkward parts of JS "classes", and you can't wait forclass {..} to sugar up the syntax, I'm sure you're happy, but I also think you're probably in the minority. It's made far too many compromises to even make it into the language to fully please a broad range of totally opposite opinions.

是的，该语法消除了将项目显式添加到“构造函数”函数的.prototype对象的一些样板，天哪，我们都知道不必多次键入function关键字。 万岁！ 如果您已经完全理解了JS“类”的尴尬部分，并且您迫不及待要等待class {..}语法，那么我肯定您很满意，但我也认为您可能会少数。 它做出了太多折衷，甚至使其成为语言，也无法完全取悦各种完全相反的意见。

The underlying [[Prototype]] system isn't changing, and almost none of the difficulties we just outlined are getting measurably any better. The only exception is the addition of the super keyword. That will be a welcome change I suppose.

底层的[[Prototype]]系统没有改变，而且我们刚才概述的所有困难几乎都没有任何改善。 唯一的例外是添加了super关键字。 我想这将是一个可喜的变化。

Although, as a side note, the engine won't actually bind super dynamically (at call time) to the appropriate link in the [[Prototype]] chain, but will instead bind it statically (at definition time) based on the owning object of a function reference. This is going to possibly create some weird WTF's because the engine is going to have to create new function references on the fly as functions that use super are assigned around to different owning objects. It's possible (unconfirmed suspicion) that it may not work in all cases as you'd expect if super were instead bound dynamically.

尽管，作为旁注，引擎实际上并不会(在调用时) super动态绑定到[[Prototype]]链中的适当链接，而是会根据拥有的对象(在定义时)静态地将其静态绑定。功能参考。 这将可能创建一些奇怪的WTF，因为随着使用super函数被分配给不同的拥有对象，引擎将不得不即时创建新的函数引用。 很有可能(未经证实的怀疑)它可能无法在所有情况下都起作用，就像您所期望的那样，如果super绑定是动态绑定的。

简化™ (Simplificationizing™)

We've just examined a variety of ways that many JS devs try to layer on extra abstractions and concepts on top of JS's core object mechanism. I argue that this is a mistake that takes us further from the beauty of core JavaScript. Rather than adding complexity to smoothe out the rough edges, I think we need to strip things out to get to the good stuff.

我们刚刚研究了许多JS开发人员试图在JS核心对象机制之上的额外抽象和概念上使用的各种方法。 我认为这是一个错误，将我们带离了核心JavaScript之美。 我认为与其增加复杂性以消除粗糙的边缘，不如我们需要精打细算才能得到好的东西。

In part 3, I will address exactly that, taking JS from the more complex world of classes and inheritance back to the simpler world of objects and delegation links.

在第3部分中 ，我将确切地解决这个问题，将JS从更复杂的类和继承世界带回到更简单的对象和委托链接世界。

翻译自: https://davidwalsh.name/javascript-objects-distractions

专注:让你不再分心 pdf