溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了JS如何實(shí)現(xiàn)繼承，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
具體如下：
1，原型鏈繼承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原型鏈繼承</title>
</head>
<body>
<script>
/**
* 優(yōu)點(diǎn)：
* 實(shí)例是父類(lèi)的實(shí)例也是子類(lèi)的實(shí)例
* 父類(lèi)新增原型方法或者原型屬性 子類(lèi)都能訪問(wèn)到
* 簡(jiǎn)單 易于實(shí)現(xiàn)
* 缺點(diǎn)：
* 無(wú)法實(shí)現(xiàn)多繼承
* 來(lái)自原型對(duì)象的引用屬性和實(shí)例是所有子類(lèi)共享的
* 創(chuàng)建子類(lèi)實(shí)例的時(shí)候，無(wú)法向父構(gòu)造函數(shù)傳參
* 可以在Cat構(gòu)造函數(shù)中，為Cat實(shí)例增加實(shí)例屬性。如果要新增原型屬性和方法，則必須放在new Animal()這樣的語(yǔ)句之后執(zhí)行。
* **/
function Animal(name) {
this.name=name;//屬性
this.sleep=function () {//實(shí)例方法
console.log(this.name+'正在睡覺(jué)')
}
}
//原型方法
Animal.prototype.eat=function (food) {
console.log(this.name+'正在吃'+food)
};
//原型鏈繼承---核心：將父類(lèi)的實(shí)例作為子類(lèi)的原型
function Cat() {
}
Cat.prototype=new Animal();
Cat.prototype.name='cat';
var cat=new Cat();
console.log(cat);//cat._proto_====>Animal 可以使用Animal里面的name屬性 sleep方法
// 也可以使用 cat._proto_._proto_的eat方法 即animal的原型方法
// cat._proto_._proto_._proto_ 是object
console.log(cat.name);
cat.eat('fish');
cat.sleep();
</script>
</body>
</html>運(yùn)行結(jié)果：
2，構(gòu)造繼承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>構(gòu)造繼承</title>
</head>
<body>
<script>
/**
*構(gòu)造繼承 相當(dāng)于復(fù)制父類(lèi)的實(shí)例給子類(lèi) （沒(méi)有用到原型）
* 只能使用父類(lèi)的屬性和方法 不能繼承原型屬性和方法 所以cat不能使用eat方法
* **/
function Animal(name) {
this.name=name;//屬性
this.sleep=function () {//實(shí)例方法
console.log(this.name + '正在睡覺(jué)！');
}
}
// 原型方法
Animal.prototype.eat = function(food) {
console.log(this.name + '正在吃：' + food);
};
function Cat(name) {
Animal.call(this,name);//Cat就可以使用Animal的
// this.name=name
}
var cat=new Cat('Tom');
console.log(cat);//只能使用Animal的屬性和實(shí)例方法 不能使用原型的方法
//cat的_proto_（指向的是一個(gè)函數(shù)） 是cat 構(gòu)造器是Cat cat的_proto_._proto_ 是object
console.log(cat.name);
// cat.eat('fish');
cat.sleep()
</script>
</body>
</html>運(yùn)行結(jié)果：
3，組合繼承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>組合繼承</title>
</head>
<body>
<script>
function Animal(name) {
this.name=name;
this.sleep=function () {
console.log(this.name+"正在睡覺(jué)");
};
}
Animal.prototype.eat=function (food) {
console.log(this.name+"正在吃"+food);
}
function Cat(name) {
Animal.call(this,name)
}
Cat.prototype=new Animal();
// 組合繼承也是需要修復(fù)構(gòu)造函數(shù)指向的。
Cat.prototype.constructor=Cat;//構(gòu)造器進(jìn)行修改
Cat.prototype.show=function () {//可以在子類(lèi)的原型上加方法 不影響父類(lèi)
console.log("11111")
};
var cat=new Cat('Tom');
console.log(cat);//cat可以直接使用animal的屬性和實(shí)例方法
//cat.proto是Animal cat.proto_._proto_ 是eat cat.proto_._proto_._proto_是object
console.log(cat.name);
cat.sleep();
cat.eat('fish')
cat.show()
</script>
</body>
</html>運(yùn)行結(jié)果：
4，寄生組合繼承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>寄生組合繼承</title>
</head>
<body>
<script>
function Animal(name) {
this.name=name;
this.sleep=function () {
console.log(this.name+"正在睡覺(jué)");
}
}
// 原型方法
Animal.prototype.eat = function(food) {
console.log(this.name + '正在吃：' + food);
};
function Cat(name) {
Animal.call(this,name);
}
// (function () {
//創(chuàng)建一個(gè)沒(méi)有實(shí)例方法的類(lèi)
var Super=function () {
};
Super.prototype=Animal.prototype;//eat
console.log(Animal.prototype);//構(gòu)造方法還是Animal 可以使用eat方法 eat的_proto_ 是object
//初始化這個(gè)實(shí)例 把它作為子類(lèi)（Cat）的原型
Cat.prototype=new Super();//一般 的話是new Animal（）
Cat.prototype.constructor=Cat;//Cat的構(gòu)造器還是Cat
// })();
var cat=new Cat('Tom');
console.log(cat.name);
cat.sleep();
cat.eat('food')
</script>
</body>
</html>運(yùn)行結(jié)果：
感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“JS如何實(shí)現(xiàn)繼承”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