Nota kajian JavaScript (5) Penjelasan terperinci prototaip dan rantaian prototaip

Pembolehubah dan fungsi peribadi

Pembolehubah dan fungsi yang ditakrifkan di dalam fungsi tidak boleh diakses oleh dunia luar jika tiada antara muka disediakan kepada dunia luar, iaitu pembolehubah dan fungsi adalah peribadi kepada fungsi tersebut.

Salin kod Kod adalah seperti berikut: Ujian Fungsi(){ var color = "biru";//Pembolehubah peribadi var fn = function() //Fungsi peribadi { } }

Dengan cara ini, pembolehubah warna dan fn tidak boleh diakses di luar objek fungsi Ujian, dan ia menjadi peribadi:

Salin kod Kod adalah seperti berikut: var obj = Ujian baharu(); alert(obj.color);//pop up undefined alert(obj.fn);//Sama seperti di atas Pembolehubah statik dan fungsi

Apabila fungsi ditakrifkan dan atribut dan fungsi yang ditambahkan oleh titik "." masih boleh diakses melalui objek itu sendiri, tetapi kejadiannya tidak boleh diakses, pembolehubah dan fungsi tersebut masing-masing dipanggil pembolehubah dan fungsi statik.

Salin kod Kod adalah seperti berikut: Fungsi Obj(){ } Obj.num = 72;//Pembolehubah statik Obj.fn = function() //Fungsi statik {

}

makluman(Obj.num);//72 makluman(jenis Obj.fn)//fungsi

var t = new Obj(); alert(t.name);//undefined makluman(jenis t.fn);//undefined

Pembolehubah dan fungsi instance

Dalam pengaturcaraan berorientasikan objek, sebagai tambahan kepada beberapa fungsi perpustakaan, kami masih berharap untuk menentukan beberapa sifat dan kaedah semasa mentakrifkan objek, yang boleh diakses selepas instantiasi JavaScript juga boleh melakukan ini

