Was macht die Klasse es6?

Das Klassenschlüsselwort von es6 wird verwendet, um schnell eine „Klasse“ zu definieren. Das Wesentliche der Klasse ist die Funktion, die als syntaktischer Zucker betrachtet werden kann, wodurch das Schreiben von Objektprototypen klarer wird und der Syntax der objektorientierten Programmierung ähnlicher wird . Beim Heraufstufen einer Klasse erfolgt keine Variablenheraufstufung. Alle Methoden einer Klasse werden für das Prototypattribut der Klasse definiert. Der Aufruf einer Methode für eine Instanz einer Klasse ist tatsächlich der Aufruf einer Methode für den Prototyp.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, ECMAScript Version 6, Dell G3-Computer.

Grundlagen

• es6 führt das Konzept der Klasse ein und das Schlüsselwort class wird verwendet, um schnell eine „Klasse“ zu definieren. Die neue Methode zum Schreiben von Klassen macht das Schreiben von Objektprototypen klarer, ähnelt eher der Syntax der objektorientierten Programmierung und ist leichter zu verstehen.

• Tatsächlich werden dahinter immer noch die Konzepte Prototyp und Konstrukteur verwendet.

• Strenger Modus Es besteht keine Notwendigkeit, „use strict“ zu verwenden, da der strikte Modus nur verwendet werden kann, solange der Code innerhalb von Klassen und Modulen geschrieben wird.

• Bei der Verbesserung einer Klasse erfolgt keine Variablenförderung (aufgrund der Vererbung müssen Sie sicherstellen, dass die Unterklasse nach der übergeordneten Klasse definiert wird).

• Alle Methoden einer Klasse werden für das Prototypattribut der Klasse definiert. Der Aufruf der Methode für die Instanz der Klasse ist tatsächlich ein Aufruf der Methode für den Prototyp. Die Prototypmethode kann jedoch nicht über das Instanzobjekt aufgerufen werden über den Klassennamen aufgerufen werden, und es wird ein Fehler gemeldet.

class wird verwendet, um eine Klasse für es6 zu definieren

(Syntaktischer Zucker ist eine Art Codierung, um Codierungsfehler zu vermeiden und die Effizienz zu verbessern. Die elegante Lösung auf grammatikalischer Ebene ist einfach eine tragbare Schreibmethode)

• Schauen Sie sich den Code an

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

• Verwendung Sehen Sie sich den Code an

  Die Verwendung ist dasselbe wie die Verwendung des Konstruktors. Verwenden Sie new, um Objektinstanzen zu generieren. Eigenschaften und Methoden. Die im Konstruktor definierten Eigenschaften und Methoden sind Instanzeigenschaften und -methoden, die darauf aufgerufen werden

  class person2 {
  }
  let json = new person2;

Statische Methoden

Methoden, die direkt über Klassen aufgerufen werden können, ohne dass Instanzobjekte erforderlich sind. Das verweist auf die Klasse selbst.

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

Namensattribut

Das Namensattribut gibt den Namen der Klasse zurück. Das ist der Name, der unmittelbar auf die Klasse folgt.

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

dies verweist standardmäßig auf die Instanz der Klasse.

Wenn die Methode der Klasse dies enthält, wird wahrscheinlich ein Fehler gemeldet, wenn diese Methode alleine verwendet wird

Wenn dies auf den falschen Punkt zeigt 1. Verwenden Sie die Pfeilfunktion 2. Binden Sie dies im Konstruktor

Die Wertfunktion (Getter) und die gespeicherte Wertfunktion (Setter)

class Person {
}
Person.name // Person

//Klassendeklaration kann nicht wiederholt werden

class Person {}

class Person {}

// TypeError Identifier 'Person' hat bereits wurde deklariert

constructor-Schlüsselwort

constructor-Methode

constructor-Methode ist die Standardmethode der Klasse, wenn eine Objektinstanz durch den neuen Befehl generiert wird, wird diese Methode automatisch aufgerufen (das Instanzobjekt, von dem dies zurückgegeben wird). Standard).

Eine Klasse muss eine Konstruktormethode haben, wenn sie nicht explizit definiert ist, wird standardmäßig eine leere Konstruktormethode hinzugefügt.

Eine Klasse kann nur eine spezielle Methode namens „Konstruktor“ haben. Wenn die Klasse mehrere Konstruktormethoden enthält, wird ein SyntaxError ausgelöst.

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

Was ist ein Konstruktor?

• Jede Klasse muss einen Konstruktor haben. Wenn keine explizite Deklaration vorhanden ist, fügt die JS-Engine automatisch einen leeren Konstruktor hinzu.

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

• Hinweis Wenn Sie eine Methode in einer Klasse deklarieren, fügen Sie das Funktionsschlüsselwort nicht vor der Methode hinzu Trennen Sie Methoden nicht durch Kommas, da sonst ein Fehler gemeldet wird Alle innerhalb der Klasse definierten Methoden sind nicht aufzählbar
• Beachten Sie, dass wie bei es5 die Attribute der Instanz auf dem Prototyp definiert werden, es sei denn, sie sind explizit auf sich selbst (d. h. diesem Objekt) definiert.

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

Super-Schlüsselwort

The Das Schlüsselwort super wird verwendet, um auf Funktionen der übergeordneten Klasse zuzugreifen und diese aufzurufen. Sie können den Konstruktor der übergeordneten Klasse oder die gewöhnlichen Funktionen der übergeordneten Klasse aufrufen. Unterklassen in Programmen können einige Methoden und Attribute von der übergeordneten Klasse erben. Vererbung ist eine wichtige objektorientierte Funktion, die das Schreiben von Code reduzieren und die Extraktion öffentlicher Inhalte erleichtern kann

 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视频教程、编程视频】

Das obige ist der detaillierte Inhalt vonWas macht die Klasse es6?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!