es6クラスは何をするのですか?

es6 の class キーワードは、「クラス」をすばやく定義するために使用されます。クラスの本質は関数であり、構文糖とみなされ、オブジェクト プロトタイプの記述がより明確になり、次の構文に似たものになります。オブジェクト指向プログラミング。クラスをプロモートする場合、変数のプロモートはありません。クラスのすべてのメソッドは、クラスのプロトタイプ属性で定義されます。クラスのインスタンスのメソッドを呼び出すことは、実際にはプロトタイプのメソッドを呼び出すことになります。

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

#Basics

• es6 ではクラスの概念が導入されており、class キーワードは「クラス」をすばやく定義するために使用されます。新しいクラス記述方法により、オブジェクト プロトタイプの記述がより明確になり、オブジェクト指向プログラミングの構文に近くなり、理解しやすくなります。

• 実際、プロトタイプとコンストラクターの概念は依然としてその背後で使用されています。

• Strict モード コードがクラスおよびモジュール内に記述されている限り、strict モードのみを使用できるため、strict を使用する必要はありません。

• クラスを改善するときに変数の昇格はありません (継承のため、サブクラスが親クラスの後に定義されていることを確認する必要があります)。

• クラスのすべてのメソッドは、クラスのプロトタイプ属性で定義されます。クラスのインスタンスでメソッドを呼び出すことは、実際にはプロトタイプでメソッドを呼び出すことになります。プロトタイプ メソッドは、インスタンス オブジェクトを通じて呼び出すことができますクラス名を使用して呼び出すと、エラーが報告されます。

#class は、es6

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

#実際、クラスは単なるシンタックス シュガーは、コンストラクターを記述するもう 1 つの方法です

• (シンタックス シュガーは、コーディング エラーを回避し、コーディング効率を向上させるための構文レベルでの洗練されたソリューションです簡単に言うと移植性があります。メソッドを書くだけです)

• コードを見てください

class Person{
}
console.log(typeof Person)                               //funciton
console.log(Person.prototype.constructor === Person)     //true

使ってコードを見てください

使い方は同じです。コンストラクターを使用してオブジェクト インスタンスを生成するには new を使用します

class person2 {
}
let json = new person2;

プロパティとメソッド

コンストラクターで定義されたプロパティとメソッドは、インスタンス プロパティと、このインスタンスで呼び出されるメソッドです。それ以外の場合は、プロトタイプのプロパティとメソッドです。

class Person {
  constructor (name) {
    this.name = name            //constructor内定义的方法和属性是实例对象自己的，
  }
  say () {                      //而constructor外定义的方法和属性则是所有实例对象可以共享的 注意!
    console.log('hello')
  }
}
let jon = new Person()
jon.hasOwnPrototype('name')     //true
jon.hasOwnPrototype('say')      //false

静的メソッド

インスタンス オブジェクトを渡さずに、クラスを通じて直接呼び出すことができるメソッド (これはクラスを指します)それ自体

class Person {
  static doSay () {
    this.say()
  }
  static say () {
    console.log('hello')
  }
}
Person.doSay()              //hello
***********************************************************************************************
//静态方法可以被子类继承
class Sub extends Person { 
}
Sub.doSay() // hello

//静态方法可以通过类名调用，不能通过实例对象调用，否则会报错
class Person {
    static sum(a, b) {
        console.log(a + b)
    }
}
var p = new Person()
Person.sum(1, 2)  // 3
p.sum(1,2)        //  TypeError p.sum is not a function

name 属性

name 属性はクラスの名前 (クラスの直後の名前) を返します。

class Person {
}
Person.name // Person

これのデフォルトはクラスのインスタンスです。

クラスメソッド内にこれがある場合、このメソッドを単独で使用するとエラーが報告される可能性があります

これが間違った方向を指している場合 1. アロー関数を使用します2. コンストラクター内でバインドします this

値関数 (getter) と値格納関数 (setter)

class Person {
  get name () {
    return 'getter'
  }
  set name(val) {
    console.log('setter' + val)
  }
}

let jon = new Person()
jon.name = 'jon' // setter jon
jon.name         // getter

//クラス宣言を繰り返すことはできません

クラス パーソン {}

クラス パーソン {}

// TypeError 識別子 'パーソン' はすでに宣言されています

コンストラクター キーワード

コンストラクター メソッド

コンストラクター メソッドは、クラスのデフォルトのメソッドです。新しいコマンドによってオブジェクト インスタンスが生成されると、このメソッドが自動的に呼び出されます (インスタンス オブジェクトはこれです)デフォルトで返されます)。
• クラスにはコンストラクター メソッドが必要です。明示的に定義されていない場合は、デフォルトで空のコンストラクター メソッドが追加されます。
• クラスには「constructor」という名前の特別なメソッドを 1 つだけ含めることができます。クラスに複数のコンストラクター メソッドが含まれている場合は、SyntaxError がスローされます。

• class Person {
     constructor(x, y) {
      this.x = x    //默认返回实例对象 this
      this.y = y
    }
    toString() {
      console.log(this.x + ', ' + this.y)
    }
  }

