JS如何實現(xiàn)繼承
這篇文章主要介紹了JS如何實現(xiàn)繼承，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
創(chuàng)新互聯(lián)建站專注于鹽池企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站建設(shè),成都做商城網(wǎng)站。鹽池網(wǎng)站建設(shè)公司,為鹽池等地區(qū)提供建站服務(wù)。全流程按需求定制制作，專業(yè)設(shè)計，全程項目跟蹤，創(chuàng)新互聯(lián)建站專業(yè)和態(tài)度為您提供的服務(wù)
具體如下：
1，原型鏈繼承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原型鏈繼承</title>
</head>
<body>
<script>
/**
* 優(yōu)點：
* 實例是父類的實例也是子類的實例
* 父類新增原型方法或者原型屬性 子類都能訪問到
* 簡單 易于實現(xiàn)
* 缺點：
* 無法實現(xiàn)多繼承
* 來自原型對象的引用屬性和實例是所有子類共享的
* 創(chuàng)建子類實例的時候，無法向父構(gòu)造函數(shù)傳參
* 可以在Cat構(gòu)造函數(shù)中，為Cat實例增加實例屬性。如果要新增原型屬性和方法，則必須放在new Animal()這樣的語句之后執(zhí)行。
* **/
function Animal(name) {
this.name=name;//屬性
this.sleep=function () {//實例方法
console.log(this.name+'正在睡覺')
}
}
//原型方法
Animal.prototype.eat=function (food) {
console.log(this.name+'正在吃'+food)
};
//原型鏈繼承---核心：將父類的實例作為子類的原型
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ù)制父類的實例給子類 （沒有用到原型）
* 只能使用父類的屬性和方法 不能繼承原型屬性和方法 所以cat不能使用eat方法
* **/
function Animal(name) {
this.name=name;//屬性
this.sleep=function () {//實例方法
console.log(this.name + '正在睡覺！');
}
}
// 原型方法
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的屬性和實例方法 不能使用原型的方法
//cat的_proto_（指向的是一個函數(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+"正在睡覺");
};
}
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 () {//可以在子類的原型上加方法 不影響父類
console.log("11111")
};
var cat=new Cat('Tom');
console.log(cat);//cat可以直接使用animal的屬性和實例方法
//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+"正在睡覺");
}
}
// 原型方法
Animal.prototype.eat = function(food) {
console.log(this.name + '正在吃：' + food);
};
function Cat(name) {
Animal.call(this,name);
}
// (function () {
//創(chuàng)建一個沒有實例方法的類
var Super=function () {
};
Super.prototype=Animal.prototype;//eat
console.log(Animal.prototype);//構(gòu)造方法還是Animal 可以使用eat方法 eat的_proto_ 是object
//初始化這個實例 把它作為子類（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如何實現(xiàn)繼承”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!
名稱欄目：JS如何實現(xiàn)繼承
文章源于：http://jinyejixie.com/article0/gpsiio.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、自適應(yīng)網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、域名注冊、外貿(mào)建站
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
