Bagaimanakah javascript melaksanakan warisan?

Kaedah: 1. Gunakan prototaip untuk membenarkan satu jenis rujukan mewarisi sifat dan kaedah jenis rujukan lain 2. Pinjam pembina dan panggil pembina kelas super di dalam pembina subkelas dengan menggunakan call() dan apply(; ) boleh melaksanakan pembina pada objek yang baru dicipta; 3. Menggabungkan rantai prototaip dan teknologi meminjam pembina untuk mencapai warisan.

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

Kata Pengantar: Kebanyakan bahasa OO menyokong dua kaedah pewarisan: pewarisan antara muka dan pewarisan pelaksanaan Walau bagaimanapun, pewarisan antara muka tidak boleh dilaksanakan dalam ECMAScript hanya menyokong pewarisan pelaksanaan, dan pewarisan pelaksanaannya bergantung terutamanya rantaian prototaip untuk dicapai.

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 warisan 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. Meminjam pembina

Idea asas: dalam subjenis pembina Pembina kelas super dipanggil secara dalaman, dan 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 teknologi rantaian prototaip dan pembina yang dipinjam dalam 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: Gunakan prototaip untuk mencipta objek baharu berdasarkan objek sedia ada Objek tanpa perlu mencipta jenis tersuai.

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 yang hanya digunakan untuk merangkum proses pewarisan, yang digunakan secara dalaman dalam beberapa cara untuk meningkatkan objek, dan akhirnya mengembalikan 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: mewarisi harta dengan meminjam fungsi, dan mewarisi harta melalui prototaip Bentuk hibrid rantai mewarisi kaedah

Model asasnya adalah seperti berikut:

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

Contoh:

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

[Pembelajaran yang disyorkan. : Tutorial javascript lanjutan】

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