Rumah  >  Artikel  >  hujung hadapan web  >  Apakah warisan dalam javascript

Apakah warisan dalam javascript

WBOY
WBOYasal
2022-06-22 10:44:312527semak imbas

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

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"

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

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();
}

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"

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"

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"

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;//指定对象
}

[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);
}
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!

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