Rumah  >  Artikel  >  hujung hadapan web  >  Pengenalan kepada corak reka bentuk JavaScript dan corak prototaip (Object.create dan prototaip)_kemahiran javascript

Pengenalan kepada corak reka bentuk JavaScript dan corak prototaip (Object.create dan prototaip)_kemahiran javascript

WBOY
WBOYasal
2016-05-16 16:23:551006semak imbas

Penerangan Mod Prototaip

Penerangan: Gunakan contoh prototaip untuk menyalin dan mencipta objek baharu yang boleh disesuaikan, anda tidak perlu mengetahui proses khusus untuk mencipta objek asal;

Proses: Prototaip => ProtoExam baharu => klon kepada Objek baharu;

Gunakan kod yang berkaitan:

Salin kod Kod adalah seperti berikut:
fungsi Prototaip() {
This.name = '';
This.age = '';
This.sex = '';
}
Prototype.prototype.userInfo = function() {

Kembalikan 'Maklumat peribadi, nama: ' this.name ', umur: ' this.age ', jantina: ' this.sex '
';
}

Dua atau lebih kandungan maklumat peribadi kini diperlukan:


Salin kod Kod adalah seperti berikut:
var proto = Prototaip baharu();
var person1 = Object.create(proto);
person1.name = 'Xiao Ming';
person1.sex = 'Lelaki';
orang1.umur = 35;
person1.userInfo();
//
var person2 = Object.create(proto);
person2.name = 'Xiaohua';
person2.sex = 'Perempuan';
orang2.umur = 33;
person2.userInfo();

Pulangan output:


Salin kod Kod adalah seperti berikut:
Maklumat peribadi, Nama: Xiao Ming, Umur: 35, Jantina: Lelaki
Maklumat peribadi, Nama: Xiaohua, Umur: 33, Jantina: Perempuan

Mod prototaip biasanya digunakan apabila struktur abstrak adalah kompleks, tetapi komposisi kandungan adalah serupa, kandungan abstrak boleh disesuaikan dan objek yang baru dibuat hanya perlu diubah suai sedikit untuk memenuhi keperluan

Object.create Arahan

1>. Definisi: Buat objek yang boleh menentukan objek prototaip dan boleh mengandungi sifat tersuai pilihan; 2> Object.create(proto [, properties]);


Salin kod Kod adalah seperti berikut: 1. proto: Untuk mencipta prototaip objek baharu, ia diperlukan dan boleh menjadi nol; proto ini hanya bernilai jika ia telah dibuat [baru] atau object.prototype; 2. sifat: pilihan, struktur:
{
Medan dorong: {
              nilai: 'val'|{}|function(){},
boleh ditulis: benar|salah,
boleh dikira: benar|salah,
Boleh dikonfigurasikan: benar|salah,
              get:function(){return 10},
             set:function(value){}
}
}
Atribut tersuai mempunyai empat atribut asli berikut:
nilai: nilai atribut tersuai;
boleh ditulis: Sama ada nilai item ini boleh diedit, lalai adalah palsu, apabila ia benar, obj.prodField boleh diberikan nilai jika tidak, ia adalah baca sahaja; enumerable: enumerable; boleh dikonfigurasikan: boleh dikonfigurasikan;

Boleh juga mengandungi set, dapatkan kaedah accessor;

Antaranya, [set, get] dan nilai serta boleh ditulis tidak boleh muncul pada masa yang sama


1. Cipta kelas objek prototaip:

Salin kod

Kod adalah seperti berikut: fungsi ProtoClass(){ This.a = 'ProtoClass'; This.c = {}; This.b = function() {
}
}



Buat kaedah prototaip:



Salin kod
Kod adalah seperti berikut: ProtoClass.prototype.aMethod = function() { //ini.a; //this.b(); Kembalikan ini.a;
}

Cara menggunakan

1. Cipta objek dengan ProtoClass.prototype;

Salin kod Kod adalah seperti berikut:

var obj1 = Object.create(ProtoClass.prototype, {
foo:{value: 'obj1', boleh ditulis: true}
})

obj1 mempunyai kaedah prototaip ProtoClass aMethod;
Salin kod Kod adalah seperti berikut:

obj1.aMethod();
//Ia akan mengeluarkan tidak ditentukan, kaedahnya boleh diakses dan ahli ProtoClass tidak boleh diakses

Walau bagaimanapun, kaedah ini tidak boleh melaksanakan atribut ahli a, b, c di bawah ProtoClass:

2.Gunakan ProtoClass segera sebagai prototaip:

