memperkenalkan
Empat kode penggunaan kembali kode yang diperkenalkan dalam artikel ini adalah praktik terbaik dan direkomendasikan untuk semua orang selama proses pemrograman.
Pola 1: Prototipe Warisan
Prototipe warisan adalah untuk membiarkan objek induk menjadi prototipe objek anak, untuk mencapai tujuan warisan:
Salinan kode adalah sebagai berikut:
objek fungsi (o) {
fungsi f () {
}
F.prototype = o;
mengembalikan f baru ();
}
// Objek orang tua untuk diwariskan
var parent = {
Nama: "Papa"
};
// objek baru
var anak = objek (induk);
// tes
Console.log (Child.Name); // "Papa"
// konstruktor induk
function person () {
// properti "sendiri"
this.name = "Adam";
}
// Tambahkan atribut baru ke prototipe
Person.prototype.getName = function () {
kembalikan nama ini;
};
// Buat orang baru
var papa = orang baru ();
// Warisan
var kid = objek (papa);
console.log (kid.getname ()); // "Adam"
// konstruktor induk
function person () {
// properti "sendiri"
this.name = "Adam";
}
// Tambahkan atribut baru ke prototipe
Person.prototype.getName = function () {
kembalikan nama ini;
};
// Warisan
var kid = objek (person.prototype);
console.log (typeof kid.getname); // "fungsi", karena didefinisikan dalam prototipe
console.log (typeof kid.name); // "tidak terdefinisi", karena hanya prototipe yang diwarisi
Pada saat yang sama, ecmascript5 juga menyediakan metode serupa yang disebut objek. Buat untuk mewarisi objek, dan penggunaannya adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
/* Gunakan versi baru ecmascript 5 untuk menyediakan fitur*/
var child = object.create (induk);
var child = object.create (induk, {
Umur: {value: 2} // deskriptor ecma5
});
Console.log (Child.HasownProperty ("Age")); // BENAR
Selain itu, properti juga dapat didefinisikan pada parameter kedua dengan cara yang lebih halus:
Salinan kode adalah sebagai berikut:
// Pertama, tentukan orang objek baru
var man = object.create (null);
// Selanjutnya, buat pengaturan konfigurasi yang berisi properti
// Properti disetel ke WRIBLE, CONTIBLE, dan dapat dikonfigurasi
var config = {
Tulisan: Benar,
Hancur: Benar,
dapat dikonfigurasi: Benar
};
// biasanya menggunakan objek.defineproperty () untuk menambahkan properti baru (dukungan ecmascript5)
// Sekarang, untuk kenyamanan, kami menyesuaikan fungsi enkapsulasi
var defineprop = fungsi (obj, kunci, nilai) {
config.value = nilai;
Object.Defineproperty (OBJ, KEY, CONFIG);
}
Defineprop (man, 'car', 'delorean');
Defineprop (Man, 'Dob', '1981');
Defineprop (manusia, 'jenggot', false);
Jadi, warisan dapat dilakukan:
Salinan kode adalah sebagai berikut:
var driver = object.create (man);
DefinEprop (driver, 'Topspeed', '100mph');
driver.topspeed // 100mph
Tetapi ada satu hal yang perlu diperhatikan, yaitu, prototipe objek yang dibuat oleh objek.create (null) tidak terdefinisi, yaitu, tidak ada metode tostring dan nilai dari metode, sehingga kesalahan akan terjadi ketika waspada (man);, tetapi waspada (man.car); baik -baik saja.
Mode 2: Salin semua atribut untuk warisan
Warisan dengan cara ini adalah menyalin semua properti dalam objek induk ke objek anak. Secara umum, objek anak dapat menggunakan data objek induk.
Mari kita lihat contoh salinan yang dangkal:
Salinan kode adalah sebagai berikut:
/* Salinan dangkal*/
fungsi memperpanjang (orang tua, anak) {
var i;
anak = anak || {};
untuk (i in parent) {
if (parent.hasownproperty (i)) {
anak [i] = induk [i];
}
}
anak kembali;
}
var dad = {name: "adam"};
var kid = extend (ayah);
console.log (kid.name); // "Adam"
var ayah = {
Hitungan: [1, 2, 3],
berbunyi: {kertas: true}
};
var kid = extend (ayah);
kid.counts.push (4);
console.log (dad.counts.tostring ()); // "1,2,3,4"
console.log (dad.reads === kid.reads); // BENAR
Pada baris terakhir kode, Anda dapat menemukan bahwa bacaan ayah dan anak adalah sama, yaitu, mereka menggunakan referensi yang sama, yang merupakan masalah yang disebabkan oleh salinan dangkal.
Mari kita lihat salinan yang dalam:
Salinan kode adalah sebagai berikut:
/* Salinan dalam*/
Fungsi ExtandDeep (Parent, Child) {
var i,
tostr = object.prototype.tostring,
astr = "[array objek]";
anak = anak || {};
untuk (i in parent) {
if (parent.hasownproperty (i)) {
if (typeof parent [i] === 'objek') {
anak [i] = (tostr.call (induk [i]) === astr)? []: {};
ExtlateDeep (Parent [i], Child [i]);
} kalau tidak {
anak [i] = induk [i];
}
}
}
anak kembali;
}
var ayah = {
Hitungan: [1, 2, 3],
berbunyi: {kertas: true}
};
var kid = ExtandDeep (ayah);
kid.counts.push (4);
console.log (kid.counts.tostring ()); // "1,2,3,4"
console.log (dad.counts.tostring ()); // "1,2,3"
console.log (dad.reads === kid.reads); // PALSU
kid.reads.paper = false;
Setelah menyalin dalam, kedua nilai tidak lagi sama, bingo!
Mode 3: Campuran
Campuran adalah untuk menyalin satu atau lebih (atau semua) properti (atau metode) objek ke objek lain. Mari memberi contoh:
Salinan kode adalah sebagai berikut:
function mix () {
var arg, prop, child = {};
untuk (arg = 0; arg <arguments.length; arg += 1) {
untuk (prop dalam argumen [arg]) {
if (argumen [arg] .hasownproperty (prop)) {
anak [prop] = argumen [arg] [prop];
}
}
}
anak kembali;
}
var cake = mix (
{Eggs: 2, Large: True},
{Butter: 1, asin: true},
{tepung: '3 gelas'},
{Sugar: 'Tentu!' }
);
Console.dir (kue);
Fungsi campuran menyalin atribut anak dari semua parameter yang diteruskan ke objek anak untuk menghasilkan objek baru.
Jadi bagaimana kita hanya ingin mencampur beberapa atribut? Bagaimana cara melakukannya? Faktanya, kita dapat menggunakan parameter tambahan untuk menentukan sifat -sifat yang perlu dicampur, seperti campuran (anak, orang tua, method1, method2) sehingga kita hanya dapat mencampur Method1 dan Method2 pada orang tua menjadi anak. Pada kode:
Salinan kode adalah sebagai berikut:
// Mobil
var car = fungsi (pengaturan) {
this.model = settings.model || 'tidak ada model yang disediakan';
this.colour = settings.colour || 'tidak ada warna yang disediakan';
};
// mixin
var mixin = function () {};
Mixin.prototype = {
driveforward: function () {
console.log ('drive forward');
},
driveebackward: function () {
console.log ('drive backward');
}
};
// Dua parameter yang didefinisikan adalah objek yang dicampur menjadi (menerima) dan objek dicampur menjadi (memberi)
fungsi augment (recestObj, givingObj) {
// Jika nama metode yang ditentukan disediakan, ada 3 parameter tambahan
if (argumen [2]) {
untuk (var i = 2, len = arguments.length; i <len; i ++) {
receivingobj.prototype [argumen [i]] = givingobj.prototype [argumen [i]];
}
}
// Jika Anda tidak menentukan parameter ketiga, atau lebih banyak parameter, semua metode akan dicampur
kalau tidak {
untuk (var methodName di givingobj.prototype) {
// Periksa apakah objek penerima tidak berisi nama yang akan dicampur, jadi jika disertakan, itu tidak akan dicampur
if (! receivingobj.prototype [MethodName]) {
receivingobj.prototype [MethodName] = GivingObj.prototype [MethodName];
}
}
}
}
// Campur atribut untuk mobil, tetapi nilainya dicampur dengan 'driveforward' dan 'driveebackward'*/
augment (mobil, mixin, 'driveforward', 'driveebackward');
// Buat mobil objek baru
var kendaraan = mobil baru ({model: 'Ford Escort', Color: 'Blue'});
// Metode untuk menguji apakah pencampuran berhasil diperoleh
kendaraan.driveforward ();
kendaraan.driveBackward ();
Metode ini lebih fleksibel untuk digunakan.
Pola 4: Metode pinjaman
Satu objek meminjam satu atau dua metode objek lain, dan tidak ada koneksi langsung antara kedua objek ini. Tidak perlu menjelaskan lebih lanjut, cukup gunakan kode untuk menjelaskan:
Salinan kode adalah sebagai berikut:
var satu = {
Nama: 'Objek',
Say: function (salam) {
return salam + ',' + this.name;
}
};
// tes
console.log (One.say ('hai')); // "Hai, objek"
var dua = {
Nama: 'Objek Lain'
};
Console.log (One.Say.Apply (dua, ['Hello'])); // "Halo, objek lain"
// Tetapkan katakan ke variabel, ini akan menunjuk ke variabel global
var mengatakan = satu.say;
console.log (katakanlah ('hoho')); // "hoho, tidak terdefinisi"
// lulus panggilan balik fungsi panggilan balik
var yeyNanother = {
Nama: 'Namun objek lain',
Metode: function (callback) {
return callback ('hola');
}
};
console.log (yetanother.method (one.say)); // "holla, tidak terdefinisi"
function bind (o, m) {
return function () {
return M.Apply (o, [] .slice.call (argumen));
};
}
var twosay = bind (dua, satu.say);
console.log (twosay ('yo')); // "yo, objek lain"
// ecmascript 5 menambahkan metode bind () ke function.prototype sehingga mudah digunakan apply () dan call ().
if (typeof function.prototype.bind === 'tidak terdefinisi') {
Function.prototype.bind = function (thisArg) {
var fn = ini,
slice = array.prototype.slice,
args = slice.call (argumen, 1);
return function () {
return fn.Apply (thisarg, args.concat (slice.call (argumen)));
};
};
}
var twoSay2 = one.say.bind (dua);
console.log (twoSay2 ('bonjour')); // "Bonjour, objek lain"
var twoSay3 = one.say.bind (dua, 'enchanté');
console.log (twoSay3 ()); // "Enchanté, objek lain"
Meringkaskan
Tidak perlu meringkas.