Fitur Baru JavaScript ES6 Gunakan metode baru untuk mendefinisikan kelas

ES6 (Ecmascript 6) adalah standar untuk versi baru bahasa JavaScript yang akan datang, dengan nama kode harmoni (makna harmoni jelas tidak mengikuti kecepatan negara saya, kami telah memasuki versi impian Cina). Standar terakhir dirumuskan sebagai ES5, yang dikeluarkan pada tahun 2009. Saat ini, standardisasi ES6 sedang berlangsung, dan versi yang diselesaikan secara resmi diharapkan akan dirilis pada Desember 2014. Tetapi sebagian besar standar siap, dan dukungan untuk ES6 oleh browser juga sedang diimplementasikan.

Cara untuk mendefinisikan kelas di ES6 adalah gula sintaks untuk mendefinisikan kelas dalam ES3 dan ES5. Meskipun ada beberapa perbedaan, cara keseluruhan untuk mendefinisikan kelas lebih ringkas dan warisan kelas lebih nyaman. Jika Anda ingin lebih akrab dengan warisan di ES6, yang terbaik adalah memahami metode prototipe warisan di ES5. Ada banyak artikel di taman blog yang mengatakan warisan JS. Siswa yang ingin memiliki pemahaman mendalam akan mencarinya sendiri;

Tentukan kelas:

Setiap kelas yang ditentukan menggunakan metode kelas memiliki fungsi konstruktor secara default. Fungsi ini adalah fungsi utama dari fungsi konstruktor. Ini di dalam tubuh fungsi menunjuk ke instance yang dihasilkan. Say () {} adalah metode pada prototipe. Kami mendefinisikan kelas sederhana:

Jalankan kode berikut

 "Gunakan ketat"; class person {constructor (name) {this.name = name; } say () {console.log ("Say hai"); }}; orang baru (). Say (); // Konsol akan output menyapa

Catatan: Kelas yang dinyatakan dalam ES6 tidak memiliki masalah deklarasi fungsi sebelumnya. Kelas harus dinyatakan terlebih dahulu dan kemudian digunakan, jika tidak, pengecualian akan terjadi. Kami hanya mengubah posisi kode dalam demo di atas dan segera melaporkan kesalahan. (Jika Anda memahaminya dengan pemikiran di ES5, kelas yang dinyatakan tidak menyatakan sebelumnya. Untuk poin pengetahuan tentang deklarasi sebelumnya, kelas yang dideklarasikan melalui nama kelas {} adalah nama kelas var = fungsi () {});

Jalankan kode berikut

 "Gunakan ketat"; orang baru (). Say (); class Person {constructor (name) {this.name = name; } say () {console.log ("Say hai"); }};

Metode statis untuk mendefinisikan fungsi:

Jika statis dinyatakan dalam kawat gigi sebelum nama fungsi saat mendefinisikan fungsi, maka fungsi ini adalah fungsi statis, metode statis, dan tidak ada hubungannya dengan prototipe:

Jalankan kode berikut

 "Gunakan ketat"; class person {constructor (name) {this.name = name; } static mengatakan () {console.log ("say hai"); }}; Person.say ();

Tentukan metode prototipe:

Tentukan metode prototipe dan nyatakan secara langsung seperti ini: nama fungsi () {}, tanda kurung adalah daftar parameter, dan kawat gigi adalah blok kode. Metode untuk menentukan prototipe dalam ES5 adalah menggunakan: konstruktor.prototype. Name metode prototipe () {}. Bentuk tulisan ini sangat rumit. Cara untuk mendefinisikan prototipe menggunakan ES6 sedikit seperti Java dan C#. Ini adalah karakteristik bahasa tingkat yang relatif tinggi:

Jalankan kode berikut

 "Gunakan ketat"; class person {constructor (name) {this.name = name; } say () {console.log ("Say hai"); } sing () {console.log ("lalalala"); }}; orang baru (). Say (); // output: katakanlah hinev person (). Sing (); // Output: Lalalalala

Properti Statis dan Properti Prototipe:

Agak sulit untuk mendefinisikan sifat statis setelah definisi kelas selesai. Penulis bahasa mengimplementasikan metode ini untuk menghindari kebingungan kode. Semua sifat statis didefinisikan di tempat yang sama, jadi bagaimana kode ini lebih distandarisasi?

Jalankan kode berikut

 "Gunakan ketat"; class person {constructor (name) {this.name = name; }}; Person.hands = 2; console.log (person.hands);

