Menggunakan javascript face non enumerable

Properti enumerable dalam JavaScript berarti bahwa properti dapat dilihat jika diulang menggunakan for…in loop atau Object. kunci() metode. Semua properti yang dibuat dengan penugasan sederhana atau penginisialisasi properti dapat dihitung secara default.  

Show

    Contoh 1.  

    javascript




    <script>

        // Creating a student object

        const student = {

            

    true
    true
    true
    false
    0
    true
    true
    true
    false
    1
    true
    true
    true
    false
    2

            

    true
    true
    true
    false
    4
    true
    true
    true
    false
    5
    true
    true
    true
    false
    2

            ________0______8

            

    // This will not print the property 
    // Who's enumerable property is set to false
    
    for (const key in student){
        console.log(key)
    }
    0

        

    // This will not print the property 
    // Who's enumerable property is set to false
    
    for (const key in student){
        console.log(key)
    }
    2

        

        

    // This will not print the property 
    // Who's enumerable property is set to false
    
    for (const key in student){
        console.log(key)
    }
    5

        

    // This will not print the property 
    // Who's enumerable property is set to false
    
    for (const key in student){
        console.log(key)
    }
    7
    // This will not print the property 
    // Who's enumerable property is set to false
    
    for (const key in student){
        console.log(key)
    }
    8
    // This will not print the property 
    // Who's enumerable property is set to false
    
    for (const key in student){
        console.log(key)
    }
    9
    registration
    name
    age
    0

            

    registration
    name
    age
    2

        

    registration
    name
    age
    4

    registration
    name
    age
    5

    Keluaran

    registration
    name
    age
    marks

    Contoh 2. Karena semua properti diinisialisasi oleh penginisialisasi properti, semuanya memiliki enumerable yang disetel ke true secara default. Untuk secara eksplisit mengubah atribut enumerable internal dari sebuah properti, Object. metode defineProperty() digunakan. Juga, untuk memeriksa apakah suatu properti dapat dihitung atau tidak, kami menggunakan fungsi propertyIsEnumerable(). Mengembalikan nilai true jika properti dapat dihitung atau false sebaliknya.  

    HTML




    registration
    name
    age
    6
    registration
    name
    age
    7
    registration
    name
    age
    8

        // Creating a student object

        const student = {

            <script>4

            <script>6

            ________0______8

        

    // This will not print the property 
    // Who's enumerable property is set to false
    
    for (const key in student){
        console.log(key)
    }
    2

        

            3

            5

        

            8

            // Creating a student object0

            // Creating a student object2

            // Creating a student object_4

            // Creating a student object6

        // Creating a student object_8

        

            1

            3

            5

            7

        ________93______9

    const student = {0

    registration
    name
    age
    7
    registration
    name
    age
    8

    Keluaran

    true
    true
    true
    false

    catatan. Properti yang dibuat menggunakan metode defineProperty() memiliki flag enumerable yang disetel ke false. Ketika kode yang sama di atas dijalankan menggunakan perulangan for, properti “marks” tidak terlihat

    objek. defineProperty() juga memungkinkan Anda membuat properti hanya-baca seperti yang kita lihat di bawah, kita tidak dapat mengubah nilai gaji dari objek person. Untuk membuat properti salary enumerable, tetapkan true ke key bernama enumerable

    Dalam pemrograman berorientasi objek, kelas adalah templat kode program yang dapat diperluas untuk membuat objek, memberikan nilai awal untuk status (variabel anggota) dan implementasi perilaku (fungsi atau metode anggota)

    Wikipedia

    Pada kenyataannya, kita sering membutuhkan sesuatu untuk membuat banyak objek yang memiliki kemiripan, seperti pengguna, atau benda-benda lainnya seperti buah-buahan, binatang, kendaraan, dan sesuatu yang biasanya bisa dikelompokan

    Seperti yang kita ketahui dari bab Konstruktor, operator "new",

    class User {
    
      constructor(name) {
        this.name = name;
      }
    
      sayHi() {
        alert(this.name);
      }
    
    }
    
    // Cara penggunaan:
    let user = new User("John");
    user.sayHi();
    _8 dapat membantu kita membuatnya

    Namun pada Javascript modern, ada cara pembuatan “class” yang lebih lanjut, yang akan memperkenalkan fitur-fitur yang sangat berguna untuk pemograman berbasis objek/object oriented

    Sintaks dasarnya adalah

    class MyClass {
      // class methods
      constructor() { .. }
      method1() { .. }
      method2() { .. }
      method3() { .. }
      ...
    }

    Kemudian kita gunakan

    class User {
    
      constructor(name) {
        this.name = name;
      }
    
      sayHi() {
        alert(this.name);
      }
    
    }
    
    // Cara penggunaan:
    let user = new User("John");
    user.sayHi();
    _9 untuk menciptakan sebuah objek baru dengan semua metode yang sudah melebar

    Method

    class User {
      constructor(name) { this.name = name; }
      sayHi() { alert(this.name); }
    }
    
    // bukti: User adalah sebuah fungsi
    alert(typeof User); // function
    0 secara otomatis terpanggil oleh
    class User {
      constructor(name) { this.name = name; }
      sayHi() { alert(this.name); }
    }
    
    // bukti: User adalah sebuah fungsi
    alert(typeof User); // function
    _1, jadi kita dapat menginisialisasi sebuah objek dengannya

    Contohnya

    class User {
    
      constructor(name) {
        this.name = name;
      }
    
      sayHi() {
        alert(this.name);
      }
    
    }
    
    // Cara penggunaan:
    let user = new User("John");
    user.sayHi();

    Ketika

    class User {
      constructor(name) { this.name = name; }
      sayHi() { alert(this.name); }
    }
    
    // bukti: User adalah sebuah fungsi
    alert(typeof User); // function
    _2 kata bahasa lanka

    1. Sebuah objek baru terbentuk
    2. method “constructor” berjalan dengan argument yang dberikan dan menetapkan
      class User {
        constructor(name) { this.name = name; }
        sayHi() { alert(this.name); }
      }
      
      // bukti: User adalah sebuah fungsi
      alert(typeof User); // function
      3 pada nya

    …Lalu kita dapat memanggil objek metode, seperti

    class User {
      constructor(name) { this.name = name; }
      sayHi() { alert(this.name); }
    }
    
    // bukti: User adalah sebuah fungsi
    alert(typeof User); // function
    4

    Tidak boleh ada koma di antara kelas metode

    Kesalahan umum bagi pemula biasanya dengan memberikan koma diantara class method, yang nantinya akan menghasilkan sintaks eror

    Notasi disini jangan disamakan dengan objek literal. Di dalam kelas, tidak perlu ada koma

    Jadi apa sih sebenarnnya

    class User {
      constructor(name) { this.name = name; }
      sayHi() { alert(this.name); }
    }
    
    // bukti: User adalah sebuah fungsi
    alert(typeof User); // function
    5 itu ?

    Mari kita uraikan dan lihat apa sebenarnya kelas itu. Yang nantinya akan membantu untuk memahami berbagai aspek yang lebih rumit

    Katakanlah Javascript, sebuah kelas itu merupakan sesuatu yang mirip fungsi

    Yuk kita lihat disini

    class User {
      constructor(name) { this.name = name; }
      sayHi() { alert(this.name); }
    }
    
    // bukti: User adalah sebuah fungsi
    alert(typeof User); // function

    Apa yang konstruktor

    class User {
      constructor(name) { this.name = name; }
      sayHi() { alert(this.name); }
    }
    
    // bukti: User adalah sebuah fungsi
    alert(typeof User); // function
    _6 sebenarnya lakukan

    1. Membuat sebuah fungsi bernama
      class User {
        constructor(name) { this.name = name; }
        sayHi() { alert(this.name); }
      }
      
      // bukti: User adalah sebuah fungsi
      alert(typeof User); // function
      _7, yang akan menjadi hasil dari deklarasi class. Sebuah fungsi kodingan diambil dari metode
      class User {
        constructor(name) { this.name = name; }
        sayHi() { alert(this.name); }
      }
      
      // bukti: User adalah sebuah fungsi
      alert(typeof User); // function
      8 (kita asumsikan kosong jika kita tidak menulis sebuah metode)
    2. Simpan method-method class didalamnya, seperti
      class User {
        constructor(name) { this.name = name; }
        sayHi() { alert(this.name); }
      }
      
      // bukti: User adalah sebuah fungsi
      alert(typeof User); // function
      _9, pada
      class User {
        constructor(name) { this.name = name; }
        sayHi() { alert(this.name); }
      }
      
      // class adalah sebuah fungsi
      alert(typeof User); // function
      
      // ...atau, lebih tepatnya, Method constructor
      alert(User === User.prototype.constructor); // true
      
      // Method tersebut berada pada User.prototype, contoh:
      alert(User.prototype.sayHi); // alert(this.name);
      
      // Didalamnya terdapat dua method pada prototipe
      alert(Object.getOwnPropertyNames(User.prototype)); // constructor, sayHi
      0

    Setelah objek

    class User {
      constructor(name) { this.name = name; }
      sayHi() { alert(this.name); }
    }
    
    // class adalah sebuah fungsi
    alert(typeof User); // function
    
    // ...atau, lebih tepatnya, Method constructor
    alert(User === User.prototype.constructor); // true
    
    // Method tersebut berada pada User.prototype, contoh:
    alert(User.prototype.sayHi); // alert(this.name);
    
    // Didalamnya terdapat dua method pada prototipe
    alert(Object.getOwnPropertyNames(User.prototype)); // constructor, sayHi
    1 terbentuk, ketika kita memanggil metode tersebut, itu akan mengambil dari prototypenya, seperti yang dijelaskan pada bab F. prototipe. Sehingga objek tersebut memiliki akses pada method class nya

    Kita dapat mengilustrasikan hasil dari deklrasi

    class User {
      constructor(name) { this.name = name; }
      sayHi() { alert(this.name); }
    }
    
    // class adalah sebuah fungsi
    alert(typeof User); // function
    
    // ...atau, lebih tepatnya, Method constructor
    alert(User === User.prototype.constructor); // true
    
    // Method tersebut berada pada User.prototype, contoh:
    alert(User.prototype.sayHi); // alert(this.name);
    
    // Didalamnya terdapat dua method pada prototipe
    alert(Object.getOwnPropertyNames(User.prototype)); // constructor, sayHi
    2 seperti berikut

    Mari kita bedah kode tersebut

    class User {
      constructor(name) { this.name = name; }
      sayHi() { alert(this.name); }
    }
    
    // class adalah sebuah fungsi
    alert(typeof User); // function
    
    // ...atau, lebih tepatnya, Method constructor
    alert(User === User.prototype.constructor); // true
    
    // Method tersebut berada pada User.prototype, contoh:
    alert(User.prototype.sayHi); // alert(this.name);
    
    // Didalamnya terdapat dua method pada prototipe
    alert(Object.getOwnPropertyNames(User.prototype)); // constructor, sayHi

    Terkadang orang-orang mengatakan bahwa

    class User {
      constructor(name) { this.name = name; }
      sayHi() { alert(this.name); }
    }
    
    // bukti: User adalah sebuah fungsi
    alert(typeof User); // function
    _5 adalah sebuah
    class User {
      constructor(name) { this.name = name; }
      sayHi() { alert(this.name); }
    }
    
    // class adalah sebuah fungsi
    alert(typeof User); // function
    
    // ...atau, lebih tepatnya, Method constructor
    alert(User === User.prototype.constructor); // true
    
    // Method tersebut berada pada User.prototype, contoh:
    alert(User.prototype.sayHi); // alert(this.name);
    
    // Didalamnya terdapat dua method pada prototipe
    alert(Object.getOwnPropertyNames(User.prototype)); // constructor, sayHi
    _4 (sintaks yang diciptakan untuk membuat mudah dibaca, tapi tidak ada sesuatu yang baru didalamnya), karena sebenarnya kita dapat mendeklasikan objek tanpa menggunakan sintaks
    class User {
      constructor(name) { this.name = name; }
      sayHi() { alert(this.name); }
    }
    
    // bukti: User adalah sebuah fungsi
    alert(typeof User); // function
    5 sama sekali

    // menjalankan Class User hanya dengan fungsi
    
    // 1. Membuat fungsi konstruktor
    function User(name) {
      this.name = name;
    }
    // sebuah fungsi prototipe memiliki properti "constructor" secara bawaannya,
    // jadi kita tidak perlu membuatnya
    
    // 2 menambahkan method pada prototype
    User.prototype.sayHi = function() {
      alert(this.name);
    };
    
    // Penggunaan:
    let user = new User("John");
    user.sayHi();

    Hasil dari pendefinisian berikut adalah sama. Jadi memang ada alasan mengapa

    class User {
      constructor(name) { this.name = name; }
      sayHi() { alert(this.name); }
    }
    
    // bukti: User adalah sebuah fungsi
    alert(typeof User); // function
    _5 dapat dianggap sebagai pemanis sintaks untuk pendefinisian konstruktor bersamaan dengan method prototype-nya

    Tetap saja, ada perbedaan penting

    1. Pertama, sebuah fungsi yang dibentuk dengan

      class User {
        constructor(name) { this.name = name; }
        sayHi() { alert(this.name); }
      }
      
      // bukti: User adalah sebuah fungsi
      alert(typeof User); // function
      _5 dilabeli oleh properti internal yang khusus
      class User {
        constructor(name) { this.name = name; }
        sayHi() { alert(this.name); }
      }
      
      // class adalah sebuah fungsi
      alert(typeof User); // function
      
      // ...atau, lebih tepatnya, Method constructor
      alert(User === User.prototype.constructor); // true
      
      // Method tersebut berada pada User.prototype, contoh:
      alert(User.prototype.sayHi); // alert(this.name);
      
      // Didalamnya terdapat dua method pada prototipe
      alert(Object.getOwnPropertyNames(User.prototype)); // constructor, sayHi
      8. Jadi tidak sepenuhnya sama dengan membuatnya secara manual

      Javascript sendiri mengecek properti tersebut diberbagai tempat. sebagai contoh, tidak seperti fungsi biasa, itu harus dijalankan dengan sintaks

      class User {
        constructor(name) { this.name = name; }
        sayHi() { alert(this.name); }
      }
      
      // bukti: User adalah sebuah fungsi
      alert(typeof User); // function
      1

      class User {
        constructor() {}
      }
      
      alert(typeof User); // function
      User(); // Error: Class constructor User cannot be invoked without 'new'

      Selain itu, string representasi dari class konstruktor di sebagian besar mesin JavaScript dimulai dengan “class …”

      class User {
        constructor() {}
      }
      
      alert(User); // class User { .. }

      Terdapat perbedaan lain, kita akan segera melihatnya

    2. Kelas Metode merupakan non-enumerable(tidak bisa melakukan perhitungan dengan metode ini) Sebuah kelas pendefinisian menetapkan flag

      // menjalankan Class User hanya dengan fungsi
      
      // 1. Membuat fungsi konstruktor
      function User(name) {
        this.name = name;
      }
      // sebuah fungsi prototipe memiliki properti "constructor" secara bawaannya,
      // jadi kita tidak perlu membuatnya
      
      // 2 menambahkan method pada prototype
      User.prototype.sayHi = function() {
        alert(this.name);
      };
      
      // Penggunaan:
      let user = new User("John");
      user.sayHi();
      _0 menjadi
      // menjalankan Class User hanya dengan fungsi
      
      // 1. Membuat fungsi konstruktor
      function User(name) {
        this.name = name;
      }
      // sebuah fungsi prototipe memiliki properti "constructor" secara bawaannya,
      // jadi kita tidak perlu membuatnya
      
      // 2 menambahkan method pada prototype
      User.prototype.sayHi = function() {
        alert(this.name);
      };
      
      // Penggunaan:
      let user = new User("John");
      user.sayHi();
      1 untuk semua metode yang ada di
      // menjalankan Class User hanya dengan fungsi
      
      // 1. Membuat fungsi konstruktor
      function User(name) {
        this.name = name;
      }
      // sebuah fungsi prototipe memiliki properti "constructor" secara bawaannya,
      // jadi kita tidak perlu membuatnya
      
      // 2 menambahkan method pada prototype
      User.prototype.sayHi = function() {
        alert(this.name);
      };
      
      // Penggunaan:
      let user = new User("John");
      user.sayHi();
      2 nya

      Itu bagus, karena jika kita melakukan

      // menjalankan Class User hanya dengan fungsi
      
      // 1. Membuat fungsi konstruktor
      function User(name) {
        this.name = name;
      }
      // sebuah fungsi prototipe memiliki properti "constructor" secara bawaannya,
      // jadi kita tidak perlu membuatnya
      
      // 2 menambahkan method pada prototype
      User.prototype.sayHi = function() {
        alert(this.name);
      };
      
      // Penggunaan:
      let user = new User("John");
      user.sayHi();
      _3 pada sebuah objek, kita biasanya tidak menginginkan metode bawaan class nya

    3. Kelas selalu menggunakan

      // menjalankan Class User hanya dengan fungsi
      
      // 1. Membuat fungsi konstruktor
      function User(name) {
        this.name = name;
      }
      // sebuah fungsi prototipe memiliki properti "constructor" secara bawaannya,
      // jadi kita tidak perlu membuatnya
      
      // 2 menambahkan method pada prototype
      User.prototype.sayHi = function() {
        alert(this.name);
      };
      
      // Penggunaan:
      let user = new User("John");
      user.sayHi();
      4. (cek apa itu mode ketat)

    Selain itu, sintaks

    class User {
      constructor(name) { this.name = name; }
      sayHi() { alert(this.name); }
    }
    
    // bukti: User adalah sebuah fungsi
    alert(typeof User); // function
    5 menghadirkan banyak fitur lain yang akan kami bahas nantinya

    Sama seperti fungsi, kelas dapat didefinisikan denga ekspresi lain, diturunkan, dikembalikan, ditata, dll

    Berikut adalah contoh ekspresi kelas

    let User = class {
      sayHi() {
        alert("Hello");
      }
    };

    Mirip dengan fungsi Expressions yang memiliki nama, class expression juga mungkin memiliki nama

    Jika sebuah class expression memiliki nama, itu hanya terlihat di dalam class tersebut

    // "Class Expression yang memiliki nama"
    // ((tidak ada pembahasan dalam spesifikasinya, tapi itu mirip dengan function expression yang memiliki nama)
    let User = class MyClass {
      sayHi() {
        alert(MyClass); // Nama MyClass hanya terlihat di dalam kelas
      }
    };
    
    new User().sayHi(); //berjalan, menunjukkan definisi dari MyClass
    
    alert(MyClass); // error, Nama MyClass tidak bisa dilihat di luar kelas

    Kita bahkan dapat membuat kelas secara dinamis “sesuai permintaan”, seperti berikut

    function makeClass(phrase) {
      // deklrasikan sebuah class dan kembalikan class trsebut
      return class {
        sayHi() {
          alert(phrase);
        }
      };
    }
    
    // Membuat sebuah class baru
    let User = makeClass("Hello");
    
    new User().sayHi(); // Hello

    Sama seperti objek literal, class dapat menyertakan getter/setter serta properti yang telah diproses, dll

    Berikut adalah sebuah contoh untuk

    // menjalankan Class User hanya dengan fungsi
    
    // 1. Membuat fungsi konstruktor
    function User(name) {
      this.name = name;
    }
    // sebuah fungsi prototipe memiliki properti "constructor" secara bawaannya,
    // jadi kita tidak perlu membuatnya
    
    // 2 menambahkan method pada prototype
    User.prototype.sayHi = function() {
      alert(this.name);
    };
    
    // Penggunaan:
    let user = new User("John");
    user.sayHi();
    6 dengan implementasi menggunakan
    // menjalankan Class User hanya dengan fungsi
    
    // 1. Membuat fungsi konstruktor
    function User(name) {
      this.name = name;
    }
    // sebuah fungsi prototipe memiliki properti "constructor" secara bawaannya,
    // jadi kita tidak perlu membuatnya
    
    // 2 menambahkan method pada prototype
    User.prototype.sayHi = function() {
      alert(this.name);
    };
    
    // Penggunaan:
    let user = new User("John");
    user.sayHi();
    7

    class User {
    
      constructor(name) {
        this.name = name;
      }
    
      sayHi() {
        alert(this.name);
      }
    
    }
    
    // Cara penggunaan:
    let user = new User("John");
    user.sayHi();
    0

    Secara teknis, deklarasi kelas tersebut bekerja dengan membuat pengambil dan penyetel didalam

    class User {
      constructor(name) { this.name = name; }
      sayHi() { alert(this.name); }
    }
    
    // class adalah sebuah fungsi
    alert(typeof User); // function
    
    // ...atau, lebih tepatnya, Method constructor
    alert(User === User.prototype.constructor); // true
    
    // Method tersebut berada pada User.prototype, contoh:
    alert(User.prototype.sayHi); // alert(this.name);
    
    // Didalamnya terdapat dua method pada prototipe
    alert(Object.getOwnPropertyNames(User.prototype)); // constructor, sayHi
    0

    Berikut adalah sebuah contoh menggunakan method pada nama yang telah diproses pada bracket

    // menjalankan Class User hanya dengan fungsi
    
    // 1. Membuat fungsi konstruktor
    function User(name) {
      this.name = name;
    }
    // sebuah fungsi prototipe memiliki properti "constructor" secara bawaannya,
    // jadi kita tidak perlu membuatnya
    
    // 2 menambahkan method pada prototype
    User.prototype.sayHi = function() {
      alert(this.name);
    };
    
    // Penggunaan:
    let user = new User("John");
    user.sayHi();
    9

    class User {
    
      constructor(name) {
        this.name = name;
      }
    
      sayHi() {
        alert(this.name);
      }
    
    }
    
    // Cara penggunaan:
    let user = new User("John");
    user.sayHi();
    1

    Fitur seperti itu mudah diingat, karena mirip dengan objek literal

    Browser lama mungkin membutuhkan polyfill

    Bidang kelas adalah tambahan terbaru pada bahasa ini…

    Sebelumnya, kelas ini hanya memiliki method

    “Class field” adalah sebuah sintaks yang memungkinkan untuk menambahkan properti apa pun

    Sebagai contoh, mari kita tambahkan properti

    class User {
      constructor() {}
    }
    
    alert(typeof User); // function
    User(); // Error: Class constructor User cannot be invoked without 'new'
    0 pada
    class User {
      constructor(name) { this.name = name; }
      sayHi() { alert(this.name); }
    }
    
    // class adalah sebuah fungsi
    alert(typeof User); // function
    
    // ...atau, lebih tepatnya, Method constructor
    alert(User === User.prototype.constructor); // true
    
    // Method tersebut berada pada User.prototype, contoh:
    alert(User.prototype.sayHi); // alert(this.name);
    
    // Didalamnya terdapat dua method pada prototipe
    alert(Object.getOwnPropertyNames(User.prototype)); // constructor, sayHi
    2

    class User {
    
      constructor(name) {
        this.name = name;
      }
    
      sayHi() {
        alert(this.name);
      }
    
    }
    
    // Cara penggunaan:
    let user = new User("John");
    user.sayHi();
    2

    Jadi, kita hanya perlu menulis "=" pada saat proses deklarasi

    Perbedaan penting pada class field adalah bahwa class field tersebut diatur untuk objek individual, bukan pada

    class User {
      constructor(name) { this.name = name; }
      sayHi() { alert(this.name); }
    }
    
    // class adalah sebuah fungsi
    alert(typeof User); // function
    
    // ...atau, lebih tepatnya, Method constructor
    alert(User === User.prototype.constructor); // true
    
    // Method tersebut berada pada User.prototype, contoh:
    alert(User.prototype.sayHi); // alert(this.name);
    
    // Didalamnya terdapat dua method pada prototipe
    alert(Object.getOwnPropertyNames(User.prototype)); // constructor, sayHi
    0

    class User {
    
      constructor(name) {
        this.name = name;
      }
    
      sayHi() {
        alert(this.name);
      }
    
    }
    
    // Cara penggunaan:
    let user = new User("John");
    user.sayHi();
    3

    Kita juga dapat menetapkan nilai menggunakan ekspresi yang lebih kompleks dan memanggil fungsi

    class User {
    
      constructor(name) {
        this.name = name;
      }
    
      sayHi() {
        alert(this.name);
      }
    
    }
    
    // Cara penggunaan:
    let user = new User("John");
    user.sayHi();
    4

    Seperti yang ditunjukkan pada bab , fungsi di JavaScript memiliki

    class User {
      constructor() {}
    }
    
    alert(typeof User); // function
    User(); // Error: Class constructor User cannot be invoked without 'new'
    3 yang dinamis. Itu tergantung pada konteks pemanggilannya.

    Jadi, jika metode objek diteruskan dan dipanggil pada konteks lain,

    class User {
      constructor() {}
    }
    
    alert(typeof User); // function
    User(); // Error: Class constructor User cannot be invoked without 'new'
    3 tidak akan menjadi referensi ke objek itu lagi

    Sebagai contoh, kode dibawah ini akan menampilkan output

    class User {
      constructor() {}
    }
    
    alert(typeof User); // function
    User(); // Error: Class constructor User cannot be invoked without 'new'
    5

    class User {
    
      constructor(name) {
        this.name = name;
      }
    
      sayHi() {
        alert(this.name);
      }
    
    }
    
    // Cara penggunaan:
    let user = new User("John");
    user.sayHi();
    5

    Masalah itu terjadi karena memanggil

    class User {
      constructor() {}
    }
    
    alert(typeof User); // function
    User(); // Error: Class constructor User cannot be invoked without 'new'
    3 pada konteks lain

    Terdapat dua pendekatan cara untuk memperbaikinya, seperti yang telah kami diskusikan pada bab Function binding

    1. Meneruskan sebuah fungsi-wrapper, seperti
      class User {
        constructor() {}
      }
      
      alert(typeof User); // function
      User(); // Error: Class constructor User cannot be invoked without 'new'
      7
    2. Metode mengikat tersebut terhadap objek, seperti pada constructor

    Class field menyediakan sintaks lain yang cukup elegan

    class User {
    
      constructor(name) {
        this.name = name;
      }
    
      sayHi() {
        alert(this.name);
      }
    
    }
    
    // Cara penggunaan:
    let user = new User("John");
    user.sayHi();
    6

    Class field ini

    class User {
      constructor() {}
    }
    
    alert(typeof User); // function
    User(); // Error: Class constructor User cannot be invoked without 'new'
    _8 dibuat pada dasar tiap objek, ada sebuah fungsi terpisah pada tiap
    class User {
      constructor() {}
    }
    
    alert(typeof User); // function
    User(); // Error: Class constructor User cannot be invoked without 'new'
    9 objek, dengan
    class User {
      constructor() {}
    }
    
    alert(typeof User); // function
    User(); // Error: Class constructor User cannot be invoked without 'new'
    3 di dalamnya mereferensikan objek tersebut. Kita dapat melanjutkan
    class User {
      constructor() {}
    }
    
    alert(User); // class User { .. }
    1 di mana saja, dan nilai
    class User {
      constructor() {}
    }
    
    alert(typeof User); // function
    User(); // Error: Class constructor User cannot be invoked without 'new'
    3 akan selalu benar

    Itu akan sangat berguna pada lingkungan browser, terutama untuk event listener

    Sintaks class dasar terlihat seperti ini

    class User {
    
      constructor(name) {
        this.name = name;
      }
    
      sayHi() {
        alert(this.name);
      }
    
    }
    
    // Cara penggunaan:
    let user = new User("John");
    user.sayHi();
    7

    class User {
      constructor() {}
    }
    
    alert(User); // class User { .. }
    3 secara teknis adalah sebuah fungsi (yang kita sediakan sebagai
    class User {
      constructor() {}
    }
    
    alert(User); // class User { .. }
    _4), sedangkan method, getter, dan setter ditulis ke
    class User {
      constructor() {}
    }
    
    alert(User); // class User { .. }
    5

    Pada bab selanjutnya kita akan mempelajari lebih lanjut tentang kelas, termasuk pewarisan dan fitur lainnya