• コンストラクターとは何ですか?

各クラスにはコンストラクターが必要です。明示的な宣言がない場合、JS エンジンは自動的に空のコンストラクターを追加します そうですか

#注意 クラス内でメソッドを宣言する場合、メソッドの前に function キーワードを追加しないでください。 メソッドをカンマで区切らないでください。カンマで区切ると、エラーが報告されます。 クラス内で定義されたすべてのメソッドは列挙不可能です

インスタンスの属性は、それ自体 (つまり、このオブジェクト) で明示的に定義されていない限り、es5 と同じであることに注意してください。プロトタイプで定義されています

class person3 {
}
//等于 
class person3 {
    constructor(){}
}

super キーワード

super キーワードは、親クラスの関数にアクセスして呼び出すために使用されます。親クラスのコンストラクターを呼び出すこともできます。親の通常の関数class

class Point {
  constructor(x,y){
    this.x = x;
    this.y = y;
    
  }
  toString(){
    return `this.x + this.y`;
  }
}
var point = new Point();
point.toString()    //(2,3)
point.hasOwnProperty("x")        //true
point.hasOwnProperty("y")        //true   在这x&&y都是实例对象point自身的属性(因为定义在this变量上) // 所以返回true 
point.hasOwnProperty("toString") //false  toString是原型对象的属性 (因为定义在Point类上)             //所以返回false 
point._proto_.hasOwnProperty("toString") //true  

//加两个实例 
var p1 = new Point();
var p2 = new Point();
p1._proto_ === p2._proto_                //true    这个不建议使用 
//上面代码中 p1和p2 都是point的实例 他们的原型都是Point.prototype 所以 _proto_属性是相等的 
//即是说 可以通过实例的_proto_ 属性为 "类" 添加方法

継承の拡張

継承とは、息子が父親の事業を継承することを意味します。実際には、プログラム内のサブクラスは親クラスから一部のメソッドと属性を継承できます。 オブジェクト指向継承の主な機能により、コードの記述が減り、パブリック コンテンツのキーワードの抽出が容易になります extends

 class Father {
        constructor (surname){
            this.surname = surname
        }
        say(){                                     //父级Father里面有一个方法 say()  
            console.log("你的名字" + this.surname)
        }
    }

    class Son extends Father {                     //在这里Son 继承了 Father父级里面的方法   关键字extends 
    }

    var son = new Son('锤子')                      //new 出来实例   
    son.say()                                      //打印  你的名字锤子

类的方法

class Person  {
         constructor(name, age) {    
    // 构造函数，接收一个name和age
             this.name = name
             this.age = age 
         }
         say(){
    // 一个方法  //注意类里面的方法不加function关键字  方法与方法之间不用,号隔开 
             console.log("你好",this.name)
         }
         // ....sayWhat(){} saySome(){}
    }
     var person  = new Person('老王',44)
    //调用方法
     person.say()  //老王
    //在类的实例上调用方法 其实就是调用 原型上的方法

类的表达式

与函数一样 calss 也可以使用表达式的形式定义  采用class表达式 可以写出立即执行的Class!!
注意与函数表达式类似 类表达式在他们被求值前也不能使用(即赋值变量 之前调用) 但 与函数定义不同 虽然函数声明可以提升 但类不能

类表达式（类定义）
类表达式可以是被命名的或匿名的

匿名类

let Person = class {
  constructor(x, y) {
    this.x = x
    this.y = y
  }
}

命名的类

let Person = class Person {
  constructor(x, y) {
    this.x = x
    this.y = y
  }
}
const Mycalss = class Me {
    getClassName(){
        return Me.name;
    }
};     //这里用 表达式(即赋值变量一个) 
       //注意! 这个类的名字是Mycalss而不是 Me Me只在Class的内部代码可用 指代当前类
let inst = new Mycalss();
inst.getClassName()   //Me   
Me.name               //报错  Me只在Class内部有定义

采用class表达式 可以写出立即执行的Class!!

let person = new class {
    constructor(name) {
       this.name = this.name; 
    }    
    sayname(){
        console.log(this.name);
    }
}("常东东")         //这段代码中class是立即执行的实例

补充案例

class Animal {                       //class定义了一个“类”
        constructor(){
            this.type = 'animal'     //有一个constructor方法，这就是构造方法   //this关键字则代表实例对象
        }                            //constructor内定义的方法和属性是实例对象自己的，而constructor外定义的方法和属性则是所有实例对象可以共享的 注意!
        says(say){
            console.log(this.type + ' says ' + say)
        }
    }
    let animal = new Animal()
    animal.says('hello')    //animal says hello

    class Cat extends Animal {       //通过extends关键字实现继承  //定义了一个Cat类，该类通过extends关键字，继承了Animal类的所有属性和方法。
        constructor(){
            super()                  //super关键字 它指代父类的实例（即父类的this对象）子类必须在constructor方法中调用super方法，否则新建实例时会报错。
            this.type = 'cat'        //这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。   
        }
    }
    let cat = new Cat()
    cat.says('hello')       //cat says hello

【相关推荐：javascript视频教程、编程视频】

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