Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Apakah warisan dalam javascript

Apakah warisan dalam javascript

WBOY
Lepaskan: 2022-06-22 10:44:31
asal
2555 orang telah melayarinya

Dalam JavaScript, pewarisan ialah mekanisme yang membenarkan penciptaan kelas baharu berdasarkan kelas sedia ada; pewarisan memberikan fleksibiliti kepada subkelas dan boleh menggunakan semula kaedah dan pembolehubah kelas induk Proses pewarisan adalah Daripada proses umum kepada khas , rantai prototaip dan pembina boleh digunakan untuk melaksanakan pewarisan.

Apakah warisan dalam javascript

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi JavaScript 1.8.5, komputer Dell G3.

Apakah warisan dalam JavaScript

Warisan JavaScript ialah mekanisme yang membolehkan kami mencipta kelas baharu berdasarkan kelas sedia ada; ia memberikan kefleksibelan untuk subkelas untuk menggunakan semula kaedah dan pembolehubah kelas induk. Proses pewarisan ialah proses dari umum kepada khusus.

Ia mengekalkan hubungan IS-A.

kata kunci lanjutan digunakan dalam ungkapan kelas atau pengisytiharan kelas.

Menggunakan kata kunci lanjutan, kita boleh mendapatkan semua sifat dan gelagat objek terbina dalam dan kelas tersuai.

Kami juga boleh menggunakan kaedah berasaskan prototaip untuk melaksanakan pewarisan.

Bagaimanakah JavaScript melaksanakan warisan?

1. Rantaian prototaip

Idea asas: Gunakan prototaip untuk membenarkan satu jenis rujukan mewarisi sifat dan kaedah jenis rujukan yang lain.

Hubungan antara pembina, prototaip dan kejadian: Setiap pembina mempunyai objek prototaip, objek prototaip mengandungi penunjuk kepada pembina dan kejadian mengandungi penunjuk dalaman kepada objek prototaip.

Contoh pewarisan pelaksanaan rantaian prototaip:

function SuperType() {
this.property = true;
}
SuperType.prototype.getSuperValue = function() {
return this.property;
}
function subType() {
this.property = false;
}
//继承了SuperType
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function (){
return this.property;
}
var instance = new SubType();
console.log(instance.getSuperValue());//true
Salin selepas log masuk

2 Pembina peminjam

Idea asas: panggil super dalam pembina subjenis Pembina kelas, pembina kelas. pembina boleh dilaksanakan pada objek yang baru dibuat dengan menggunakan kaedah call() dan apply().

Contoh:

function SuperType() {
this.colors = ["red","blue","green"];
}
function SubType() {
SuperType.call(this);//继承了SuperType
}
var instance1 = new SubType();
instance1.colors.push("black");
console.log(instance1.colors);//"red","blue","green","black"
var instance2 = new SubType();
console.log(instance2.colors);//"red","blue","green"
Salin selepas log masuk

3. Warisan gabungan

Idea asas: menggabungkan rantai prototaip dan teknologi pembina peminjam, supaya An model warisan yang memanfaatkan yang terbaik dari kedua-dua dunia.

Contoh:

function SuperType(name) {
this.name = name;
this.colors = ["red","blue","green"];
}
SuperType.prototype.sayName = function() {
console.log(this.name);
}
function SubType(name, age) {
SuperType.call(this,name);//继承属性
this.age = age;
}
//继承方法
SubType.prototype = new SuperType();
Subtype.prototype.constructor = Subtype;
Subtype.prototype.sayAge = function() {
console.log(this.age);
}
var instance1 = new SubType("EvanChen",18);
instance1.colors.push("black");
consol.log(instance1.colors);//"red","blue","green","black"
instance1.sayName();//"EvanChen"
instance1.sayAge();//18
var instance2 = new SubType("EvanChen666",20);
console.log(instance2.colors);//"red","blue","green"
instance2.sayName();//"EvanChen666"
instance2.sayAge();//20
Salin selepas log masuk

4. Warisan prototaip

Idea asas: Dengan bantuan prototaip, objek baharu boleh dibuat berdasarkan sedia ada objek, dan pada masa yang sama Anda tidak perlu mencipta jenis tersuai lagi.

Idea warisan prototaip boleh digambarkan dengan fungsi berikut:

function object(o) {
function F(){}
F.prototype = o;
return new F();
}
Salin selepas log masuk

Contoh:

var person = {
name:"EvanChen",
friends:["Shelby","Court","Van"];
};
var anotherPerson = object(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");
var yetAnotherPerson = object(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");
console.log(person.friends);//"Shelby","Court","Van","Rob","Barbie"
Salin selepas log masuk

ECMAScript5 menyeragamkan prototaip melalui Object.create baharu () kaedah Untuk pewarisan, kaedah ini menerima dua parameter: objek untuk digunakan sebagai prototaip objek baharu dan objek untuk digunakan sebagai objek baharu untuk menentukan sifat tambahan.

var person = {
name:"EvanChen",
friends:["Shelby","Court","Van"];
};
var anotherPerson = Object.create(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");
var yetAnotherPerson = Object.create(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");
console.log(person.friends);//"Shelby","Court","Van","Rob","Barbie"
Salin selepas log masuk

5. Warisan Parasit

Idea asas: Buat fungsi hanya untuk merangkum proses pewarisan, yang dipertingkatkan secara dalaman dalam beberapa cara objek, dan akhirnya kembali objek seolah-olah ia benar-benar melakukan semua kerja.

Contoh:

function createAnother(original) {
var clone = object(original);
clone.sayHi = function () {
alert("hi");
};
return clone;
}
var person = {
name:"EvanChen",
friends:["Shelby","Court","Van"];
};
var anotherPerson = createAnother(person);
anotherPerson.sayHi();///"hi"
Salin selepas log masuk

6. Warisan gabungan parasit

Idea asas: warisi sifat dengan meminjam fungsi, dan campurkannya melalui rantai prototaip Model asas adalah seperti berikut:

Contoh:
function inheritProperty(subType, superType) {
var prototype = object(superType.prototype);//创建对象
prototype.constructor = subType;//增强对象
subType.prototype = prototype;//指定对象
}
Salin selepas log masuk

[Cadangan berkaitan:
function SuperType(name){
this.name = name;
this.colors = ["red","blue","green"];
}
SuperType.prototype.sayName = function (){
alert(this.name);
};
function SubType(name,age){
SuperType.call(this,name);
this.age = age;
}
inheritProperty(SubType,SuperType);
SubType.prototype.sayAge = function() {
alert(this.age);
}
Salin selepas log masuk
tutorial video javascript

, bahagian hadapan web]

Atas ialah kandungan terperinci Apakah warisan dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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