Atribut tidak dapat didefinisikan pada prototipe. Kami hanya dapat mendefinisikan set dan mendapatkan prototipe, nilai, dan setter. Perhatikan bahwa nilai dan setter ada di prototipe ...:

Jalankan kode berikut

 class person {constructor (_name) {this._name = _name; } get name () {return this._name; } atur name (_name) {this._name = _name; }} var p = orang baru (); p.name = "heheda"; console.log (p.name); // output: hehedaconsole.log (p._name); // Output: Heheda

Jika Anda ingin mendefinisikan atribut prototipe, cukup tentukan atribut di dalam konstruktor. Jika diwariskan, subkelas juga akan mewarisi atribut kelas induk:

Jalankan kode berikut

 class person {constructor () {this.name = "default"; }} class man memperluas orang {konstruktor () {super (); }} console.log (new man (). name);

Warisan meluas dari kelas:

ES5 sudah memiliki warisan, tetapi warisan semacam ini sering beredar. ES6 Warisan hanya didasarkan pada prototipe warisan enkapsulasi (Sinonim gula). Meskipun memang jauh lebih sederhana, warisan Java lebih mudah dipelajari. Sman dalam contoh demo berikut berarti Superman, jangan berpikir begitu;

Jalankan kode berikut

 "Gunakan ketat"; class person {constructor (name) {this.name = name; } say () {console.log ("Say hai"); kembalikan ini; }}; class sman memperluas orang {konstruktor (name, power) {super (name); this.superpower = power; } show () {console.log (this.superpower); kembalikan ini; }} console.log (new sman ("clark", "pee"). show (). say (). name); // output: kencing menyapa clark

Jika Anda ingin menggunakan warisan, super () harus dieksekusi dalam subkelas untuk menghubungi kelas induk. Kalau tidak, kompiler akan melakukan kesalahan. Super di subclass memiliki tiga fungsi. Yang pertama adalah menyebutnya secara langsung sebagai konstruktor, yang kedua adalah bertindak sebagai instance dari kelas induk, dan yang ketiga adalah memanggil metode statis kelas induk dalam metode statis dalam subkelas;

Perbedaan utama antara warisan ES6 dan warisan ES5. Warisan yang umum digunakan dalam ES5 adalah untuk mengatur prototipe subclass sebagai instance dari kelas induk. Subkelas secara alami memiliki semua metode dan sifat kelas induk:

Jalankan kode berikut

 var sup = function () {this.sub = true;}; sup.prototype.protoSup = {sup: "sup"}; var sub = fungsi () {this.sub = true;}; sub.prototype = SUP baru (); // mewarisi prototipe; Sub.prototype.constructor = sub; // perbaiki konstruktor;

Warisan yang diterapkan dalam ES6 lebih indah dan tidak akan terganggu oleh kelas induk. Warisan ini merupakan kombinasi dari apply warisan dan implementasi warisan prototipe:

