解压缩JavaScript类

让我们开始追逐。那么，类在JavaScript中是什么意思？

要理解类，我们必须从Object构造函数开始更深入的研究

Object构造函数是所有JavaScript对象的根。您可以使用Object构造函数创建任何类型的对象。让我在这里给您介绍这个故事的第一个破坏者。

“需要特别注意的是，JavaScript中的所有对象都是对象的实例。 将JavaScript中的任何对象都视为通过调用Object构造函数创建的实例”

// Object('k1':'v1', 'k2':'v2')
console.log(new Object({'k1':'v1', 'k2':'v2'}))

// Array[1 ,2, 3]
console.log(new Object([1, 2, 3])

因此，现在我们清楚了Object构造函数的用途，让我们看一下Object构造函数的属性。

// Print Object's properties
console.dir(Object)

除了一长串的属性外，我们还看到一个称为“原型”的属性。现在，这为我们解构JavaScript中的类提供了一个起点。

那么，这个“ 原型 ”属性是什么？除其他常规属性外，它还具有“构造函数”属性。

要了解其重要性，让我们编写一个函数并研究其属性。请记住，函数也是JavaScript对象，它从Object构造函数继承属性。

// foo function
function foo() {}
console.dir(foo)

如我们所料，函数foo（）具有原型属性。这是我的第二个扰流板

“原型属性是独一无二的。 它从 “ 对象” 传递 到所有JS对象，我们称之为原型链。

现在，这意味着什么。为了理解这一点，让我们了解在类不属于JS之前如何设法模仿类。我们做了所谓的构造函数，即通过在关键字“ new”之前添加前缀来创建该特定类型的对象。

// constructor function
function foo(a) {
  this.a = a
}

// Add class method
foo.prototype.print = function() { console.log(this.a)}

var foo1 = new foo("hello")
foo1.print() // hello

var foo2 = new foo("world")
foo2.print() // world

我们刚刚做了什么？我们通过将新方法'print（）'直接附加到函数的prototype属性中来添加类方法。但是，我们如何直接在实例foo1和foo2上调用'print（）'？魔法！

当我们调用以“ new”为前缀的函数时，JS通过将函数的prototype属性复制到实例的__proto__属性上来拉动戏剧性的抢劫。 __proto__属性是什么？向上滚动并查看所有图像。它也是JS中所有对象的属性，这将我们带到了第三个破坏者，

“ __proto__ 是在查找链用来解决方法，实际的对象等 prototype 是用于构建对象 __proto__ 当你创建一个对象与 new ”

这就解释了为什么__proto__一直保持沉默。现在，当我们使用“ new”调用函数时，就会发生这种情况。

var foo1 = new foo("hello")
console.dir(foo)
console.dir(foo1)
foo1.print() // hello

好了！现在，实例foo1的__proto__具有print（）函数foo1.print（），我们可以在执行该操作时对其进行解析，它的工作原理就像一个超级按钮。

但是，WTH是课程吗？

好的，我们有一个诚实的console.dir（） ，它告诉真相，只有真相。让我们来看一个例子。

// constructor function 'foo' with a method, print
function foo(a) {
  this.a = a
}
// Add class method
foo.prototype.print = function() { console.log(this.a) }

// class 'bar' with a class method, print
class bar {
 constructor(a) {
  this.a = a
 }
 print() {
  console.log(this.a)
 }
}

console.dir(foo)
console.dir(bar)

最终的破坏者：

“ foo和bar相同！”

“ JavaScript类是JavaScript构造函数的语法糖，它是利用JavaScript的原型属性和原型链对传统类进行的伪实现”

最后说明：我相信，为了理解JavaScript中的任何概念，重要的是理解该语言的构造块以及以特定方式实现功能的方式和原因。这不仅使您对主题有具体的了解，而且还可以帮助您将这些概念应用于解决特定问题。

如果您喜欢阅读我的故事，如果能给我买杯咖啡，我将不胜感激:)

另外，别忘了点击拍手按钮来鼓掌。它可以帮助其他人发现这个故事，可能对他们有帮助。谢谢！

From: https://hackernoon.com/unpacking-javascript-classes-81d32804c978