Pengambil dan penyetel javascript es6

Question

ECMAScript 2015 atau lebih dikenal dengan ES6 adalah spesifikasi selanjutnya untuk JavaScript. ES6 menghadirkan fitur-fitur menarik ke JavaScript termasuk peningkatan sintaks baru. Posting ini saya akan membahas sintaks Class baru. JavaScript telah menjadi bahasa berbasis prototipe menggunakan prototipe objek untuk membuat pewarisan objek dan penggunaan kembali kode. ES6 Class_ baru menambahkan sintaks baru di atas prototipe tradisional

Table of Contents Show

Konstruktor
Dapatkan dan Atur
Apa itu pengambil dan penyetel dalam JavaScript?
Bagaimana cara menggunakan pengambil dan penyetel di kelas JavaScript?
Bisakah Anda memiliki setter tanpa pengambil di JavaScript?
Bagaimana cara memanggil metode pengambil dalam JavaScript?

Sesuatu yang saya tidak bisa cukup tekankan adalah ________23______ baru adalah gula sintaksis pada prototipe. Di bawah tenda, Kelas ES6 masih menggunakan warisan prototipe. Jika Anda tidak terbiasa dengan prototipe, saya sarankan Anda membaca posting saya sebelumnya di JavaScript Prototypal Inheritance

Konstruktor

Di ES5 atau versi JavaScript yang didukung secara luas saat ini, kami menggunakan prototipe untuk membuat pewarisan objek. Sebelum ES6, kami menggunakan konstruktor fungsi yang mirip dengan ini

// ES5 Constructor Function
function Person(name) {
  this.name = name;
}

var bob = new Person('Bob');
console.log(bob.name); // Outputs 'Bob'

ES2015/ES6 memiliki kata kunci cadangan baru Class dengan pernyataan

// ES2015/ES6 Class
class Person {
  constructor(name) {
    this.name = name;
  }
}

let bob = new Person('Bob');
console.log(bob.name); // Outputs 'Bob'

2. Jadi persamaan ES2015/ES6 dari konstruktor fungsi

// ES2015/ES6 Class
class Person {
  constructor(name) {
    this.name = name;
  }
}

let bob = new Person('Bob');
console.log(bob.name); // Outputs 'Bob'

3 kita adalah sebagai berikut

// ES2015/ES6 Class
class Person {
  constructor(name) {
    this.name = name;
  }
}

let bob = new Person('Bob');
console.log(bob.name); // Outputs 'Bob'

_

Sintaks baru memberi kita pernyataan konstruktor khusus yang berjalan pada objek
penciptaan. Konstruktor berguna untuk logika inisialisasi objek apa pun

Metode

Selanjutnya, mari kita lihat menambahkan fungsi ke Person kita. Di ES5 kita akan memilikinya
sesuatu seperti ini

// ES5 adding a method to the Person prototype
Person.prototype.walk = function() {
  console.log(this.name + ' is walking.');
};

var bob = new Person('Bob');
bob.walk(); // Outputs 'Bob is walking.'

_

ES6 memberi kita sintaks yang jauh lebih ringkas dan bersih untuk mencapai tujuan yang sama

// ES6 Class adding a method to the Person prototype
class Person {
  constructor(name) {
    this.name = name;
  }

  walk() {
    console.log(this.name + ' is walking.');
  }
}

let bob = new Person('Bob');
console.log(bob.name); // Outputs 'Bob is walking'

Dapatkan dan Atur

Kelas ES6 menghadirkan sintaks baru untuk getter dan setter pada properti objek Get and set memungkinkan kita untuk menjalankan kode pada pembacaan atau penulisan properti. ES5 juga memiliki getter dan setter tetapi tidak digunakan secara luas karena browser IE yang lebih lama. Pengambil dan penyetel ES5 tidak memiliki sintaks sebaik yang diberikan ES6 kepada kita. Jadi mari kita buat

// ES2015/ES6 Class
class Person {
  constructor(name) {
    this.name = name;
  }
}

let bob = new Person('Bob');
console.log(bob.name); // Outputs 'Bob'

_4 dan

// ES2015/ES6 Class
class Person {
  constructor(name) {
    this.name = name;
  }
}

let bob = new Person('Bob');
console.log(bob.name); // Outputs 'Bob'

5 untuk properti name kita

