Cara JavaScript melaksanakan pewarisan (enam cara)_javascript tips-tutorial js-php.cn

Cara JavaScript melaksanakan pewarisan (enam cara)_javascript tips

WBOY

Lepaskan： 2016-05-16 15:07:18

asal

1270 orang telah melayarinya

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

Salin selepas log masuk

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"

Salin selepas log masuk

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

Salin selepas log masuk

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

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 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"

Salin selepas log masuk

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"

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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