Penjelajahan ringkas tentang kemahiran JavaScript patterns_javascript

WBOY
Lepaskan: 2016-05-16 15:20:24
asal
1059 orang telah melayarinya

Dalam erti kata sebenar, Javascript bukan bahasa berorientasikan objek dan tidak menyediakan kaedah pewarisan tradisional Walau bagaimanapun, ia menyediakan kaedah pewarisan prototaip yang menggunakan sifat prototaip yang disediakan dengan sendirinya untuk mencapai pewarisan. Warisan prototaip Javascript adalah topik yang dikatakan busuk, tetapi saya tidak pernah memahami sepenuhnya isu ini Hari ini saya mengambil sedikit masa untuk membaca semula beberapa kaedah pewarisan prototaip dalam "Javascript Patterns". kaedah pewarisan mudah dalam JS Jika anda mempunyai pendapat yang berbeza, sila berikan cadangan anda.

Warisan rantaian prototaip yang paling asas tidak akan diulang di sini, saya akan bercakap tentang mod warisan lain.

1. Pinjam warisan pembina

function Father (name) {
this.name=name;
}
function Son (name) {
Father.call(this,name); //在子类型中调用超类型的构造函数
this.age=15;
}
var me=new Son("Su"); 
Salin selepas log masuk

Faedah: Anda boleh menghantar parameter untuk subjenis, seperti atribut nama dalam rajah.

Kelemahan: 1. Kaedah ditakrifkan dalam pembina dan tidak boleh digunakan semula. 2. Kaedah yang ditakrifkan dalam prototaip supertype tidak kelihatan kepada subjenis.

2. Warisan gabungan (rantai prototaip dan pembina)

//超类型构造函数function Father (name) {
this.name=name;
this.famMember=[];
}//超类型构造函数原型方法
Father.prototype.sayName=function () {
alert(this.name);
}//子类型构造函数
function Son (name,age) {
Father.call(this,name); //构造函数方法
this.age=age;
}
Son.prototype=new Father(); //重写子类型原型对象
Son.prototype.constructor=Son; //重写构造函数属性指向子类型
Son.prototype.sayAge=function () {
alert(this.age);
} //重写原型对象后再加入方法
var me=new Son("Su",15);
me.famMember.push("dad","mom"); //子类型可以调用超类型构造函数内的方法var he=new Son("Li",14);alert(he.famMember); // [] 
Salin selepas log masuk

Faedah: Subkelas yang berbeza boleh mempunyai sifatnya sendiri atau menggunakan kaedah yang sama.

Kelemahan: Kaedah ini memerlukan memanggil pembina supertype dua kali, dan kaedah atribut dengan nama yang sama akan ditindih sekali.

3. Warisan prototaip (serupa dengan Object.create())

function object (o) {
function F () {}
F.prototype=o;
return new F();
}var obj={}; //将obj对象传入作为新对象的原型。var me=object(obj); 
Salin selepas log masuk

Menggunakan kaedah pewarisan ini memerlukan objek sebagai objek prototaip, jadi kaedah atribut semua subjenis yang mewarisinya adalah perkara biasa.

ES5 menyeragamkan warisan prototaip melalui kaedah Object.creatr() baharu.

4. Warisan parasit (warisan prototaip di mana kaedah persendirian boleh ditetapkan)

function object (o) {
function F () {}
F.prototype=o;
return new F();
}
var obj={}; //将obj对象传入作为新对象的原型。到这里都与原型式继承相同function creObj(o) {  var clone=object(obj);  clone.sayHi=function () {    alert("Hi");  };return clone; }
var me=creObj(obj); 
Salin selepas log masuk

Faedah: Kaedah ini menebus kekurangan warisan prototaip dengan hanya kaedah harta awam, membenarkan subjenis mempunyai kaedah harta persendirian.

5. Warisan gabungan Parasit

function inherit (father,son) {
var pro=Object(father.prototype); //创建超类型原型对象的副本
pro.constructor=son;
son.prototype=pro;           //将副本作为子类型的原型对象
} 
Salin selepas log masuk

Kaedah ini digunakan untuk menebus masalah liputan kaedah atribut dalam pewarisan gabungan.

Gunakan kod di atas untuk menggantikan kod Son.prototype=new Father(); Dengan cara ini, pembina jenis induk hanya perlu dipanggil sekali, mengelakkan penciptaan kaedah atribut yang berlebihan dan tidak perlu, dan memastikan rantaian prototaip tidak berubah Ia merupakan kaedah pewarisan jenis rujukan yang ideal.

Saya akan memberi anda pengenalan kasar kepada mod warisan js.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan