Bagaimanakah ES6 mentakrifkan kelas?

Dalam ES6, kelas (kelas) telah diperkenalkan sebagai templat untuk objek, dan kelas boleh ditakrifkan melalui kata kunci "kelas". Intipati kelas adalah fungsi, yang boleh dianggap sebagai gula sintaksis, menjadikan penulisan prototaip objek lebih jelas dan lebih seperti sintaks pengaturcaraan berorientasikan objek.

Persekitaran pengendalian tutorial ini: sistem Windows 7, ECMAScript versi 6, komputer Dell G3.

Kelas ES6

Dalam ES6, kelas (kelas) diperkenalkan sebagai templat untuk objek dan boleh ditakrifkan melalui kata kunci "kelas" baik hati.

Intipati kelas ialah fungsi.

Pada asasnya, kelas ES6 boleh dianggap hanya sebagai gula sintaksis Kebanyakan fungsinya boleh dicapai oleh ES5 Kaedah penulisan kelas baharu hanya menjadikan kaedah penulisan prototaip objek lebih jelas dan lebih berorientasikan objek hanya sintaks pengaturcaraan.

Penggunaan asas

Takrifan kelas

Ungkapan kelas boleh tanpa nama atau dinamakan.

// 匿名类
let Example = class {
    constructor(a) {
        this.a = a;
    }
}
// 命名类
let Example = class Example {
    constructor(a) {
        this.a = a;
    }
}

Pengisytiharan kelas

class Example {
    constructor(a) {
        this.a = a;
    }
}

Nota: Pengisytiharan berulang tidak dibenarkan.

class Example{}
class Example{}
// Uncaught SyntaxError: Identifier 'Example' has already been 
// declared
 
let Example1 = class{}
class Example{}
// Uncaught SyntaxError: Identifier 'Example' has already been 
// declared

Nota:

Takrifan kelas tidak akan dinaikkan pangkat, yang bermaksud bahawa kelas mesti ditakrifkan sebelum mengakses, jika tidak ralat akan dilaporkan.

Kaedah dalam kelas tidak memerlukan kata kunci fungsi.

Titik koma tidak boleh ditambah antara kaedah.

new Example(); 
class Example {}

Badan kelas

Atribut

prototaip

Dalam ES6, prototaip masih wujud Walaupun kaedah boleh ditakrifkan terus dari kelas, kaedah sebenarnya masih ditakrifkan pada prototaip. Gantikan kaedah/Tambah kaedah semasa permulaan

Example.prototype={
    //methods
}

Tambah kaedah

Object.assign(Example.prototype,{
    //methods
})

Atribut statik

Atribut statik: atribut kelas itu sendiri, iaitu, ditakrifkan secara langsung di dalam kelas Properties ( Class.propname ), tidak perlu dijadikan instantiated. ES6 menetapkan bahawa hanya terdapat kaedah statik di dalam Kelas dan tiada sifat statik.

class Example {
// 新提案
    static a = 2;
}
// 目前可行写法
Example.b = 2;

Sifat awam

class Example{}
Example.prototype.a = 2;

Sifat instance

Sifat instance: sifat yang ditakrifkan pada objek instance ( this ).

class Example {
    a = 2;
    constructor () {
        console.log(this.a);
    }
}

atribut nama

Mengembalikan nama kelas berikut kelas (apabila ia wujud).

let Example=class Exam {
    constructor(a) {
        this.a = a;
    }
}
console.log(Example.name); // Exam
 
let Example=class {
    constructor(a) {
        this.a = a;
    }
}
console.log(Example.name); // Example

Kaedah

kaedah pembina

Kaedah pembina ialah kaedah lalai kelas dan dipanggil apabila mencipta objek instantiated bagi kelas.

class Example{
    constructor(){
      console.log('我是constructor');
    }
}
new Example(); // 我是constructor

Kembali objek

class Test {
    constructor(){
        // 默认返回实例对象 this
    }
}
console.log(new Test() instanceof Test); // true
 
class Example {
    constructor(){
        // 指定返回对象
        return new Test();
    }
}
console.log(new Example() instanceof Example); // false

Kaedah statik

class Example{
    static sum(a, b) {
        console.log(a+b);
    }
}
Example.sum(1, 2); // 3

Kaedah prototaip

class Example {
    sum(a, b) {
        console.log(a + b);
    }
}
let exam = new Example();
exam.sum(1, 2); // 3

Kaedah contoh

class Example {
    constructor() {
        this.sum = (a, b) => {
            console.log(a + b);
        }
    }
}

Instansiasi kelas

baharu

Instansiasi kelas mesti melepasi kata kunci baharu.

class Example {}
 
let exam1 = Example(); 
// Class constructor Example cannot be invoked without 'new'

Objek segera

Objek prototaip kongsi

class Example {
    constructor(a, b) {
        this.a = a;
        this.b = b;
        console.log('Example');
    }
    sum() {
        return this.a + this.b;
    }
}
let exam1 = new Example(2, 1);
let exam2 = new Example(3, 1);
 
// __proto__ 已废弃，不建议使用
// console.log(exam1.__proto__ == exam2.__proto__); 
 
console.log(Object.getPrototypeOf(exam1) === Object.getPrototypeOf(exam2));// true
 
Object.getPrototypeOf(exam1).sub = function() {
    return this.a - this.b;
}
console.log(exam1.sub()); // 1
console.log(exam2.sub()); // 2

[Cadangan berkaitan: tutorial video javascript, bahagian hadapan web】

Atas ialah kandungan terperinci Bagaimanakah ES6 mentakrifkan kelas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!