// ES6 get and set
class Person {
  constructor(name) {
    this._name = name;
  }

  get name() {
    return this._name.toUpperCase();
  }

  set name(newName) {
    this._name = newName; // validation could be checked here such as only allowing non numerical values
  }

  walk() {
    console.log(this._name + ' is walking.');
  }
}

let bob = new Person('Bob');
console.log(bob.name); // Outputs 'BOB'

_

Di kelas kami di atas, kami memiliki pengambil dan penyetel untuk properti nama kami. Kami menggunakan konvensi

// ES2015/ES6 Class
class Person {
  constructor(name) {
    this.name = name;
  }
}

let bob = new Person('Bob');
console.log(bob.name); // Outputs 'Bob'

_6 untuk membuat bidang dukungan untuk menyimpan properti nama kami. Tanpa ini setiap kali get atau set dipanggil akan menyebabkan stack overflow. Get akan dipanggil dan yang akan menyebabkan get dipanggil berulang kali membuat loop tak terbatas

Sesuatu yang perlu diperhatikan adalah bahwa bidang dukungan kami

// ES2015/ES6 Class
class Person {
  constructor(name) {
    this.name = name;
  }
}

let bob = new Person('Bob');
console.log(bob.name); // Outputs 'Bob'

7 tidak bersifat pribadi. Seseorang masih dapat mengakses

// ES2015/ES6 Class
class Person {
  constructor(name) {
    this.name = name;
  }
}

let bob = new Person('Bob');
console.log(bob.name); // Outputs 'Bob'

_8 dan mengambil properti tersebut. Untuk mencapai status privat pada objek, Anda akan menggunakan ES6

// ES2015/ES6 Class
class Person {
  constructor(name) {
    this.name = name;
  }
}

let bob = new Person('Bob');
console.log(bob.name); // Outputs 'Bob'

9 dan

// ES5 adding a method to the Person prototype
Person.prototype.walk = function() {
  console.log(this.name + ' is walking.');
};

var bob = new Person('Bob');
bob.walk(); // Outputs 'Bob is walking.'

0 untuk membuat enkapsulasi dan status privat yang sebenarnya. Metode pribadi dapat dibuat menggunakan

// ES5 adding a method to the Person prototype
Person.prototype.walk = function() {
  console.log(this.name + ' is walking.');
};

var bob = new Person('Bob');
bob.walk(); // Outputs 'Bob is walking.'

_0 atau penutupan tradisional menggunakan IIFE. Menggunakan bahasa seperti TypeScript, Anda bisa mendapatkan penegakan waktu kompilasi dari properti dan metode pribadi

Warisan

Sekarang mari kita lihat pewarisan menggunakan prototipe tradisional dalam sintaks ES5. Kami akan membuat objek

// ES5 adding a method to the Person prototype
Person.prototype.walk = function() {
  console.log(this.name + ' is walking.');
};

var bob = new Person('Bob');
bob.walk(); // Outputs 'Bob is walking.'

_2 untuk mewarisi objek

// ES2015/ES6 Class
class Person {
  constructor(name) {
    this.name = name;
  }
}

let bob = new Person('Bob');
console.log(bob.name); // Outputs 'Bob'

3 kami. Objek programmer kami akan mewarisi orang dan juga memiliki metode ________4______4

// ES5 Prototype inheritance
function Programmer(name, programmingLanguage) {
  this.name = name;
  this.programmingLanguage = programmingLanguage;
}

Programmer.prototype = Object.create(Person.prototype);
Programmer.prototype.constructor = Programmer;

Programmer.prototype.writeCode = function() {
  console.log(this.name + ' is coding in ' + this.programmingLanguage + '.');
};

var cory = new Programmer('Cory', 'JavaScript');
cory.walk(); // Outputs 'Cory is walking.'
cory.writeCode(); // Outputs 'Cory is coding in JavaScript.'

Sekarang mari kita lihat sintaks Kelas ES6 baru untuk pewarisan menggunakan kata kunci

// ES5 adding a method to the Person prototype
Person.prototype.walk = function() {
  console.log(this.name + ' is walking.');
};

var bob = new Person('Bob');
bob.walk(); // Outputs 'Bob is walking.'

5

class Programmer extends Person {
  constructor(name, programmingLanguage) {
    super(name);
    this.programmingLanguage = programmingLanguage;
  }