Salin kod Kod adalah seperti berikut:

var proto = new ProtoClass();

var obj2 = Object.create(proto, {
foo:{nilai:'obj2'}
});


Obj2 yang dibuat dengan cara ini mempunyai semua atribut ahli a, b, c dan kaedah prototaip ProtoClass dan menambahkan atribut data baca sahaja
;
Salin kod Kod adalah seperti berikut:

obj2.a; //ProtoClass
obj2.c: //[Objek]
obj2.b(); //

obj2.aMethod(); //ProtoClass
obj2.foo; //obj2

3. Warisan subkelas:

Salin kod Kod adalah seperti berikut:

fungsi SubClass() {
 
}
SubClass.prototype = Object.create(ProtoClass.prototype ,{
foo:{value: 'subclass'}
});

SubClass.prototype.subMethod = function() {
Kembalikan this.a ||. this.foo;
}

Kaedah ini boleh diwarisi kepada kaedah aMethod ProtoClass dan dilaksanakan;

Salin kod Kod adalah seperti berikut:

var func = SubClass baharu();
func.aMethod() ;//undefined, tidak boleh membaca atribut ahli ProtoClass, a, b, c
func.subMethod();//subclass

Untuk membenarkan SubClass membaca atribut ahli ProtoClass, SubClass perlu ditukar:

Salin kod Kod adalah seperti berikut:

fungsi SubClass()
{
ProtoClass.call(this);
}

//Kod lain;

Kaedah ini boleh mendapatkan atribut ahli dan kaedah prototaip ProtoClass;:

Salin kod Kod adalah seperti berikut:

var func = SubClass baharu();
func.aMethod() ;//ProtoClass
func.subMethod();//ProtoClass

Kaedah lain adalah dengan menggunakan objek ProtoClass yang di instantiated sebagai prototaip SubClass;

Salin kod Kod adalah seperti berikut:

var proto = new ProtoClass();

fungsi SubClass() {
}

SubClass.prototype = Object.create(proto, {
foo:{value: 'subclass'}
});

Dengan cara ini, selepas SubClass dijadikan instantiated, anda boleh mendapatkan semua sifat dan kaedah prototaip ProtoClass, dan mencipta atribut data baca sahaja foo;

Salin kod Kod adalah seperti berikut:

var func = SubClass baharu();
func.foo; //subclass
func.a; //ProtoClass
func.b(); //
func.c; //[Objek]
func.aMethod(); //ProtoClass

4. Satu lagi kaedah pewarisan penciptaan mempunyai kesan yang sama seperti Object.create menggunakan ProtoClass instantiated sebagai prototaip:

Salin kod Kod adalah seperti berikut:

fungsi SubClass() {
​this.foo = 'subclass'; //Tetapi ia boleh dibaca dan ditulis di sini
}

SubClass.prototype = ProtoClass();

Objek.buat arahan berkaitan

Object.create digunakan untuk mencipta objek baharu Apabila ia adalah Object, prototaipnya adalah nol dan fungsinya adalah sama dengan new Object();

Apabila ia adalah fungsi, ia mempunyai kesan yang sama seperti FunctionName baharu;

Salin kod Kod adalah seperti berikut:

//1 Objek
var o = {}
//Bersamaan dengan
var o2 = Object.create({});
//Kedua-dua pembina adalah sama;

//--------------------------------------
function func() {
This.a = 'func';
}
func.prototype.method = function() {
Kembalikan ini.a;
}

var newfunc = new func();
//Bersamaan dengan [kesan yang sama]
var newfunc2 = Object.create(Object.prototype/*Function.prototype||function(){}*/, {
a: {value:'func', boleh ditulis:true},
Kaedah: {value: function() {return this.a;} }
});

Tetapi newfunc dan newfunc2 mempunyai rujukan fungsi yang berbeza dalam objek yang menciptanya.

newfunc ialah function func() {...}, newfunc2 ialah function Function {Native}

Salin kod Kod adalah seperti berikut:

Object.create(proto[, propertiesField]):

perihalan proto, nilai ini diperlukan dan boleh menjadi batal Jika tidak ditetapkan, pengecualian akan dilemparkan; Jika proto bukan nol, ia adalah nilai instantiated, iaitu, nilai yang telah baharu; kebanyakan objek dalam JavaScript mempunyai atribut pembina, yang menunjukkan fungsi mana objek ini di instantiated melalui

propertiesField adalah pilihan dan menetapkan sifat ahli atau kaedah yang mungkin diperlukan oleh objek yang baru dibuat;
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