Memahami Konstruktor Javascript
Memahami konstruktor JavaScript
Memiliki pemahaman yang baik wacana konstruktor sangat penting untuk benar-benar memahami bahasa JavaScript . Tidak ibarat banyak bahasa lainnya , JavaScript tidak mendukung kelas , tetapi mempunyai konstruktor untuk membawa fungsionalitas ibarat dengan JavaScript . Dalam tutorial ini , kita akan mengeksplorasi konstruktor secara rinci dan melihat bagaimana JavaScript memanfaatkan mereka untuk membuat objek .
Konstruktor ibarat fungsi biasa, tapi kami menggunakannya dengan kata kunci " gres " . Ada dua jenis konstruktor : orisinil ( alias built -in ) konstruktor ibarat Array dan Object , yang tersedia secara otomatis di lingkungan sanksi pada ketika runtime ; dan konstruktor kustom , yang memilih sifat dan metode untuk jenis Anda sendiri objek .
Sebuah konstruktor mempunyai kegunaan ketika Anda ingin membuat beberapa objek yang sama dengan sifat dan metode yang sama . Ini yaitu konvensi untuk memanfaatkan nama konstruktor untuk membedakan mereka dari fungsi biasa . Perhatikan isyarat berikut :
function Book() {
// unfinished code
}
var myBook = new Book();
Baris terakhir isyarat membuat sebuah instance dari Buku dan memperlihatkan ke variabel ; meskipun konstruktor Book tidak melaksanakan apa-apa , MyBook masih sebuah pola dari itu . Seperti yang Anda lihat tidak ada perbedaan antara fungsi ini dan fungsi biasa kecuali bahwa kita menyebutnya dengan kata kunci gres dan nama fungsi dikapitalisasi .
Menentukan Jenis Instance
Untuk mengetahui apakah sebuah objek yaitu instance dari satu sama lain , kita memakai operator instanceof :
myBook instanceof Book // true
myBook instanceof String // false
Perhatikan bahwa jikalau sisi kanan operator instanceof tidak fungsi, itu akan melemparkan kesalahan
myBook instanceof {};
// TypeError: invalid 'instanceof' operand ({})
Cara lain untuk menemukan jenis pola memakai properti konstruktor . Semua pola objek mempunyai properti konstruktor yang mengarah ke fungsi konstruktor yang menciptakannya .
Pertimbangkan potongan isyarat berikut :
myBook.constructor == Book; // true
Karena properti konstruktor dari MyBook menunjuk Buku akibatnya yaitu benar . Semua benda mewarisi properti konstruktor dari prototipe mereka :
var s = new String("text");
s.constructor === String; // true
"text".constructor === String; // true
var o = new Object();
o.constructor === Object; // true
var o = {};
o.constructor === Object; // true
var a = new Array();
a.constructor === Array; // true
[].constructor === Array; // true
Meskipun menyidik properti konstruktor sanggup dipakai untuk menyidik jenis pola , disarankan untuk hanya memakai operator instanceof untuk tujuan ini , alasannya yaitu properti constructor mungkin ditimpa , sehingga tidak sanggup menjadi metode yang sanggup mengemban amanah untuk menyidik jenis contoh
Fungsi kustom Constructor
Sebuah konstruktor ibarat cetakan camilan anggun untuk membuat lebih dari satu objek dengan fitur serupa . Dengan kata lain, manfaat dari memakai konstruktor yaitu bahwa hal itu membuatnya gampang untuk membuat beberapa objek dengan properti dan metode yang sama .
Perhatikan isyarat berikut :
function Book(name, year) {
this.name = name;
this.year = '(' + year + ')';
}
Buku konstruktor mengharapkan dua parameter : nama dan tahun ; ketika dipanggil dengan kata kunci gres akan tetapkan parameter yang diterima untuk nama dan tahun milik pola ketika ini sehingga konstruktor sanggup dipakai untuk membuat objek dengan nama dan tahun diinisialisasi sifat :
var firstBook = new Book("Pro AngularJS", 2014);
var secondBook = new Book("Secrets Of The JavaScript Ninja", 2013);
var thirdBook = new Book("JavaScript Patterns", 2010);
console.log(firstBook.name, firstBook.year);
console.log(secondBook.name, secondBook.year);
console.log(thirdBook.name, thirdBook.year);
Object.defineProperty Fungsi
The Object.defineProperty ( ) sanggup dipakai dalam konstruktor untuk membantu melaksanakan semua pengaturan properti yang diharapkan . Pertimbangkan konstruktor berikut :
function Book(name) {
Object.defineProperty(this, "name", {
get: function() {
return "Book: " + name;
},
set: function(newName) {
name = newName;
},
configurable: false
});
}
var myBook = new Book("Single Page Web Applications");
console.log(myBook.name); // Book: Single Page Web Applications
// we cannot delete the name property because "configurable" is set to false
delete myBook.name;
console.log(myBook.name); // Book: Single Page Web Applications
// but we can change the value of the name property
myBook.name = "Testable JavaScript";
console.log(myBook.name); // Book: Testable JavaScript
Dalam isyarat ini kami memakai properti pengakses dalam Object.defineProperty ( ) . Sifat accessor tidak meliputi properti atau metode , tetapi mereka memilih getter untuk panggilan ketika properti dibaca , dan setter untuk panggilan ketika properti ditulis.
Sebuah getter diharapkan untuk mengembalikan nilai , sementara setter mendapatkan nilai yang ditugaskan ke properti sebagai argumen . Konstruktor ini memungkinkan kita untuk mengatur atau mengubah properti nama kasus, tapi kami tidak diperbolehkan untuk menghapusnya , dan ketika kita mendapatkan nilai nama , pengambil prepends string " Buku : " untuk nama dan mengembalikannya
Objek Literal Notasi yang dipilih untuk Konstruktor
Bahasa JavaScript mempunyai sembilan built -in konstruktor : Object ( ) , Array ( ) , String ( ) , Number ( ) , Boolean ( ) , Date ( ) , Fungsi ( ) , Kesalahan ( ) dan RegExp ( ) . Ketika membuat nilai-nilai kita bebas untuk memakai literal objek atau konstruktor , tapi literal objek tidak hanya gampang dibaca , tetapi juga lebih cepat untuk menjalankan alasannya yaitu mereka sanggup mengoptimalkan ketika parse . Setiap kali kita perlu benda sederhana yang terbaik untuk tetap dengan literal :
// a number object
// numbers have a toFixed() method
var obj = new Object(5);
obj.toFixed(2); // 5.00
// we can achieve the same result using literals
var num = 5;
num.toFixed(2); // 5.00
// a string object
// strings have a slice() method
var obj = new String("text");
obj.slice(0,2); // "te"
// same as above
var string = "text";
string.slice(0,2); // "te"
Seperti yang Anda lihat ada hampir tidak ada perbedaan antara literal objek tersebut dan konstruktor dan kami masih sanggup memanggil metode pada literal . Itu alasannya yaitu ketika kita memanggil metode pada literal , di diam-diam mengkonversi JavaScript literal ke objek sementara sehingga mungkin untuk memakai metode objek untuk nilai primitif , maka JavaScript membuang objek sementara
Menggunakan " gres " Kata Kunci yaitu penting
Sangat penting untuk diingat untuk memakai kata kunci gres sebelum semua konstruktor , jikalau kita sengaja lupa " gres " kita akan memodifikasi obyek global bukan objek yang gres dibentuk . Perhatikan pola berikut :
function Book(name, year) {
console.log(this);
this.name = name;
this.year = year;
}
var myBook = Book("js book", 2014);
console.log(myBook instanceof Book);
console.log(window.name, window.year);
var myBook = new Book("js book", 2014);
console.log(myBook instanceof Book);
console.log(myBook.name, myBook.year);
Ketika kita memanggil konstruktor Book kata kunci gres , pada kenyataannya kita hanya memanggil fungsi tanpa pernyataan kembali dan " ini " dalam konstruktor Book akan sama dengan Window ( bukan MyBook ) , dengan kata lain kita telah sengaja membuat dua dunia variabel yang menimbulkan isyarat untuk menghasilkan hasil yang tidak diinginkan , tetapi ketika kita memanggil fungsi dengan " gres " kata kunci konteks diaktifkan dari global ( window ) untuk pola , alasannya yaitu " ini " poin ke myBook . Berikut yaitu apa yang log isyarat di atas di konsol Browser :
Perhatikan bahwa dalam mode ketat isyarat ini melempar kesalahan alasannya yaitu modus ketat melindungi kita dari sengaja memanggil konstruktor tanpa kata kunci baru
Lingkup - Aman Konstruktor
Sejak konstruktor hanya fungsi, itu sanggup disebut tanpa kata kunci gres , tapi ini mengarah ke hasil yang tak terduga dan kesalahan terutama untuk programmer berpengalaman . Solusi untuk problem ini yaitu lingkup - kondusif konstruktor . Kita sanggup memanggil konstruktor Cakupan - kondusif dengan atau tanpa kata kunci gres dan mereka mengembalikan hasil yang sama baik dalam bentuk .
Sebagian besar built-in konstruktor , ibarat Object , Regex dan Array , yang lingkup - kondusif . Mereka memakai pola untuk memilih apakah konstruktor disebut dengan yang gres atau tidak .
Jika gres tidak dipakai , pola yang sempurna dari objek dibentuk dengan memanggil konstruktor lagi dengan kata kunci gres . Perhatikan isyarat berikut :
function Book(name) {
if (!(this instanceof Book)) {
// the constructor was called without "new".
return new Book(name);
}
}
Jadi memakai pola ini kita sanggup dengan gampang menulis ulang versi lingkup - kondusif konstruktor kami :
function Book(name, year) {
if (!(this instanceof Book)) {
return new Book(name, year);
}
this.name = name;
this.year = year;
}
var person1 = new Book("js book", 2014);
var person2 = Book("js book", 2014);
console.log(person1 instanceof Book); // true
console.log(person2 instanceof Book); // true
Fakta bahwa " ini " yaitu sebuah pola dari jenis kustom memungkinkan kita untuk memilih apakah gres tidak dipakai segera sesudah konstruktor mulai melaksanakan dan menjalankan konstruktor lagi dengan kata kunci baru
Kesimpulan
JavaScript tidak mempunyai pernyataan kelas , yang membingungkan untuk coders yang dipakai untuk bahasa dengan pernyataan kelas ; Namun , JavaScript mempunyai konstruktor untuk membawa fungsi serupa . Konstruktor hanya fungsi biasa yang dipakai dengan kata kunci gres . Mereka tiba mempunyai kegunaan ketika kita perlu membuat beberapa objek yang sama dengan properti dan metode yang sama .
Sumber http://www.virtualofworld.com/
Memiliki pemahaman yang baik wacana konstruktor sangat penting untuk benar-benar memahami bahasa JavaScript . Tidak ibarat banyak bahasa lainnya , JavaScript tidak mendukung kelas , tetapi mempunyai konstruktor untuk membawa fungsionalitas ibarat dengan JavaScript . Dalam tutorial ini , kita akan mengeksplorasi konstruktor secara rinci dan melihat bagaimana JavaScript memanfaatkan mereka untuk membuat objek .
Konstruktor ibarat fungsi biasa, tapi kami menggunakannya dengan kata kunci " gres " . Ada dua jenis konstruktor : orisinil ( alias built -in ) konstruktor ibarat Array dan Object , yang tersedia secara otomatis di lingkungan sanksi pada ketika runtime ; dan konstruktor kustom , yang memilih sifat dan metode untuk jenis Anda sendiri objek .
Sebuah konstruktor mempunyai kegunaan ketika Anda ingin membuat beberapa objek yang sama dengan sifat dan metode yang sama . Ini yaitu konvensi untuk memanfaatkan nama konstruktor untuk membedakan mereka dari fungsi biasa . Perhatikan isyarat berikut :
function Book() {
// unfinished code
}
var myBook = new Book();
Baris terakhir isyarat membuat sebuah instance dari Buku dan memperlihatkan ke variabel ; meskipun konstruktor Book tidak melaksanakan apa-apa , MyBook masih sebuah pola dari itu . Seperti yang Anda lihat tidak ada perbedaan antara fungsi ini dan fungsi biasa kecuali bahwa kita menyebutnya dengan kata kunci gres dan nama fungsi dikapitalisasi .
Menentukan Jenis Instance
Untuk mengetahui apakah sebuah objek yaitu instance dari satu sama lain , kita memakai operator instanceof :
myBook instanceof Book // true
myBook instanceof String // false
Perhatikan bahwa jikalau sisi kanan operator instanceof tidak fungsi, itu akan melemparkan kesalahan
myBook instanceof {};
// TypeError: invalid 'instanceof' operand ({})
Cara lain untuk menemukan jenis pola memakai properti konstruktor . Semua pola objek mempunyai properti konstruktor yang mengarah ke fungsi konstruktor yang menciptakannya .
Pertimbangkan potongan isyarat berikut :
myBook.constructor == Book; // true
Karena properti konstruktor dari MyBook menunjuk Buku akibatnya yaitu benar . Semua benda mewarisi properti konstruktor dari prototipe mereka :
var s = new String("text");
s.constructor === String; // true
"text".constructor === String; // true
var o = new Object();
o.constructor === Object; // true
var o = {};
o.constructor === Object; // true
var a = new Array();
a.constructor === Array; // true
[].constructor === Array; // true
Meskipun menyidik properti konstruktor sanggup dipakai untuk menyidik jenis pola , disarankan untuk hanya memakai operator instanceof untuk tujuan ini , alasannya yaitu properti constructor mungkin ditimpa , sehingga tidak sanggup menjadi metode yang sanggup mengemban amanah untuk menyidik jenis contoh
Fungsi kustom Constructor
Sebuah konstruktor ibarat cetakan camilan anggun untuk membuat lebih dari satu objek dengan fitur serupa . Dengan kata lain, manfaat dari memakai konstruktor yaitu bahwa hal itu membuatnya gampang untuk membuat beberapa objek dengan properti dan metode yang sama .
Perhatikan isyarat berikut :
function Book(name, year) {
this.name = name;
this.year = '(' + year + ')';
}
Buku konstruktor mengharapkan dua parameter : nama dan tahun ; ketika dipanggil dengan kata kunci gres akan tetapkan parameter yang diterima untuk nama dan tahun milik pola ketika ini sehingga konstruktor sanggup dipakai untuk membuat objek dengan nama dan tahun diinisialisasi sifat :
var firstBook = new Book("Pro AngularJS", 2014);
var secondBook = new Book("Secrets Of The JavaScript Ninja", 2013);
var thirdBook = new Book("JavaScript Patterns", 2010);
console.log(firstBook.name, firstBook.year);
console.log(secondBook.name, secondBook.year);
console.log(thirdBook.name, thirdBook.year);
Object.defineProperty Fungsi
The Object.defineProperty ( ) sanggup dipakai dalam konstruktor untuk membantu melaksanakan semua pengaturan properti yang diharapkan . Pertimbangkan konstruktor berikut :
function Book(name) {
Object.defineProperty(this, "name", {
get: function() {
return "Book: " + name;
},
set: function(newName) {
name = newName;
},
configurable: false
});
}
var myBook = new Book("Single Page Web Applications");
console.log(myBook.name); // Book: Single Page Web Applications
// we cannot delete the name property because "configurable" is set to false
delete myBook.name;
console.log(myBook.name); // Book: Single Page Web Applications
// but we can change the value of the name property
myBook.name = "Testable JavaScript";
console.log(myBook.name); // Book: Testable JavaScript
Dalam isyarat ini kami memakai properti pengakses dalam Object.defineProperty ( ) . Sifat accessor tidak meliputi properti atau metode , tetapi mereka memilih getter untuk panggilan ketika properti dibaca , dan setter untuk panggilan ketika properti ditulis.
Sebuah getter diharapkan untuk mengembalikan nilai , sementara setter mendapatkan nilai yang ditugaskan ke properti sebagai argumen . Konstruktor ini memungkinkan kita untuk mengatur atau mengubah properti nama kasus, tapi kami tidak diperbolehkan untuk menghapusnya , dan ketika kita mendapatkan nilai nama , pengambil prepends string " Buku : " untuk nama dan mengembalikannya
Objek Literal Notasi yang dipilih untuk Konstruktor
Bahasa JavaScript mempunyai sembilan built -in konstruktor : Object ( ) , Array ( ) , String ( ) , Number ( ) , Boolean ( ) , Date ( ) , Fungsi ( ) , Kesalahan ( ) dan RegExp ( ) . Ketika membuat nilai-nilai kita bebas untuk memakai literal objek atau konstruktor , tapi literal objek tidak hanya gampang dibaca , tetapi juga lebih cepat untuk menjalankan alasannya yaitu mereka sanggup mengoptimalkan ketika parse . Setiap kali kita perlu benda sederhana yang terbaik untuk tetap dengan literal :
// a number object
// numbers have a toFixed() method
var obj = new Object(5);
obj.toFixed(2); // 5.00
// we can achieve the same result using literals
var num = 5;
num.toFixed(2); // 5.00
// a string object
// strings have a slice() method
var obj = new String("text");
obj.slice(0,2); // "te"
// same as above
var string = "text";
string.slice(0,2); // "te"
Seperti yang Anda lihat ada hampir tidak ada perbedaan antara literal objek tersebut dan konstruktor dan kami masih sanggup memanggil metode pada literal . Itu alasannya yaitu ketika kita memanggil metode pada literal , di diam-diam mengkonversi JavaScript literal ke objek sementara sehingga mungkin untuk memakai metode objek untuk nilai primitif , maka JavaScript membuang objek sementara
Menggunakan " gres " Kata Kunci yaitu penting
Sangat penting untuk diingat untuk memakai kata kunci gres sebelum semua konstruktor , jikalau kita sengaja lupa " gres " kita akan memodifikasi obyek global bukan objek yang gres dibentuk . Perhatikan pola berikut :
function Book(name, year) {
console.log(this);
this.name = name;
this.year = year;
}
var myBook = Book("js book", 2014);
console.log(myBook instanceof Book);
console.log(window.name, window.year);
var myBook = new Book("js book", 2014);
console.log(myBook instanceof Book);
console.log(myBook.name, myBook.year);
Ketika kita memanggil konstruktor Book kata kunci gres , pada kenyataannya kita hanya memanggil fungsi tanpa pernyataan kembali dan " ini " dalam konstruktor Book akan sama dengan Window ( bukan MyBook ) , dengan kata lain kita telah sengaja membuat dua dunia variabel yang menimbulkan isyarat untuk menghasilkan hasil yang tidak diinginkan , tetapi ketika kita memanggil fungsi dengan " gres " kata kunci konteks diaktifkan dari global ( window ) untuk pola , alasannya yaitu " ini " poin ke myBook . Berikut yaitu apa yang log isyarat di atas di konsol Browser :
Perhatikan bahwa dalam mode ketat isyarat ini melempar kesalahan alasannya yaitu modus ketat melindungi kita dari sengaja memanggil konstruktor tanpa kata kunci baru
Lingkup - Aman Konstruktor
Sejak konstruktor hanya fungsi, itu sanggup disebut tanpa kata kunci gres , tapi ini mengarah ke hasil yang tak terduga dan kesalahan terutama untuk programmer berpengalaman . Solusi untuk problem ini yaitu lingkup - kondusif konstruktor . Kita sanggup memanggil konstruktor Cakupan - kondusif dengan atau tanpa kata kunci gres dan mereka mengembalikan hasil yang sama baik dalam bentuk .
Sebagian besar built-in konstruktor , ibarat Object , Regex dan Array , yang lingkup - kondusif . Mereka memakai pola untuk memilih apakah konstruktor disebut dengan yang gres atau tidak .
Jika gres tidak dipakai , pola yang sempurna dari objek dibentuk dengan memanggil konstruktor lagi dengan kata kunci gres . Perhatikan isyarat berikut :
function Book(name) {
if (!(this instanceof Book)) {
// the constructor was called without "new".
return new Book(name);
}
}
Jadi memakai pola ini kita sanggup dengan gampang menulis ulang versi lingkup - kondusif konstruktor kami :
function Book(name, year) {
if (!(this instanceof Book)) {
return new Book(name, year);
}
this.name = name;
this.year = year;
}
var person1 = new Book("js book", 2014);
var person2 = Book("js book", 2014);
console.log(person1 instanceof Book); // true
console.log(person2 instanceof Book); // true
Fakta bahwa " ini " yaitu sebuah pola dari jenis kustom memungkinkan kita untuk memilih apakah gres tidak dipakai segera sesudah konstruktor mulai melaksanakan dan menjalankan konstruktor lagi dengan kata kunci baru
Kesimpulan
JavaScript tidak mempunyai pernyataan kelas , yang membingungkan untuk coders yang dipakai untuk bahasa dengan pernyataan kelas ; Namun , JavaScript mempunyai konstruktor untuk membawa fungsi serupa . Konstruktor hanya fungsi biasa yang dipakai dengan kata kunci gres . Mereka tiba mempunyai kegunaan ketika kita perlu membuat beberapa objek yang sama dengan properti dan metode yang sama .