es6 のクラスの静的メンバーとは何ですか

es6 では、クラスから直接呼び出されるプロパティやメソッドを静的メンバーと呼びます。クラス内の変数または関数に static キーワードを追加すると、それは静的メンバーとなり、新しいオブジェクトの要素としてインスタンス化されません。静的メンバーとインスタンス メンバーの違い: 1. インスタンス メンバーは特定のオブジェクトに属しますが、静的メンバーはすべてのオブジェクトによって共有されます; 2. 静的メンバーはクラス名またはコンストラクターを通じてアクセスされ、インスタンス メンバーはインスタンス化されたオブジェクトを通じてアクセスされます。

このチュートリアルの動作環境: Windows 7 システム、ECMAScript バージョン 6、Dell G3 コンピューター。

オブジェクト指向

オブジェクト指向の主な考え方は、解決する必要がある問題をオブジェクトに分解することです。オブジェクトはステップを実装するものではなく、問題を解決する際の各オブジェクトの 動作を記述するものです。オブジェクト指向の中核は オブジェクトです。

オブジェクト指向の利点:

• より深いモジュール性と強力なカプセル化
• 複雑なビジネス ロジックの実装が容易
• 保守、再利用、拡張が容易になりました

##オブジェクト指向の機能:

カプセル化: オブジェクトは属性であり、動作の組み合わせです

• ポリモーフィズム: 同じメッセージが異なるオブジェクトによって受信されると、異なる効果が生じます。
• 継承: サブクラスは親クラスの情報を継承できます

ES6 オブジェクト-指向文法

ES6: ES は ECMAScript の略称で、JavaScript の構文仕様です。 ES6 は ES5 を拡張し、オブジェクト指向プログラミング関連テクノロジとクラスの概念を追加します。

クラスとオブジェクト

クラス

: 同じプロパティと動作を持つコレクションはクラスと呼ばれます (クラスはオブジェクトの抽象化です) )、クラス内 ほとんどのデータは、このクラスのメソッドを使用してのみ処理できます。 オブジェクト
: クラスのインスタンスです (クラスを具体化したものです) #クラスキーワード

: クラスを定義するために使用されます

class 类名{// "类名"是一个用户标识符 通常建议首字母大写
           属性;
           函数;
}

Constructor

ES6 でコンストラクターを定義するには、constructor() を使用します。その機能は、オブジェクトのプロパティ (メンバー変数) を初期化することです。コンストラクターは必要ありません。ユーザーがコンストラクターを定義しない場合、システムはデフォルトの引数のないコンストラクターを生成します。

#通常のメンバー関数

函数名([参数]){
     函数体语句
}

变量名 = function([参数]){
      函数体语句
}

            class Person{
                constructor(name,age,sex){// 构造函数 初始化对象的成员
                    this.name = name;// this指向构造函数新创建的对象
                    this.age = age;
                    this.sex = sex;
                }
                    tt = function(){ //普通的成员函数
	                    console.log(this.name);
	                    console.log(this.age);
	                    console.log(this.sex);
                	}	
            }
            var p = new Person('李相赫',25,'男')// p1是一个对象 通过调用构造函数对p1的三个属性进行了初始化
            p.fun();

        class Circle{// 定义类Circlie
            constructor(r){
                this.radius = r;
            };
            area(){ // 计算圆的面积
                var s = Math.PI*this.radius**2;
                return s;
            };
            // 计算圆的周长
            CircleLength = function(){
            return 2*Math.PI*this.radius;
            };
        };
        var c1 = new Circle(5);
        console.log('半径为5的圆的面积='+c1.area());
        console.log('半径为5的圆的周长='+c1.Circle_length());

結果は次のとおりです:

#

		// 用类实现简单的四则运算
        class Number{// 定义类Number
            constructor(n1,n2){
                this.n1=n1;
                this.n2=n2;
            };
            add(){
                var sum = this.n1+this.n2;
                return sum;
            };
            sub(){
                var sum1 = this.n1-this.n2;
                return sum1;
            };
            mut(){
                var sum2 = this.n1*this.n2;
                return sum2;
            };
            p(){
                if(this.n2!=0){
                    var sum3 = this.n1/this.n2;
                    return sum3;
                }
            }
        }
        var p1 = new Number(12,21);
        console.log(p1.add());
        console.log(p1.sub());
        console.log(p1.mut());
        console.log(p1.p());

