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

Static variable inheritance in Javascript (ES6)

本文关键字：ES6 继承 变量 静态 Javascript      更新时间：2023-09-26

我试图弄清楚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

↑ 在巴别塔实验模式中

以上是经验语法。然后我看到一篇文章说 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 小提琴

"这个"指的是子类，不是超类，结果是一样的...

此外，我在 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中？

有什么优雅的解决方案吗？

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

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

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

还有另一种提供静态属性的方法，那就是通过闭包。通过将类定义包装在函数中，您可以仅将变量的作用域限定为类，从而有效地创建私有静态变量。

例如

"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

在Animal构造函数中，将this.constructor.count更改为Animal.count。

  • this.constructor.count是指Cat类计数器
  • Animal.count是指Animal计数器

即：

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

重点是每个类都有自己的静态变量，即它不共享。JavaScript不支持传统意义上的类，他们说它的语法糖超过它使用的对象原型模型。您可能会发现此链接很有用： https://github.com/getify/You-Dont-Know-JS/tree/2nd-ed/objects-classes

相关文章：