Salin kod Kod adalah seperti berikut: Fungsi Obj(){ This.a=[]; //Pembolehubah instance This.fn=function(){ //Kaedah contoh } }

console.log(jenis Obj.a); //undefined console.log(typeof Obj.fn); //undefined

var o=Obj baharu(); console.log(typeof o.a); //objek console.log(jenis o.fn); //fungsi

Tambah kaedah dan sifat baharu contohnya pembolehubah dan kaedah

Salin kod Kod adalah seperti berikut: fungsi Obj(){ This.a=[]; //Pembolehubah instance This.fn=function(){ //Kaedah contoh } }

var o1=Obj baharu(); o1.a.push(1); o1.fn={}; console.log(o1.a); //[1] console.log(jenis o1.fn); //objek

var o2=Obj baharu(); console.log(o2.a); //[] console.log(jenis o2.fn); //fungsi

a dan fn diubah suai dalam o1, tetapi tidak diubah dalam o2 Memandangkan tatasusunan dan fungsi adalah kedua-dua objek dan jenis rujukan, ini bermakna walaupun sifat dan kaedah dalam o1 mempunyai nama yang sama seperti dalam o2, ia mempunyai nama yang sama Ia bukan rujukan, tetapi salinan sifat dan kaedah yang ditakrifkan oleh objek Obj.

Ini bukan masalah untuk atribut, tetapi ia adalah masalah besar untuk kaedah, kerana kaedah melakukan fungsi yang sama, tetapi ia disalin dua kali Jika objek fungsi mempunyai kaedah beribu-ribu, maka setiap contoh ia mesti mengekalkan salinan beribu-ribu kaedah, yang jelas tidak saintifik Apa yang boleh kita lakukan?

Konsep asas

Setiap fungsi yang kami cipta mempunyai atribut prototaip, iaitu penunjuk kepada objek Tujuan objek ini adalah untuk mengandungi sifat dan kaedah yang boleh dikongsi oleh semua kejadian jenis tertentu. Kemudian, prototaip ialah objek prototaip contoh objek yang dibuat dengan memanggil pembina.

Kelebihan menggunakan prototaip ialah tika objek boleh berkongsi sifat dan kaedah yang terkandung di dalamnya. Iaitu, daripada menambah maklumat objek yang menentukan dalam pembina, anda boleh menambah maklumat ini terus ke prototaip. Masalah utama dengan menggunakan pembina ialah setiap kaedah mesti dibuat dalam setiap contoh.

Dalam JavaScript, terdapat dua jenis nilai, nilai primitif dan nilai objek. Setiap objek mempunyai prototaip harta dalaman, yang biasanya kita panggil prototaip. Nilai prototaip boleh menjadi objek atau nol. Jika nilainya ialah objek, objek itu juga mesti mempunyai prototaip sendiri. Ini membentuk rantai linear, yang kita panggil rantai prototaip.

Maksud

Fungsi boleh digunakan sebagai pembina. Di samping itu, hanya fungsi yang mempunyai atribut prototaip dan boleh diakses, tetapi contoh objek tidak mempunyai atribut ini, hanya atribut __proto__ dalaman yang tidak boleh diakses. __proto__ ialah pautan samar dalam objek kepada prototaip yang berkaitan. Mengikut piawaian, __proto__ tidak terbuka kepada orang ramai, yang bermaksud ia adalah milik persendirian, tetapi enjin Firefox mendedahkannya dan menjadikannya harta awam yang boleh kami akses dan tetapkan secara luaran.

Salin kod Kod adalah seperti berikut: var Pelayar = function(){}; Browser.prototype.run = function(){ alert("Saya Gecko, kernel firefox"); } var Bro = Pelayar baharu(); Bro.run();

Apabila kita memanggil kaedah Bro.run(), kerana tiada kaedah sedemikian dalam Bro, dia akan pergi ke __proto__nya untuk mencarinya, iaitu Browser.prototype, jadi kaedah run() akhirnya dilaksanakan. (Di sini, huruf pertama fungsi dalam huruf besar mewakili pembina untuk membezakannya daripada fungsi biasa)

Apabila pembina dipanggil untuk mencipta contoh, contoh akan mengandungi penunjuk dalaman (__proto__) yang menunjuk kepada prototaip pembina. Sambungan ini wujud antara contoh dan prototaip pembina, bukan antara contoh dan pembina.

Salin kod Kod adalah seperti berikut: fungsi Orang(nama){ This.name=name; } Person.prototype.printName=function(){ makluman(nama.ini); }

var person1=new Person('Byron'); var person2=Orang baharu('Frank');

Person instance person1 mengandungi atribut nama dan secara automatik menjana atribut __proto__, yang menghala ke prototaip Person Anda boleh mengakses kaedah printName yang ditakrifkan dalam prototaip, yang mungkin kelihatan seperti ini:

Contoh lain:

Salin kod Kod adalah seperti berikut: Function Animal(nama) //Mengumpul pembina { This.name = name;//Tetapkan sifat objek } Animal.prototype.behavior = function() //Tambah kaedah tingkah laku pada prototaip pembina kelas asas { alert("ini ialah " this.name); }

var Anjing = Haiwan baharu("anjing");//Buat objek Anjing var Cat = Haiwan baharu("kucing");//Buat objek Kucing

Dog.behavior();//Panggil secara langsung kaedah tingkah laku melalui objek Dog Cat.behavior();//output "ini ialah kucing"

makluman(Kelakuan Anjing==Kelakuan Kucing);//output benar;

Ia boleh dilihat daripada program menjalankan hasil bahawa kaedah yang ditakrifkan pada prototaip pembina memang boleh dipanggil terus melalui objek, dan kod itu dikongsi. (Anda boleh cuba mengalih keluar atribut prototaip dalam Animal.prototype.behavior dan lihat jika ia masih berfungsi.) Di sini, atribut prototaip menghala ke objek Animal.

Instance objek tatasusunan

Lihat contoh lain objek tatasusunan. Apabila kita mencipta tatasusunan objek1, model objek sebenar tatasusunan1 dalam enjin Javascript adalah seperti berikut:

Salin kod Kod adalah seperti berikut: var array1 = [1,2,3];

Objek tatasusunan1 mempunyai nilai atribut panjang 3, tetapi kita boleh menambah elemen pada tatasusunan1 melalui kaedah berikut:

array1.push(4); Kaedah tolak datang daripada kaedah (Array.prototye.push()) yang ditunjuk oleh __proto__ ahli tatasusunan1. Ia adalah tepat kerana semua objek tatasusunan (dicipta melalui []) mengandungi ahli __proto__ yang menunjuk ke objek yang sama (Array.prototype) dengan kaedah tolak, terbalik dan lain-lain yang objek tatasusunan ini boleh menggunakan kaedah tolak, songsang dan lain-lain.

Contoh objek fungsi

Salin kod Kod adalah seperti berikut: fungsi Base() { This.id = "base" }

Salin kod Kod adalah seperti berikut: var obj = new Base();

Apakah hasil kod ini? Model objek yang kita lihat dalam enjin Javascript ialah:

Apa sebenarnya yang dilakukan oleh pengendali baharu Ia sebenarnya sangat mudah, ia melakukan tiga perkara.

Salin kod Kod adalah seperti berikut: var obj = {}; obj.__proto__ = Pangkalan.prototaip; Base.call(obj); Rantai Prototaip

Rantai prototaip: Apabila memanggil sifat atau kaedah daripada objek, jika objek itu sendiri tidak mempunyai sifat atau kaedah sedemikian, ia akan pergi ke objek prototaip yang berkaitan untuk mencarinya Jika prototaip itu tidak wujud, ia akan pergi ke persatuan prototaip. Cari prototaip pendahulu, dan jika tiada lagi, teruskan mencari objek yang dirujuk oleh Prototaip.Prototaip, dan seterusnya, sehingga Prototaip...Prototaip tidak ditentukan (Prototaip Objek tidak ditentukan) , dengan itu membentuk apa yang dipanggil "rantai prototaip".

Salin kod Kod adalah seperti berikut: Bentuk Fungsi(){ This.name = "shape"; This.toString = function(){ kembalikan this.name; } } Fungsi TwoShape(){ This.name = "2 bentuk"; } Segitiga Fungsi(sisi,tinggi){ This.name = "Segitiga"; This.side = sebelah; This.height = ketinggian; This.getArea = function(){ kembalikan this.side*this.height/2; } } TwoShape.prototype = new Shape(); Triangle.prototype = TwoShape();

Di sini, entiti baharu dicipta menggunakan Shape() pembina, dan kemudian digunakan untuk mengatasi prototaip objek.

Salin kod Kod adalah seperti berikut: Bentuk Fungsi(){ This.name = "shape"; This.toString = function(){ kembalikan this.name; } } Fungsi TwoShape(){ This.name = "2 bentuk"; } Segitiga Fungsi(sisi,tinggi){ This.name = "Segitiga"; This.side = sebelah; This.height = ketinggian; This.getArea = function(){ kembalikan this.side*this.height/2; } } TwoShape.prototype = new Shape(); Triangle.prototype = TwoShape();

TwoShape.prototype.constructor = TwoShape; Triangle.prototype.constructor = Segitiga;

var my = Segitiga baharu(5,10); My.getArea(); My.toString();//Triangle My.constructor;//Triangle(sisi,tinggi)

Warisan prototaip

Warisan prototaip: Pada penghujung rantai prototaip, ia ialah objek prototaip yang ditunjuk oleh atribut prototaip pembina Objek. Objek prototaip ini ialah moyang kepada semua objek. Moyang ini melaksanakan kaedah seperti toString yang sepatutnya dimiliki oleh semua objek. Prototaip pembina terbina dalam yang lain, seperti Function, Boolean, String, Date dan RegExp, semuanya diwarisi daripada nenek moyang ini, tetapi mereka masing-masing menentukan sifat dan kaedah mereka sendiri, supaya keturunan mereka menunjukkan ciri-ciri puak masing-masing. Ciri-ciri tersebut.

Dalam ECMAScript, cara untuk melaksanakan pewarisan adalah dengan bergantung pada rantai prototaip.

Salin kod Kod adalah seperti berikut: Kotak Fungsi(){ //Fungsi yang diwarisi dipanggil jenis super (kelas induk, kelas asas) This.name = "Jack"; } function Tree(){ //Fungsi yang diwarisi dipanggil subjenis (subkelas, kelas terbitan) Umur ini = 300; } //Melalui pewarisan rantaian prototaip, tetapkan nilai pada sifat prototaip subjenis //new Box() akan menyerahkan maklumat dalam struktur kotak dan prototaip kepada Tree Tree.prototype = new Box();//Tree mewarisi Kotak dan membentuk rantai melalui prototaip

var tree = new Tree(); alert(tree.name);//Pop up Jack

Masalah dengan rantai prototaip: Walaupun rantai prototaip sangat berkuasa dan boleh digunakan untuk melaksanakan pewarisan, ia juga mempunyai beberapa masalah. Ketua antara masalah ini timbul daripada prototaip nilai yang mengandungi jenis rujukan. Sifat prototaip yang mengandungi jenis rujukan dikongsi oleh semua keadaan; inilah sebabnya sifat ditakrifkan dalam pembina dan bukannya dalam objek prototaip. Apabila pewarisan dilaksanakan melalui prototaip, prototaip sebenarnya bertukar kembali menjadi contoh jenis lain. Akibatnya, sifat contoh asal menjadi sifat prototaip.

Apabila mencipta contoh subjenis, parameter tidak boleh dihantar kepada pembina superjenis. Malah, harus dikatakan bahawa tidak ada cara untuk menghantar parameter kepada pembina supertype tanpa menjejaskan semua contoh objek. Ditambah dengan masalah yang baru dibincangkan kerana kemasukan nilai jenis rujukan dalam prototaip, rantai prototaip sahaja jarang digunakan dalam amalan.

Contoh lain:

Salin kod Kod adalah seperti berikut: Orang Berfungsi(nama) { This.name = name;//Tetapkan sifat objek }; Person.prototype.company = "Microsoft";//Tetapkan sifat prototaip Person.prototype.SayHello = function() //Kaedah prototaip { alert("Hello, saya " this.name " of " this.company); };

var BillGates = Orang baru("BillGates");//Buat objek orang BillGates.SayHello();//Mewarisi kandungan prototaip dan output "Hello, saya BillGates of Microsoft"

var Jobs = new Person("Jobs"); Jobs.company = "Apple";//Tetapkan atribut syarikat anda sendiri, menutup atribut syarikat prototaip Jobs.SayHello = function() { alert("Hai," this.name " seperti " this.company); }; Jobs.SayHello();//Atribut dan kaedah ditindih oleh anda sendiri, keluarkan "Hai, Pekerjaan seperti Apple" BillGates.SayHello();//Liputan Jobs tidak menjejaskan prototaip, BillGates masih mengeluarkan

Lihat contoh rantai prototaip berikut:

Salin kod Kod adalah seperti berikut: Tahun Fungsi(){ This.value = 21; } Tahun.prototaip = { Kaedah:function(){ } };

fungsi Hi(){

}; //Tetapkan atribut prototaip Hi kepada objek contoh Tahun Hai.prototaip = Tahun baru(); Hi.prototype.year = 'Hello World';

Hi.prototype.constructor = Hai;

var test = new Hi();//Buat contoh baharu Hi

//Rantai prototaip Uji [Hi instance] Hai.prototaip [Tahun contoh] {year:'Hello World'} Tahun.prototaip kepada objek.prototaip kepada

Daripada contoh di atas, objek ujian mewarisi daripada Hi.prototype dan Year.prototype; oleh itu dia boleh mengakses kaedah kaedah prototaip Tahun, dan dia boleh mengakses nilai atribut contoh

__ptoto__ atribut Atribut __ptoto__ (tidak disokong oleh penyemak imbas IE) ialah penunjuk dari contoh ke objek prototaip Fungsinya adalah untuk menunjuk kepada pembina atribut prototaip pembina ini, anda boleh mengakses atribut dan kaedah dalam prototaip.

Instance objek dalam Javascript pada asasnya terdiri daripada satu siri atribut ini, terdapat atribut khas tidak kelihatan dalaman - __proto__ Nilai atribut ini menunjuk kepada prototaip contoh objek, objek sahaja prototaip yang unik.

Salin kod Kod adalah seperti berikut: Kotak Fungsi(){ //Huruf besar, mewakili pembina Box.prototype.name = "trigkit4";//Atribut prototaip Box.prototype.age = "21"; Box.prototype.run = function()//Kaedah prototaip kembalikan this.name this.age 'belajar'; } }

var box1 = new Box(); var box2 = new Box(); alert(box1.constructor); // Atribut pembinaan, anda boleh mendapatkan pembina itu sendiri, //Fungsi ini terletak oleh penunjuk prototaip, dan kemudian dapatkan pembina itu sendiri

Perbezaan antara atribut __proto__ dan atribut prototaip

Prototaip ialah atribut proprietari dalam objek fungsi. __proto__ ialah atribut tersirat objek biasa Apabila baru digunakan, ia akan menunjuk ke objek yang ditunjuk oleh prototaip; __ptoto__ sebenarnya merupakan atribut objek entiti, manakala prototaip ialah atribut kepunyaan pembina. __ptoto__ hanya boleh digunakan dalam persekitaran pembelajaran atau penyahpepijatan.

Proses pelaksanaan mod prototaip 1. Mula-mula cari atribut atau kaedah dalam contoh pembina, dan jika ada, kembalikannya dengan segera. 2. Jika tiada contoh pembina, cari dalam objek prototaipnya Jika ada, kembalikan segera

objek prototaip

Salin kod

Kod adalah seperti berikut: Kotak Fungsi(){ //Huruf besar, mewakili pembina Box.prototype.name = "trigkit4";//Atribut prototaip Box.prototype.age = "21"; Box.prototype.run = function()//Kaedah prototaip kembalikan this.name this.age 'belajar'; } } var box1 = new Box(); alert(box1.name);//trigkit4, nilai dalam prototaip box1.name = "Lee"; alert(box1.name);//Lee, masukkan sahaja prinsip

var box2 = new Box(); alert(box2.name);//trigkit4, nilai prototaip belum diubah suai oleh box1

Pembina

Salin kod Kod adalah seperti berikut: Kotak fungsi(){ This.name = "Bill"; }

Box.prototype.name = "trigkit4";//Atribut prototaip Box.prototype.age = "21"; Box.prototype.run = function()//Kaedah prototaip { kembalikan this.name this.age 'belajar'; }

var box1 = new Box();

alert(box1.name);//Bill, nilai dalam prototaip box1.name = "Lee"; alert(box1.name);//Lee, masukkan sahaja prinsip

Php8, saya datang juga

Ketahui reka letak tapak web dalam masa 30 minit

Tutorial Video Permulaan Shangguan Oracle kepada Mahir

Baris pertama kod UNI-APP anda

Berkibar dari awal ke pelancaran apl

Tutorial Video Linux Baharu Brother Lian

Tutorial Video AXURE 9 (Sesuai untuk UI Reka Bentuk Produk Interaktif Pengurus Produk)

Tutorial Video PS Kemahiran Asas Sifar

Tutorial video UI 16 hari untuk anda bermula

Tutorial Video Teknik PS dan Teknik Menghiris

Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek

Gambaran Keseluruhan Rangkaian Komputer - Pengetahuan Asas yang Perlu Dikuasai Pengaturcara

Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP

Tutorial Video Websocket

Nota kajian JavaScript (5) Penjelasan terperinci prototaip dan rantaian prototaip_Pengetahuan asas