Ringkaskan dan susun mata pengetahuan kelas dalam ES6

Artikel ini membawa anda pengetahuan yang berkaitan tentang javascript, E yang terutamanya memperkenalkan isu berkaitan tentang kelas kelas ES6 memperkenalkan konsep kelas kelas, dan kelas boleh ditakrifkan melalui kata kunci kelas, ini adalah objek -bahasa berorientasikan yang lebih sesuai dengan apa yang biasa kita fahami.

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

pengenalan kelas

JS tradisional hanya mempunyai konsep objek, bukan kelas, kerana JS ialah bahasa berorientasikan objek berdasarkan prototaip, dan ciri objek prototaip ialah berkongsi semua atribut 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;

Kaedah statik dan sifat statik

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

Kaedah statik

static classMethod(){
		console.log('123456')
	}

• Kaedah statik tidak akan diwarisi oleh subkelas dan subkelas tidak boleh memanggil
• ini dalam kaedah statik menunjuk ke kelas 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();  // 报错

sifat 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

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 subkelas
• akan mewarisi kaedah dan atribut kelas induk, tetapi kaedah dan atribut statik mesti memanggil fungsi nilai kelas

import classtest from "./classtest";  //先引入父类
class Man extends classtest{
    constructor(x,y){   //构造函数尽量与父类参数保持一致
        super();   //利用super()关键字，这个必须放在子类构造函数中的第一位置
        this.x = x;
        this.y = y;
    }
}
export default  Man;

melalui nama kelas bagi subkelas Getter dan penetap fungsi nilai tersimpan

Getter dan setter digunakan untuk membaca dan memindahkan nilai kepada atribut 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]

Nota:

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

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

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

Atas ialah kandungan terperinci Ringkaskan dan susun mata pengetahuan kelas dalam ES6. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!