首先，请记住JavaScript主要是一种原型语言，而不是基于类的语言1。Foo不是一个类，它是一个函数，一个对象。您可以使用new关键字从该函数实例化一个对象，这将允许您创建类似于标准OOP语言中的类的东西。

我建议大多数时候忽略__proto__，因为它的跨浏览器支持很差，而是专注于学习prototype是如何工作的。

如果你有一个从函数2创建的对象实例，并且你以任何方式访问它的一个成员(方法、属性、属性、常量等)，访问将沿着原型层次结构向下流动，直到它(a)找到成员，或者(b)没有找到另一个原型。

层次结构从被调用的对象开始，然后搜索它的原型对象。如果原型对象有原型，则重复执行，如果不存在原型，则返回undefined。

例如:

foo = {bar: 'baz'};
console.log(foo.bar); // logs "baz"

foo = {};
console.log(foo.bar); // logs undefined

function Foo(){}
Foo.prototype = {bar: 'baz'};
f = new Foo();
console.log(f.bar);
// logs "baz" because the object f doesn't have an attribute "bar"
// so it checks the prototype
f.bar = 'buzz';
console.log( f.bar ); // logs "buzz" because f has an attribute "bar" set

---

在我看来，你至少已经在某种程度上理解了这些“基本”部分，但我需要明确地说明它们。

在JavaScript中，所有东西都是object3。

一切都是一个对象。

function Foo(){}不仅定义了一个新函数，它还定义了一个可以使用Foo访问的新函数对象。

这就是为什么你可以用Foo.prototype访问Foo的原型。

你还可以在Foo上设置更多的函数:

Foo.talk = function () {
  alert('hello world!');
};

这个新函数可以通过以下命令访问:

Foo.talk();

我希望现在您已经注意到函数对象上的函数与静态方法之间的相似性。

假设f = new Foo();Foo.prototype.bar = function(){…}作为定义类的共享方法，而Foo。Baz = function(){…}作为定义类的公共静态方法。

---

ECMAScript 2015为这些类型的声明引入了各种语法糖，使它们更容易实现，同时也更容易阅读。因此，前面的例子可以写成:

class Foo {
  bar() {...}

  static baz() {...}
}

这允许bar被调用为:

const f = new Foo()
f.bar()

baz被称为:

Foo.baz()

---

1: class在ECMAScript 5规范中是一个“未来保留字”，但ES6引入了使用class关键字定义类的能力。

2:本质上是一个由构造函数创建的类实例，但有许多微妙的区别，我不想误导你

3:基本值——包括未定义、null、布尔值、数字和字符串——在技术上不是对象，因为它们是低级语言实现。布尔值、数字和字符串仍然与原型链交互，就像它们是对象一样，因此为了回答这个问题，更容易将它们视为“对象”，尽管它们不完全是。

当我面对这样的情况时，我是这样做的:

Logger = {
    info: function (message, tag) {
        var fullMessage = '';        
        fullMessage = this._getFormatedMessage(message, tag);
        if (loggerEnabled) {
            console.log(fullMessage);
        }
    },
    warning: function (message, tag) {
        var fullMessage = '';
        fullMessage = this._getFormatedMessage(message, tag);
        if (loggerEnabled) {
            console.warn(fullMessage);`enter code here`
        }
    },
    _getFormatedMessage: function () {}
};

现在我可以调用info方法as Logger.info(“我的Msg”，“标签”);

首先，请记住JavaScript主要是一种原型语言，而不是基于类的语言1。Foo不是一个类，它是一个函数，一个对象。您可以使用new关键字从该函数实例化一个对象，这将允许您创建类似于标准OOP语言中的类的东西。

我建议大多数时候忽略__proto__，因为它的跨浏览器支持很差，而是专注于学习prototype是如何工作的。

如果你有一个从函数2创建的对象实例，并且你以任何方式访问它的一个成员(方法、属性、属性、常量等)，访问将沿着原型层次结构向下流动，直到它(a)找到成员，或者(b)没有找到另一个原型。

层次结构从被调用的对象开始，然后搜索它的原型对象。如果原型对象有原型，则重复执行，如果不存在原型，则返回undefined。

例如:

foo = {bar: 'baz'};
console.log(foo.bar); // logs "baz"

foo = {};
console.log(foo.bar); // logs undefined

function Foo(){}
Foo.prototype = {bar: 'baz'};
f = new Foo();
console.log(f.bar);
// logs "baz" because the object f doesn't have an attribute "bar"
// so it checks the prototype
f.bar = 'buzz';
console.log( f.bar ); // logs "buzz" because f has an attribute "bar" set

---

在我看来，你至少已经在某种程度上理解了这些“基本”部分，但我需要明确地说明它们。

在JavaScript中，所有东西都是object3。

一切都是一个对象。

function Foo(){}不仅定义了一个新函数，它还定义了一个可以使用Foo访问的新函数对象。

这就是为什么你可以用Foo.prototype访问Foo的原型。

你还可以在Foo上设置更多的函数:

Foo.talk = function () {
  alert('hello world!');
};

这个新函数可以通过以下命令访问:

Foo.talk();

我希望现在您已经注意到函数对象上的函数与静态方法之间的相似性。

假设f = new Foo();Foo.prototype.bar = function(){…}作为定义类的共享方法，而Foo。Baz = function(){…}作为定义类的公共静态方法。

---

ECMAScript 2015为这些类型的声明引入了各种语法糖，使它们更容易实现，同时也更容易阅读。因此，前面的例子可以写成:

class Foo {
  bar() {...}

  static baz() {...}
}

这允许bar被调用为:

const f = new Foo()
f.bar()

baz被称为:

Foo.baz()

---

1: class在ECMAScript 5规范中是一个“未来保留字”，但ES6引入了使用class关键字定义类的能力。

2:本质上是一个由构造函数创建的类实例，但有许多微妙的区别，我不想误导你

3:基本值——包括未定义、null、布尔值、数字和字符串——在技术上不是对象，因为它们是低级语言实现。布尔值、数字和字符串仍然与原型链交互，就像它们是对象一样，因此为了回答这个问题，更容易将它们视为“对象”，尽管它们不完全是。

下面是一个很好的例子来演示Javascript如何处理静态/实例变量和方法。

function Animal(name) {
    Animal.count = Animal.count+1||1;// static variables, use function name "Animal"
    this.name = name; //instance variable, using "this"
}

Animal.showCount = function () {//static method
    alert(Animal.count)
}

Animal.prototype.showName=function(){//instance method
    alert(this.name);
}

var mouse = new Animal("Mickey");
var elephant = new Animal("Haddoop");

Animal.showCount();  // static method, count=2
mouse.showName();//instance method, alert "Mickey"
mouse.showCount();//Error!! mouse.showCount is not a function, which is different from  Java

只是额外的注释。使用类ES6，当我们创建静态方法时，javacscript引擎设置的描述符属性与老式的“静态”方法略有不同

function Car() {

}

Car.brand = function() {
  console.log('Honda');
}

console.log(
  Object.getOwnPropertyDescriptors(Car)
);

它将brand()的内部属性(描述符属性)设置为

..
brand: [object Object] {
    configurable: true,
    enumerable: true,
    value: ..
    writable: true

}
..

相比

class Car2 {
   static brand() {
     console.log('Honda');
   }
}

console.log(
  Object.getOwnPropertyDescriptors(Car2)
);

将brand()的内部属性设置为

..
brand: [object Object] {
    configurable: true,
    enumerable: false,
    value:..
    writable: true
  }

..

在ES6中static method的enumerable设置为false。

这意味着你不能使用for-in循环来检查对象

for (let prop in Car) {
  console.log(prop); // brand
}

for (let prop in Car2) {
  console.log(prop); // nothing here
}

静态方法在ES6中被视为其他类的私有属性(名称，长度，构造函数)，除了静态方法仍然是可写的，因此描述符writable被设置为true {writable: true}。这也意味着我们可以推翻它

Car2.brand = function() {
   console.log('Toyota');
};

console.log(
  Car2.brand() // is now changed to toyota
);

另外，现在可以用类和静态来做

'use strict'

class Foo {
 static talk() {
     console.log('talk')
 };

 speak() {
     console.log('speak')
 };

};

将会给

var a = new Foo();
Foo.talk();  // 'talk'
a.talk();    // err 'is not a function'
a.speak();   // 'speak'
Foo.speak(); // err 'is not a function'