Rumah  >  Artikel  >  hujung hadapan web  >  Pengenalan kepada pengklonan mendalam bagi kemahiran JavaScript objects_javascript

Pengenalan kepada pengklonan mendalam bagi kemahiran JavaScript objects_javascript

WBOY
WBOYasal
2016-05-16 16:28:171349semak imbas

Saya tidak tahu bila perkataan baharu mula muncul dalam bulatan bahagian hadapan: pengklonan dalam objek. Ia mungkin kelihatan sangat tinggi, tetapi sebenarnya ia bukanlah sesuatu yang baru dalam pembangunan projek sebenar kami, anda mungkin telah menggunakannya, bagaimanapun, disebabkan oleh aksara Cina yang luas dan mendalam, beberapa perkara yang pada asalnya mudah dikaburkan oleh beberapa perbendaharaan kata yang kelihatan profesional. Tambah hiasan dan ia menjadi misteri.

Kenapa mengklon dalam objek pada mulanya? Tolong benarkan saya membuat tekaan: Kadangkala anda mesti berfikir bahawa dokumen objek terbina dalam js terlalu panjang, maka anda boleh melakukan ini:

Salin kod Kod adalah seperti berikut:

var d = dokumen;
d.by = function(id){
Kembalikan d.getElementById(id);
};
d.by('id').innerHTML = 'hello sentsin';

Kod di atas memudahkan document.getElementById, dan juga menambahkan kaedah mengikut ahli pada objek dokumen asal Anda boleh mengesahkan pertimbangan anda melalui nilai status yang dikembalikan oleh document.hasOwnProperty('by'). Lihat contoh berikut.

Salin kod Kod adalah seperti berikut:

var person = {name: 'Xianxin', profesion: 'Front-end development', tempat: 'Hangzhou'};
var newPerson = orang;
newPerson.age = '24';
console.log(orang);
//Keputusan: {nama: 'Xianxin', profesion: 'Pembangunan hadapan', tempat: 'Hangzhou', umur: 24}

Ia boleh dilihat bahawa apabila objek hanya dihantar ke pembolehubah baharu, ia hanya menambah alias pada objek. Ini bermakna bahawa dengan beroperasi pada alias, nilai kunci objek asal akan berubah. Tetapi masalahnya ialah kadangkala kita mahu newPerson sepenuhnya bebas daripada orang dan tiada hubungan penyegerakan antara mereka, jadi kita perlu menjana salinan, sila lihat contoh:

Salin kod Kod adalah seperti berikut:

var cloneObj = function(obj){
var str, newobj = obj.constructor === Array ? Jika(jenis obj !== 'objek'){
         kembali;
} else if(window.JSON){
         str = JSON.stringify(obj), //Objek bersiri
​​​​ newobj = JSON.parse(str); //Pulihkan
} lain {
untuk(var i dalam obj){
newobj[i] = jenis obj[i] === 'objek' ?                cloneObj(obj[i]): obj[i];
}
}
Kembalikan newobj;
};

//Ujian

var obj = {a: 0, b: 1, c: 2};
var arr = [0, 1, 2];
//Lakukan pengklonan dalam
var newobj = cloneObj(obj);
var newarr = cloneObj(arr);
//Padamkan ahli objek baharu selepas pengklonan
padam newobj.a;
newarr.splice(0,1);
console.log(obj, arr, newobj, newarr);
//Keputusan: {a: 0, b: 1, c: 2}, [0, 1, 2], {b: 1, c: 2}, [1, 2];


Ini dipanggil pengklonan objek. Walau bagaimanapun, terdapat beberapa perkara yang memerlukan penjelasan. Objek JSON dalam kod dan kaedah ahlinya merangkai dan menghuraikan tergolong dalam spesifikasi ECMAScript5 Mereka masing-masing bertanggungjawab untuk menukar objek (termasuk objek tatasusunan) kepada rentetan dan memulihkannya, dengan itu merealisasikan salinan objek yang mendalam. Jadi untuk pelayar peringkat rendah (seperti IE), jika anda menyalin tatasusunan, anda boleh menggunakan newobj.concat(obj), dan untuk objek biasa, anda hanya boleh menghitung dan menetapkan nilai.

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn