Ruang lingkup level blok
ES5 tidak memiliki ruang lingkup tingkat blok, hanya ruang lingkup global dan ruang lingkup fungsi. Karena ini, ruang lingkup variabel sangat luas, jadi Anda harus membuatnya segera setelah Anda memasuki fungsi. Ini menyebabkan peningkatan variabel yang disebut.
Fitur "peningkatan variabel" dari ES5 sering menyebabkan kesalahan jika Anda tidak hati -hati:
1. Variabel dalam mencakup variabel luar
var tmp = date baru (); fungsi f () {console.log (tmp); if (false) {// jalankan tmp = hello world ";}} yang tidak terdefinisi2. Variabel kebocoran ke dalam variabel global
var s = 'hello'; for (var i = 0; i <s.length; i ++) {console.log (s [i]);} console.log (i); // 5Di masa lalu kita sering menggunakan penutupan untuk menyelesaikan masalah ini (seperti fungsi yang dieksekusi sendiri). Sekarang, berdasarkan masalah ini, ES6 telah menambahkan ruang lingkup tingkat blok, jadi tidak perlu menjalankan fungsi dengan sendirinya.
Let and Const
ES6 kompatibel ke belakang, dan mempertahankan kompatibilitas ke belakang berarti tidak pernah mengubah perilaku kode JS pada platform web, sehingga ruang lingkup variabel yang dibuat oleh VAR masih akan menjadi ruang lingkup global dan ruang lingkup fungsi. Dengan cara ini, bahkan jika Anda memiliki ruang lingkup level blok, ia tidak dapat menyelesaikan masalah "variabel peningkatan" ES5. Oleh karena itu, di sini ES6 telah menambahkan dua kata kunci baru: Let and Const.
1. Biarkan
"Let adalah var yang lebih sempurna", ia memiliki aturan ruang lingkup yang lebih baik.
2.cons
Const menyatakan konstanta read-only. Setelah dinyatakan, nilai konstanta tidak dapat diubah, tetapi objek yang dideklarasikan oleh Const dapat memiliki perubahan properti (objek objek freeze. Freeze)
const a = []; a.push ('halo'); // dapat dieksekusi a = ['Dave']; // Laporkan kesalahanAnda juga dapat menggunakan objek. Freeze untuk membekukan objek
const foo = object.freeze ({}); // Dalam mode normal, baris berikut tidak berfungsi; // Dalam mode ketat, baris akan melaporkan kesalahan foo.prop = 123; //Gunakan Let and Const:
• Variabel hanya valid dalam lingkup level blok di mana deklarasi berada
• Deklarasi variabel hanya dapat digunakan (zona mati sementara)
• Variabel tidak dapat didefinisikan berulang kali
• Variabel global yang dinyatakan, atribut yang bukan milik objek global
var a = 1; window.a // 1let b = 1; window.b // tidak ditentukan
Kata kunci ini
Kita tahu bahwa ini dalam fungsi ES5 menunjuk ke ruang lingkup di mana runtime berada. Misalnya
function foo () {setTimeout (function () {console.log ('id:', this.id);}, 100);} var id = 21; foo.call ({id: 42}); // id: 21Di sini saya mendeklarasikan fungsi foo, yang secara internal merupakan penyelesaian fungsi tunda, mencetak ini.id setiap 100ms. Kami menyebutnya melalui foo.call ({id: 42}) dan atur ruang lingkup untuk fungsi ini. Dibutuhkan 100 milidetik untuk benar -benar mengeksekusi. Karena ini menunjuk ke ruang lingkup di mana runtime berada, ini di sini menunjuk ke jendela objek global, bukan fungsi foo. Di Sini:
• Gunakan panggilan untuk mengubah konteks eksekusi FOO sehingga konteks eksekusi fungsi tidak lagi jendela, sehingga dapat membedakan pointer ini di SetTimeout
• Metode SetTimeout digantung di bawah objek jendela, jadi ini menunjuk ke ruang lingkup eksekusi - objek jendela.
Kode yang disebut Timeout dijalankan dalam ruang lingkup global, sehingga nilai ini dalam fungsi menunjuk ke objek jendela dalam mode non-ketat, dan tidak terdefinisi dalam mode ketat-《JavaScript Programming Advanced》
Untuk mengatasi masalah ini, praktik kami yang biasa adalah menetapkan ini ke variabel lain:
function foo () {var that = this; setTimeOut (function () {console.log ('id:', that.id);}, 100);} var id = 21; foo.call ({id: 42}); // id: 42Sekarang ES6 telah meluncurkan fungsi panah untuk menyelesaikan masalah ini.
Fungsi panah
Identifier => Ekspresi
var sum = (num1, num2) => {return num1 + num2; } // setara dengan var sum = fungsi (num1, num2) {return num1 + num2;};• Jika fungsi hanya memiliki satu parameter, tanda kurung dapat dihilangkan
• Jika fungsi hanya memiliki satu pernyataan pengembalian, kawat gigi dan pengembalian dapat dihilangkan
• Jika fungsi mengembalikan objek secara langsung, tanda kurung harus ditambahkan di luar objek. (Karena objek kosong {} dan blok kosong {} terlihat persis sama. Jadi Anda perlu membungkus objek secara literal dalam tanda kurung.)
Menanggapi masalah kata kunci ini, ES6 menentukan ruang lingkup di mana ikatan ini didefinisikan dalam fungsi panah, daripada menunjuk ke ruang lingkup di mana runtime berada. Karena titik ini, titik ini telah diperbaiki, yang kondusif untuk merangkum fungsi panggilan balik.
function foo () {var that = this; setTimeOut (() => {console.log ('id:', that.id);}, 100);} var id = 21; foo.call ({id: 42}); // id: 42Catatan: Fiksasi yang menunjuk ke fungsi panah ini bukan karena ada mekanisme untuk mengikat ini di dalam fungsi panah. Alasan sebenarnya adalah bahwa fungsi panah tidak memiliki ini sama sekali. Fungsi panah tidak memiliki ini sendiri sama sekali, dan internal ini adalah ini di blok kode luar. Ini mengarah ke:
• tidak dapat digunakan sebagai konstruktor
• Anda tidak dapat menggunakan call (), apply (), bind () dan metode lain untuk mengubah arah ini
Kelas dan warisan
Ecmascript tradisional tidak memiliki konsep kelas. Ini menggambarkan konsep rantai prototipe dan menggunakan rantai prototipe sebagai metode utama untuk mengimplementasikan warisan. Ide dasarnya adalah menggunakan prototipe untuk memungkinkan satu jenis referensi mewarisi sifat dan metode jenis referensi lain. Cara tradisional untuk mencapai perilaku ini adalah melalui konstruktor:
titik fungsi (x, y) {this.x = x; this.y = y;} point.prototype.toString = function () {return '(' + this.x + ',' + this.y + ')';}; var p = titik baru (1, 2);Di sini, titik konstruktor akan memiliki objek prototipe (prototipe), yang berisi pointer ke titik (konstruktor), dan instance p berisi pointer internal ke objek prototipe (prop). Jadi seluruh warisan diimplementasikan melalui rantai prototipe. Untuk detailnya, lihat artikel saya: prototipe dan konstruktor saya di JavaScript ini
kelas
ES6 memberikan gaya penulisan yang lebih dekat dengan bahasa tradisional, memperkenalkan konsep kelas sebagai templat untuk objek. Melalui kata kunci kelas, Anda dapat mendefinisikan kelas. Tetapi kelas hanyalah gula sintaksis untuk pola berorientasi objek berbasis prototipe. Ada ulasan beragam tentang pengenalan kelas, dan banyak orang berpikir itu adalah cacat besar, tetapi bagi saya, itu adalah gula sintaks yang baik, karena cara biasa mewarisi rantai prototipe sering dapat membungkus saya untuk sementara waktu.
// Tentukan titik kelas titik {konstruktor (x, y) {this.x = x; this.y = y;} toString () {return '(' + this.x + ',' + this.y + ')';}} var p = titik baru (1, 2);• Ada metode konstruktor di kelas, yang merupakan metode default kelas. Metode ini secara otomatis dipanggil saat menghasilkan instance objek melalui perintah baru. Kelas harus memiliki metode konstruktor. Jika tidak didefinisikan secara eksplisit, metode konstruktor kosong akan ditambahkan secara default.
• Kata kunci ini dalam metode konstruktor mewakili objek instan.
• Saat mendefinisikan metode "kelas" (seperti tostring dalam contoh di atas), Anda tidak perlu menambahkan fungsi kata kunci sebelum itu, cukup masukkan definisi fungsi. Selain itu, tidak ada pemisahan koma antara metode, karena kesalahan akan dilaporkan jika ditambahkan.
• Saat menggunakannya, Anda juga menggunakan perintah baru secara langsung di kelas, yang persis sama dengan penggunaan konstruktor.
• Semua metode kelas didefinisikan pada properti prototipe kelas
Warisan kelas - Perpanjang
Warisan antar kelas dapat dicapai melalui kata kunci Extends, yang jauh lebih jelas dan lebih nyaman daripada warisan ES5 dengan memodifikasi rantai prototipe.
kelas ColorPoint memperluas titik {konstruktor (x, y, warna) {super (x, y); // Panggil konstruktor (x, y) dari kelas induk (x, y) this.color = color;} tostring () {return this.color + '' + super.toString (); // hubungi tostring () dari kelas induk}}• Kata kunci super, ketika dipanggil sebagai fungsi (mis. Super (... args)), mewakili konstruktor kelas induk; Ketika disebut sebagai objek (mis. Super.prop atau super.method ()), mewakili kelas induk. Di sini, itu mewakili konstruktor kelas induk dan digunakan untuk membuat objek kelas induk ini.
• Subkelas harus memanggil metode super dalam metode konstruktor, jika tidak, kesalahan akan dilaporkan saat membuat instance baru. Ini karena subclass tidak memiliki objek ini sendiri, tetapi mewarisi objek kelas induk ini dan kemudian memprosesnya. Jika metode super tidak dipanggil, subclass tidak akan mendapatkan objek ini.
Modular
Secara historis, JavaScript tidak pernah memiliki sistem modul, dan tidak mungkin untuk membagi program besar menjadi file -file kecil yang saling bergantung dan kemudian merakitnya dengan cara yang sederhana, yang telah menciptakan hambatan besar untuk pengembangan proyek besar dan kompleks. Untuk beradaptasi dengan pengembangan modul besar, masyarakat telah merumuskan beberapa solusi pemuatan modul, seperti CMD dan AMD.
Penulisan modular ES6:
impor {stat, ada, readfile} dari 'fs';Inti dari kode di atas adalah memuat 3 metode dari modul FS, dan metode lainnya tidak dimuat. Pemuatan semacam ini disebut "pemuatan waktu kompilasi", yaitu, ES6 dapat menyelesaikan pemuatan modul pada waktu kompilasi, yang lebih efisien daripada metode pemuatan modul CommonJS. Tentu saja, ini juga mengarah pada ketidakmampuan untuk merujuk modul ES6 itu sendiri, karena itu bukan objek.
Fungsi modul terutama terdiri dari dua perintah:
•ekspor
Antarmuka eksternal yang digunakan untuk menentukan modul dan antarmuka eksternal harus membangun hubungan korespondensi satu-ke-satu dengan variabel di dalam modul.
// Tulis metode satu ekspor var m = 1; // kesalahan ekspor 1; // tulis metode dua var m = 1; ekspor {m}; // kesalahan ekspor m; // tulis metode tiga penamaan var n = 1; ekspor {n as m};•impor
Digunakan untuk memasukkan fungsi yang disediakan oleh modul lain. Ia menerima suatu objek (diwakili dalam kawat gigi) yang menentukan nama variabel yang akan diimpor dari modul lain (juga dapat dimuat menggunakan * secara total)
Interpolasi string
Dalam pengembangan JavaScript, kita sering perlu menampilkan template seperti ini:
fungsi sayshello (name) {return "halo, nama saya adalah"+name+"i am"+getage (18);} function getage (usia) {return usia;} sayhello ("brand") // "halo, nama saya merek saya berusia 18" "Kita perlu menggunakan + untuk menggabungkan string dan variabel (atau ekspresi). Contohnya relatif sederhana, sehingga tampak tidak berbahaya, tetapi begitu mereka lebih rumit, mereka akan tampak cukup rumit dan tidak nyaman, dan penggunaan ini juga membuat kita melelahkan. Dalam hal ini, ES6 memperkenalkan string template, yang dapat dengan mudah dan anggun memasukkan nilai JS ke dalam string.
String template
Untuk string template, itu:
• Kemas dengan backticks ``;
• Gunakan $ {} untuk nilai output;
• Konten dalam $ {} dapat berupa ekspresi JavaScript apa pun, jadi panggilan fungsi dan operasi aritmatika legal;
• Jika suatu nilai bukan string, itu akan dikonversi menjadi string;
• Simpan semua spasi, Newline dan Indents dan output mereka ke string hasil (string multi-baris dapat ditulis)
• Gunakan backtick dan kawat gigi secara internal untuk melarikan diri, dan menggunakan backslash/
Untuk contoh di atas, string template ditulis sebagai berikut:
fungsi sayshello (name) {return `halo, nama saya $ {name} saya $ {getage (18)}`;} function getage (usia) {return usia;} sayhello ("brand") // "halo, nama saya Brandi am 18" "Mode ketat
Salah satu tujuan mode yang ketat adalah untuk memungkinkan debugging kesalahan yang lebih cepat. Cara terbaik untuk membantu pengembang debug adalah dengan melemparkan kesalahan ketika pola tertentu terjadi alih-alih gagal diam-diam atau menunjukkan perilaku aneh (sering terjadi dalam mode non-ketat). Kode dalam mode ketat akan melempar lebih banyak pesan kesalahan, yang dapat membantu pengembang dengan cepat melihat beberapa masalah yang harus segera diselesaikan. Dalam ES5, mode ketat adalah opsional, tetapi dalam ES6, banyak fitur memerlukan penggunaan mode ketat, yang membantu kita menulis javascript yang lebih baik.
Di atas adalah masalah "cacat" ES6 meningkatkan javascript 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!