Jalankan kode berikut

 var sup = function () {this.sub = true;}; var sub = function () {this.sup = true; Sup.Apply (ini); // mewarisi sifat dan metode ini;}; sub .__ proto__ = sup; // mewarisi sifat statis sup; Sub.prototype = object.create (sup.prototype, {constructor: {value: sub, enumerable: false, writable: true, configable: true}}); // mewarisi atribut prototipe dan menimpa konstruktor;

Lebih mudah untuk melihat perbedaan antara keduanya dengan gambar, dan gambar menunjukkan perbedaan antara warisan antara ES5 dan ES6: http://keenwon.com/1524.html;

ES5 mensimulasikan warisan ES6:

Karena Babel Transcoder, kita dapat menggunakan kode ES5 untuk mengeksplorasi bagaimana warisan ES6 diimplementasikan, dan warisan ES6:

Jalankan kode berikut

 "Gunakan ketat"; class person {constructor (name) {this.name = name; } say () {console.log ("Say hai"); kembalikan ini; }}; class sman memperluas orang {konstruktor (name, power) {super (name); this.superpower = power; } show () {console.log (this.superpower); kembalikan ini; }} console.log (new sman ("clark", "pee"). show (). say (). name);

Setelah menggunakan Babel untuk mengubahnya menjadi ES5, kode menjadi seperti ini. Saya menambahkan sedikit komentar sendiri, memaafkan saya karena menjadi kebebasan yang tidak menyenangkan dan penuh kasih ...:

Jalankan kode berikut

 var _createClass = function () {function definEproPerties (target, props) {for (var i = 0; i <props.length; i ++) {var descriptor = props [i]; descriptor.enumerable = descriptor.enumerable || PALSU; descriptor.configurable = true; if ("nilai" dalam deskriptor) deskriptor.writable = true; Object.defineproperty (target, deskriptor.key, deskriptor); }} return function (konstruktor, protoprops, staticprops) {// Salin prototipe if (protoprops) DefinEproPerties (constructor.prototype, protoprops); // Salin properti jika (staticprops) defloPerties (konstruktor, staticprops); Konstruktor kembali; }; } (); function _classCallCheck (instance, constructor) {if (! (Instance dari konstruktor)) {lempar typeError baru ("Tidak dapat memanggil kelas sebagai fungsi"); }} function _possibleconstructorReturn (self, call) {if (! self) {lempar referensi baru ("Ini belum diinisialisasi - super () belum dipanggil"); } return call && (typeof call === "objek" || typeof call === "function")? Panggilan: Diri; } // Berikut ini adalah kode yang dinyatakan dalam warisan ES6. _inherits implements the inheritance of the prototype and the inheritance of the parent class state attributes: function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } // mewarisi prototipe kelas induk dan memperbaiki konstruktor sebagai subkelas; subclass.prototype = object.create (superclass && superclass.prototype, {constructor: {value: subclass, enumerable: false, writable: true, configable: true}}); // Tentukan __proto__ untuk objek subkelas, sehingga warisan atribut statis dapat dicapai; if (superclass) object.setPrototypeOf? Object.setPrototypeOf (Subclass, Superclass): Subclass .__ Proto__ = Superclass; // The Last If the Developer: New Subclass, status aktual adalah: objek {__proto __: kelas induk, konstruktor: subkelas}}; /* var sup = function () {}; var sub = function () {}; _inHerity (sub, sup); // makna implementasi warisan ini; Sebagai subclass dari objek mewarisi kelas induk, sebagai konstruktor, subkelas mewarisi sub.prototype .__ proto__ === Sup.prototype // true sub.prototype.constructor === sub; // Sub .__ Proto__ === SUP; // true */var person = function () {name) {name) {{{{{{{{{{{{function {{function {function {function {function {function {function {{function {{function {function () {function () () {function () () {function () {function () {function () this.name = name; } _createClass (orang, [{key: "katakan", value: function mengatakan () {console.log ("say hai"); kembalikan ini;}}]); orang yang kembali; } (); ; var sman = fungsi (_person) {_inHerity (sman, _person); fungsi sman (name, power) {// Pada saat ini ini .__ proto__ telah menunjuk ke prototipe konstruktor _classcallcheck (ini, sman); // Kalimat ini setara dengan super () di ES6, melewati atribut kelas induk melalui panggilan, dan melaksanakan warisan; var _this = _possibleconstructorReturn (this, object.getPrototypeOf (sman) .call (ini, nama)); _this.superpower = power; // Dynamic Return _This; mengembalikan _ ini; } _createClass (sman, [{key: "show", value: function show () {console.log (this.superpower); kembalikan ini;}}]); Kembalikan Sman; }(Orang); Console.log (New Sman ("Clark", "Pee"). Show (). Say (). Nama);

Warisan berganda:

Gunakan Mix-In untuk mencapai beberapa warisan, dan metode penulisan adalah: Kelas Sub memperluas campuran (OBJ0, OBJ1, OBJ2). Campuran hanyalah sebuah metode, kita perlu mendefinisikan metode ini sendiri:

Jalankan kode berikut

 <html> <head> <meta charset = "utf-8"> </head> <body> <script> "menggunakan ketat"; function mix (... mixins) {class mix {} untuk (biarkan mixin dari mixins) {copyProperties (campuran, mixin); CopyProperties (Mix.Prototype, Mixin.Prototype); } return mix; } function copyProperties (target, sumber) {for (mari kunci cermin.ownkeys (sumber)) {if (key! == "constructor" && key! == "prototipe" && key! == "name") {let desc = object.getOwnPropertyDescriptor (sumber, key); Object.defineproperty (target, kunci, desc); }}} class man {work () {console.log ("working"); }} class woman {say () {console.log ("bilang"); }} kelas Superman memperluas campuran (pria, wanita) {konstruktor () {super (); }} var sm = superman baru (); sm.work (); sm.say (); // Faktanya, mereka tidak memiliki hubungan warisan, mereka hanya menyalin atribut ke subkelas; console.log (sm instance dari manusia); console.log (sm instance dari wanita); </script> </body> </html>

Di atas adalah pengetahuan yang relevan tentang fitur -fitur baru JavaScript ES6 yang diperkenalkan oleh editor kepada Anda. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!