  writeCode() {
    console.log(
      this._name + ' is coding in ' + this._programmingLanguage + '.'
    );
  }
}

let cory = new Programmer('Cory', 'JavaScript');
cory.walk(); // Outputs 'Cory is walking.'
cory.writeCode(); // Outputs 'Cory is coding in JavaScript.'

Anda dapat melihat sintaks kelas menawarkan sintaks yang bersih untuk pewarisan prototypal. Satu detail yang mungkin Anda perhatikan adalah kata kunci

// ES5 adding a method to the Person prototype
Person.prototype.walk = function() {
  console.log(this.name + ' is walking.');
};

var bob = new Person('Bob');
bob.walk(); // Outputs 'Bob is walking.'

_6. Kata kunci super memungkinkan kita memanggil objek induk yang diwariskan. Ini adalah saran yang baik untuk menghindari hal ini karena ini dapat menyebabkan sambungan yang lebih erat antara objek Anda, tetapi ada saat-saat yang tepat untuk digunakan. Dalam hal ini, dapat digunakan dalam konstruktor untuk menetapkan ke super konstruktor. Jika konstruktor Person berisi logika apa pun, getter atau setter khusus untuk properti nama, kami ingin menggunakan super dan tidak menduplikasi logika di kelas Programmer. Jika konstruktor tidak ditentukan pada kelas anak, konstruktor kelas super akan dipanggil secara default

Ringkasan

Berikut adalah tampilan terakhir kelas Person dan Programmer kami. Getter dan setter tidak diperlukan dalam kasus penggunaan ini tetapi ada untuk mendemonstrasikan sintaks baru

class Person {
  constructor(name) {
    this._name = name;
  }

  get name() {
    return this._name;
  }

  set name(newName) {
    this._name = newName;
  }

  walk() {
    console.log(this._name + ' is walking.');
  }
}

class Programmer extends Person {
  constructor(name, programmingLanguage) {
    super(name);
    this._programmingLanguage = programmingLanguage;
  }

  get programmingLanguage() {
    return this._programmingLanguage;
  }

  set programmingLanguage(newprogrammingLanguage) {
    this._programmingLanguage = newprogrammingLanguage;
  }

  writeCode() {
    console.log(
      this._name + ' is coding in ' + this._programmingLanguage + '.'
    );
  }
}

let bob = new Person('Bob');
bob.walk();

let cory = new Programmer('Cory', 'JavaScript');
cory.walk();
cory.writeCode();
console.log(cory.name);

Sebuah kodepen. io demo dari kode di atas dapat ditemukan di sini. Kelas ES6 membawa gula sintaksis ke prototipe. Ingatlah bahwa semua kelas ES6 adalah gula sintaksis. Ingat kelas hanyalah salah satu dari banyak opsi untuk mengatur dan menyusun kode. Ada banyak pola desain hebat lainnya untuk penggunaan kembali kode seperti pola modul

ES6 membawa beberapa perbaikan besar untuk menjadikan JavaScript sebagai bahasa pemrograman yang lebih produktif dan telah diimplementasikan di browser saat ini. Untuk mulai menulis ES6 hari ini, periksa Babel JS (sebelumnya 6to5) sebuah transpiler yang mengubah JavaScript ES6 ke ES5

Apa itu pengambil dan penyetel dalam JavaScript?

Dalam JavaScript, properti pengakses adalah metode yang mendapatkan atau menyetel nilai objek . Untuk itu, kami menggunakan dua kata kunci ini. get - untuk menentukan metode pengambil untuk mendapatkan nilai properti. set - untuk menentukan metode setter untuk mengatur nilai properti.

Bagaimana cara menggunakan pengambil dan penyetel di kelas JavaScript?

Gunakan kata kunci dapatkan dan setel untuk menentukan pengambil dan penyetel JavaScript untuk kelas atau objek . Kata kunci get mengikat properti objek ke metode yang akan dipanggil saat properti itu dicari. Kata kunci set mengikat properti objek ke metode yang akan dipanggil saat properti itu ditetapkan.

Bisakah Anda memiliki setter tanpa pengambil di JavaScript?

Pengambil atau penyetel kadang-kadang bisa sangat berguna, tetapi mereka hanya perlu digunakan ketika fungsi spesifiknya diperlukan - jika tidak akses properti biasa tanpa pengambil atau penyetel dapat dilakukan . .