Question

我正在试图弄清楚Javascript如何完全支持OOP。幸运的是，我可以通过Babel找到一些线索，并知道它如何与ES5向下兼容。

但我发现静态变量行为在继承中很奇怪。

例如，我想记住超类中的全局属性。但似乎从子类访问的静态变量实际上并不是指超类。这在古典OOP中是否合理？

class Animal {
  constructor(){
    this.constructor.count += 1;
    console.log('An animal was born');
  }

  static count = 0;
  static sum = function(){
    console.log('There are', this.count, 'animals');
  }

}

class Cat extends Animal{
  constructor(){
    super(); // throws exception when not called
    console.log('  -- the animal is a cat');
  }
}

var cat1 = new Cat();
var cat2 = new Cat();

Cat.sum();    // should be 2
Animal.sum(); // should be 2, but result is 0

↑in Babel Experimental Mode

在上面是实验语法。然后我看到一篇文章说ES6中不支持静态属性。所以我按照他的例子重写为静态方法（getter / setter），样式，但仍然不知道......

class Animal {
  constructor(){
    this.constructor.countOne();
    console.log('An animal was born');
  }

  static countOne(){
    this.count = (this.count||0)+1;
  }

  static sum(){
    console.log('There are', this.count, 'animals');
  }
}

Animal.count = 0; // Remove this, Animal.sum() will be undefined

class Cat extends Animal{
  constructor(){
    super();
    console.log('  -- the animal is a cat');
  }
}


var cat1 = new Cat();
var cat2 = new Cat();

Cat.sum();    // should be 2
Animal.sum(); // should be 2, but result is 0

↑ES6 Fiddle

“this”指的是子类，而不是超类，结果是相同的......

此外，我在PHP中尝试相同的代码，然后我得到了预期的结果：

class Animal{
  static $count = 0;
  static function sum(){
    echo "There are " . self::$count . " animals <br>";
  }

  public function __construct(){
    self::$count++;
    echo "An animal was born <br>";
  }
}

class Cat extends Animal{
  public function __construct(){
    parent::__construct();
    echo " - the animal is a cat <br>";
  }
}

$cat = new Cat();
$cat = new Cat();
$cat = new Cat();

Cat::sum();     // is 3
Animal::sum();  // is 3

到目前为止，我们是否应该说Javascript不支持静态变量继承？甚至在ECMA6？

有没有优雅的解决方案？

Answer 1

您可以访问静态成员，例如：

Animal.count;
Animal.countOne();
Animal.sum();

在第二个示例中，当您创建新cat时，this引用新的cat对象，this.constructor引用Cat函数（即使它是从超级构造函数调用的）。

Answer 2

有一种提供静态属性的替代方法，即通过闭包。通过将类定义包装在函数中，您可以将变量仅限定在类中，从而有效地创建私有静态变量。

例如

"use strict";
var log =function(d){console.log(d)}; // lazy zoo keeper

// need to define the intermediate container
// Ill call it zoo.
var zoo = (function() {
    // now create the private static property
    var count=0;  // function scoped
    class Animal {
        constructor(){
            count += 1; // count instances
            log('An animal was born');
        } 
        static sum(){  // create the static method of interagation
            log('There are'+count+'animals');
        }

     }

     class Cat extends Animal{
         whatAreYou(){log("I am a cat ")};
     }
     // now return the classes you want to expose 
     return {
         Animal:Animal,
         Cat:Cat,             
     };
})();  // call the function to create a  Zoo

// now you can make the the Animal and Cat public or you could 
// keep zoo and pass it to another scope and have them private 
// where you want.

var Animal = zoo.Animal;
var Cat = zoo.Cat;

// Use static function befor there are any instances of Animal or Cat
Animal.sum(); // displays 0    

var a = new Animal(); // or new zoo.Animal();
var c = new Cat();

// access static function sum to display content of private and static (closure) property count;
Cat.sum();    // 2
Animal.sum(); // 2

Javascript中的静态变量继承（ES6）

2 个答案: