這篇文章主要介紹了JS如何實現繼承，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
具體如下：
1，原型鏈繼承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原型鏈繼承</title>
</head>
<body>
<script>
/**
* 優點：
* 實例是父類的實例也是子類的實例
* 父類新增原型方法或者原型屬性 子類都能訪問到
* 簡單 易于實現
* 缺點：
* 無法實現多繼承
* 來自原型對象的引用屬性和實例是所有子類共享的
* 創建子類實例的時候，無法向父構造函數傳參
* 可以在Cat構造函數中，為Cat實例增加實例屬性。如果要新增原型屬性和方法，則必須放在new Animal()這樣的語句之后執行。
* **/
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>運行結果：
2，構造繼承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>構造繼承</title>
</head>
<body>
<script>
/**
*構造繼承 相當于復制父類的實例給子類 （沒有用到原型）
* 只能使用父類的屬性和方法 不能繼承原型屬性和方法 所以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_（指向的是一個函數） 是cat 構造器是Cat cat的_proto_._proto_ 是object
console.log(cat.name);
// cat.eat('fish');
cat.sleep()
</script>
</body>
</html>運行結果：
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();
// 組合繼承也是需要修復構造函數指向的。
Cat.prototype.constructor=Cat;//構造器進行修改
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>運行結果：
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 () {
//創建一個沒有實例方法的類
var Super=function () {
};
Super.prototype=Animal.prototype;//eat
console.log(Animal.prototype);//構造方法還是Animal 可以使用eat方法 eat的_proto_ 是object
//初始化這個實例 把它作為子類（Cat）的原型
Cat.prototype=new Super();//一般 的話是new Animal（）
Cat.prototype.constructor=Cat;//Cat的構造器還是Cat
// })();
var cat=new Cat('Tom');
console.log(cat.name);
cat.sleep();
cat.eat('food')
</script>
</body>
</html>運行結果：
感謝你能夠認真閱讀完這篇文章，希望小編分享的“JS如何實現繼承”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