In ES6 クラスの継承

JavaScript では、継承は 2 つのクラス間の関係を表現するために使用されます。サブクラスは親クラスの一部の属性とメソッドを継承できます。継承後は、独自の一意のプロパティとメソッドを追加することもできます。

構文:

class 子类名 extends 父类名{
       函数体语句;
};

継承に関する注意:

親クラスが定義されている必要があります

サブクラスは派生クラスとも呼ばれます。親クラスのプロパティと関数を継承できます。

• サブクラスは親クラスのコンストラクターを継承できません。
#スーパー キーワード

サブクラスは親クラスのコンストラクターを継承できません。親クラスのコンストラクターを呼び出したい場合は、super キーワードを使用できます。

#**注: **サブクラスのコンストラクターで super を使用して親クラスのコンストラクターを呼び出す場合、呼び出しステートメントはサブクラスのコンストラクターの最初のステートメントである必要があります。親クラスのコンストラクタを呼び出す

super([参数])

通常のメンバ関数を呼び出す

super.函数名([参数])

#メソッドオーバーライド

サブクラスで定義されている関数が同じ名前の場合親クラスの関数と同様に、サブクラスの関数が親クラスの関数をオーバーライドします。サブクラスで同じ名前の親クラスの通常のメンバー関数を呼び出すと、問題を解決できます。

        class Father{ //父类(基类或超类)
            constructor(type,color){
                this.type = type;
                this.color = color;
            }
            money(){
                console.log(100);
            }
            show(){
                console.log('类型：'+this.type);
                console.log('颜色：'+this.color);
            }
        }
        class Son extends Father{ //Son是子类(又称派生类)
            constructor(type,color,weight){
                super(type,color); //调用父类的构造函数 要放在首位
                this.weight = weight;
            };
            show(){
                super.show();// 调用父类的普通成员函数
                console.log('重量：'+this.weight);
            };
            other(){
                return '子类的其他方法';
            };
        };
        var s1 = new Son('iPhone 12','黑色','3000g');//s1为子类的实例
        s1.show();
        console.log(s1.other());

静的メンバーとインスタンス メンバー

静的メンバー

: クラス名

または

コンストラクター

を通じてアクセスされるメンバーインスタンス メンバー: インスタンス オブジェクト経由アクセスされるメンバーはインスタンス メンバーと呼ばれます

違い:

インスタンス メンバーは特定のメンバーに属します静的メンバーはすべてのオブジェクトによって共有されますが、静的メンバーはすべてのオブジェクトによって共有されます静的メンバーは

クラス名

または

コンストラクター

を通じてアクセスされ、インスタンス メンバーは
• インスタンス化されたオブジェクト ## を通じてアクセスされます
• # ES5 での静的属性の定義 ES6 での

          function Student(name,age,sex){
              Student.school = '西安邮电大学';// school是静态成员
              this.name = name;
              this.age = age;
              this.sex = sex;// name age sex都是实例成员
              this.show = function(){
                  console.log('姓名：'+this.name);
                  console.log('年龄：'+this.age);
                  console.log('性别：'+this.sex);
              };
          };
          var f = new Student('李相赫',23,'男');
          f.show();
          console.log(Student.school);// 西安邮电大学
          console.log(f.school);// undefined

  ES7 での静的プロパティ定義クラスを定義するときに static キーワードを使用する
Define静的プロパティ

        class Foo{
            constructor(){
                this.color = '红色';// color是实例成员
            }
        }
        Foo.prop = 45;// prop是静态成员
        var f1 = new Foo();
        console.log('静态属性：'+Foo.prop);// 45
        console.log(f1.prop);// undefined

クラスとコンストラクター違い

クラス内のメンバー メソッドは、クラス内で定義されます。クラスを使用してオブジェクトを作成した後、これらのオブジェクトのメソッドは、すべて同じメソッドを参照するため、メモリ領域を節約できます。

        class Foo{
            static prop = 45; //prop是静态成员
            constructor(){
                this.color = '红色';
            }
        }
        var f2 = new Foo();
        console.log('静态属性：'+Foo.prop);// 45
        console.log(f2.prop);// undefined

【関連する推奨事項:

JavaScript ビデオ チュートリアル

、

Web フロントエンド

]

以上がes6 のクラスの静的メンバーとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。