Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Bagaimanakah ES6 mentakrifkan kelas?

Bagaimanakah ES6 mentakrifkan kelas?

青灯夜游
Lepaskan: 2022-03-09 18:52:28
asal
1583 orang telah melayarinya

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.

Bagaimanakah ES6 mentakrifkan kelas?

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;
    }
}
Salin selepas log masuk

Pengisytiharan kelas

class Example {
    constructor(a) {
        this.a = a;
    }
}
Salin selepas log masuk

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
Salin selepas log masuk

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 {}
Salin selepas log masuk

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
}
Salin selepas log masuk

Tambah kaedah

Object.assign(Example.prototype,{
    //methods
})
Salin selepas log masuk

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;
Salin selepas log masuk

Sifat awam

class Example{}
Example.prototype.a = 2;
Salin selepas log masuk

Sifat instance

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

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

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
Salin selepas log masuk

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
Salin selepas log masuk

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
Salin selepas log masuk

Kaedah statik

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

Kaedah prototaip

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

Kaedah contoh

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

Instansiasi kelas

baharu

Instansiasi kelas mesti melepasi kata kunci baharu.

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

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
Salin selepas log masuk

[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!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan