Cara JavaScript melaksanakan pewarisan (enam cara)_javascript tips

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 ECMAScript hanya menyokong pewarisan pelaksanaan, dan pewarisan pelaksanaannya bergantung terutamanya pada rantaian prototaip.

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. Pinjam pembina

Idea asas: Panggil pembina superclass di dalam pembina subjenis, 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: Model warisan yang menggabungkan teknologi rantaian prototaip dan pembina yang dipinjam untuk memanfaatkan kedua-duanya.

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 objek sedia ada 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 warisan prototaip melalui kaedah Object.create() baharu Kaedah ini menerima dua parameter: objek yang digunakan sebagai prototaip objek baharu dan objek yang 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: Cipta fungsi yang hanya digunakan untuk merangkum proses pewarisan, yang secara dalaman meningkatkan objek dalam beberapa cara, 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 sifat dengan meminjam fungsi, dan mewarisi kaedah melalui bentuk hibrid rantai prototaip

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

Kandungan di atas memperkenalkan anda kepada enam cara untuk melaksanakan warisan dalam JavaScript, saya harap ia akan membantu anda!