JS的繼承方法總結(附案例)

原型鏈繼承

核心：將父類別的實例作為子類別的原型
特點：
1：非常純粹的繼承關係，實例是子類的實例，也是父類別的實例
2：父類別新增原型方法，子類別都能存取到
缺點：
1：要想為子類別新增屬性和方法，必須在new Animal()之後，無法實作多重繼承
2：建立子類別實例時，無法向父類別建構函式傳參

function Animal(name){
    this.name=name;
    this.sleep=function(){
        console.log(this.name+"正在睡觉");
    }
}
Animal.prototype.eat=function() {
    console.log(this.name + "正在吃");
}
function Cat(){
}
Cat.prototype=new Animal();
Cat.prototype.name="猫";
var cat=new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat.eat());
console.log(cat instanceof Cat);//true
console.log(cat instanceof Animal);//true

建構繼承
核心：使用父類別的建構子來增強子類別實例，等於複製父類別的實例屬性給子類別（沒用到原型）
特點：
1：建立子類別實例時，可以傳遞參數參數
2：可以實作多繼承
缺點：
1：實例不是父類別的實例，只是子類別的實例
2：只能繼承父類別的屬性和方法，不能繼承原型屬性和方法
3：無法實作函數重複使用，每個子類別都有父類別實例函數的副本，影響效能

    function Animal(name){
            this.name=name;
            this.sleep=function(){
                console.log(this.name+"正在睡觉");
            }
        }
        Animal.prototype.eat=function() {
            console.log(this.name + "正在吃");
        }
                function Cat(name){
                Animal.call(this);
                this.name=name;
        }
        var cat=new Cat("猫");
        console.log(cat.name);
        console.log(cat.sleep());
//        console.log(cat.eat());不能继承原型化方法
        console.log(cat instanceof Cat);//true
        console.log(cat instanceof Animal);//false

#實例繼承

function Animal(name){
    this.name=name;
    this.sleep=function(){
        console.log(this.name+"正在睡觉");
    }
}
Animal.prototype.eat=function() {
    console.log(this.name + "正在吃");
}
function Cat(name){
    var instance=new Animal();
    instance.name=name;
    return instance;
}
var cat=new Cat("猫");
console.log(cat.name);
console.log(cat.sleep());
console.log(cat.eat());
console.log(cat instanceof Cat);//false
console.log(cat instanceof Animal);//true

特點：
不限制呼叫方式，不管是new 子類別()或子類別(),傳回的物件具有相同的效果
缺點：
實例是父類別的實例，不是子類的實例
不支援多重繼承
組合繼承

function Animal(name){
    this.name=name;
    this.sleep=function(){
        console.log(this.name+"正在睡觉");
    }
}
Animal.prototype.eat=function() {
    console.log(this.name + "正在吃");
}
function Cat(name){
    Animal.call(this);
    this.name=name;
    }
Cat.prototype=new Animal();
var cat=new Cat("猫");
console.log(cat.name);
console.log(cat.sleep());
console.log(cat.eat());
console.log(cat instanceof Cat);//true
console.log(cat instanceof Animal);//true

其他：
1：表單驗證
post安全提交，不會暴露資訊
get會暴露資訊
2：瀏覽器物件
3：navigator包含有關瀏覽器資訊navigator.appName回傳瀏覽器名稱
4：封裝類別的屬性可以自訂，name是自訂的

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

如何綁定方向鍵控制div移動

#怎麼做出點擊標題文字切換字體效果

以上是JS的繼承方法總結(附案例)的詳細內容。更多資訊請關注PHP中文網其他相關文章！