Adakah kelas es5 atau es6?

青灯夜游
青灯夜游asal
2022-11-16 19:28:051744semak imbas

kelas ialah ciri baharu es6. Dalam ES6, kelas (kelas) telah diperkenalkan sebagai templat untuk objek, dan kelas boleh ditakrifkan melalui kata kunci kelas kaedah penulisan kelas baharu menjadikan penulisan prototaip objek lebih jelas, lebih seperti sintaks pengaturcaraan berorientasikan objek, dan banyak lagi; boleh difahami. Kelas ialah struktur gula sintaksis asas baharu dalam ECMAScript Walaupun kelas ES6 kelihatan menyokong pengaturcaraan berorientasikan objek formal, sebenarnya mereka masih menggunakan konsep prototaip dan pembina di belakangnya, membenarkan prototaip objek untuk Kaedah penulisan lebih jelas,

Adakah kelas es5 atau es6?

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

kelas ialah ciri baharu es6. Dalam ES6, kelas (kelas) telah diperkenalkan sebagai templat untuk objek, dan kelas boleh ditakrifkan melalui kata kunci kelas.

ES6 menyediakan kaedah penulisan yang lebih dekat dengan bahasa tradisional Kata kunci kelas yang baru diperkenalkan mempunyai keupayaan untuk mentakrifkan kelas secara rasmi. Kelas ialah struktur gula sintaks asas baharu dalam ECMAScript Walaupun kelas ECMAScript 6 kelihatan menyokong pengaturcaraan berorientasikan objek formal, sebenarnya mereka masih menggunakan konsep prototaip dan pembina di belakangnya, membenarkan prototaip objek kepada Kaedah penulisan lebih jelas dan lebih mirip. sintaks pengaturcaraan berorientasikan objek.

1 Pengenalan kepada kelas

JS tradisional hanya mempunyai konsep objek dan tiada konsep kelas, kerana JS ialah bahasa berorientasikan objek berdasarkan prototaip, prototaip Ciri-ciri objek ialah semua atribut dikongsi dengan objek baharu.

ES6 memperkenalkan konsep kelas boleh ditakrifkan melalui kata kunci kelas Ini adalah bahasa berorientasikan objek yang lebih sesuai dengan apa yang biasa kita fahami.

class Person{   //定义一个名为Person的类
    // 构造函数,用来接受参数
    constructor(x,y){
        this.x = x;    //this代表的是实例对象
        this.y = y;
    }
    todoSome(){  //这是个类的方法,不需要加function,有多个方法也不用逗号隔开
        alert(this.x + "的年龄是" +this.y+"岁");
    }
}
export default  Person;

2. Kaedah statik dan sifat statik

Kaedah statik dan sifat statik ialah sifat dan kaedah yang menggunakan kata kunci statik

2.1 Kaedah statik

static classMethod(){
		console.log('123456')
	}
  • Kaedah statik tidak akan diwarisi oleh subkelas dan subkelas tidak boleh memanggil
  • Ini dalam kaedah statik menunjuk kepada kelas, bukan contoh kelas. Oleh itu, kaedah statik hanya boleh dipanggil melalui nama kelas dan tidak boleh dipanggil melalui kejadian
let p = new Point();
p.classMethod();  // 报错

2.2 Atribut statik

static prop = 1 ;  // 静态属性
  • Sifat statik tidak boleh diwarisi oleh subkelas dan subkelas tidak boleh memanggilnya
  • Sifat statik hanya boleh dipanggil melalui nama kelas, bukan melalui contoh kelas

3. Warisan kelas dilanjutkan

  • kelas boleh menggunakan kata kunci lanjutan untuk mewarisi
  • warisan ES6, super mesti digunakan dalam pembina subkelas (). Kerana warisan ES6 mula-mula menambah atribut dan kaedah objek contoh kelas induk kepada ini, dan kemudian memanggil pembina subkelas untuk mengubah suai ini
  • Jika subkelas tidak mentakrifkan kaedah pembina, super() akan lalai untuk Menambah
  • pada subkelas akan mewarisi kaedah dan atribut kelas induk, tetapi kaedah statik dan atribut mesti dipanggil melalui nama kelas subkelas
import classtest from "./classtest";  //先引入父类
class Man extends classtest{
    constructor(x,y){   //构造函数尽量与父类参数保持一致
        super();   //利用super()关键字,这个必须放在子类构造函数中的第一位置
        this.x = x;
        this.y = y;
    }
}
export default  Man;

4. Pengambil fungsi nilai dan penetap fungsi storan kelas

pengambil dan penetap digunakan untuk membaca dan memindahkan nilai ​​​​kepada sifat kelas.

Penetap fungsi nilai dan penetap fungsi storan boleh memperibadikan tugasan dan gelagat nilai Apabila harta hanya mempunyai pengambil dan tiada penetap, harta itu ialah sifat baca sahaja dan tidak boleh diberikan nilai, mahupun. bolehkah ia dimulakan buat kali pertama.

Jika pembolehubah ditakrifkan sebagai peribadi (ditakrifkan di luar pendakap kerinting kelas), anda hanya boleh menggunakan getter tanpa penetap.

let data=[1,2,3,4];  //放在类外面,属于私有变量,可以只读取
class Person{
    // 构造函数
    constructor(x,y){
        this.x = x;
        this.y = y;
    }
    get x(){
        console.log('获得name');
        return this._name;    //get读取属性
    }
    set x(x){
        console.log("设置name");  
        this._name=x;   //set给属性赋值
    }
    get data(){
        return data;   //只读属性,属性返回的值只能是私有变量
    }
    todoSome(){
        alert(this.x + "的年龄是" +this.y+"岁");
    }
    static dayin(){
        alert("dayin");
    }
}
export default  Person;

Cara menggunakan:

 var test= new this.$myutils.classtest('haha','18');
  test.x="haha3";   //改变了实例化时候的x的值
  test.todoSome();  //输出:haha3的年龄是18岁。这里就已经不是实例化时候的haha了
  console.log(test.data);   //结果:打印[1,2,3,4]

5. Nota:

1 Apabila menggunakan kaedah, anda tidak boleh menambah kata kunci fungsi pada kaedah, kerana pembina dalam JS ditakrifkan dengan fungsi, dipisahkan oleh dua.

2 Jangan pisahkan semua kaedah dengan koma, jika tidak ralat akan dilaporkan.

[Pembelajaran yang disyorkan: Tutorial JavaScript Lanjutan]

Atas ialah kandungan terperinci Adakah kelas es5 atau es6?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
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
Artikel sebelumnya:Adakah es6 satu rangka kerja?Artikel seterusnya:Adakah es6 satu rangka kerja?