繼承,是子類繼承父類的特徵和行爲,使得子類對象具備父類的實例域和方法。 繼承是面向對象編程中,不可或缺的一部分。
html
減小代碼冗餘
父類能夠爲子類提供通用的屬性,而沒必要由於增長功能,而逐個修改子類的屬性代碼複用
同上代碼易於管理和擴展
子類在父類基礎上,能夠實現本身的獨特功能耦合度高
若是修改父類代碼,將影響全部繼承於它的子類影響性能
子類繼承於父類的數據成員,有些是沒有使用價值的。可是,在實例化的時候,已經分配了內存。因此,在必定程度上影響程序性能。1:首先定義一個父類前端
// 定義一個動物類
function Animal (name) {
// 屬性
this.name = name || 'Animal';
// 實例方法
this.sleep = function(){
console.log(this.name + '正在睡覺!');
}
}
// 原型方法
Animal.prototype.eat = function(food) {
console.log(this.name + '正在吃:' + food);
};
複製代碼
注:不一樣繼承方式可能只繼承父類的屬性和實例方法,也可能只繼承原型的方法,也可能二者都繼承(看完下面的幾種繼承方式後應該就明白了)編程
核心: 將父類的實例(*)做爲子類的原型bash
function Cat(){
}
Cat.prototype = new Animal();
Cat.prototype.name = 'cat';
var cat = new Cat();
console.log(cat.name);
console.log(cat.eat('fish'));
console.log(cat.sleep());
console.log(cat instanceof Animal); //true
console.log(cat instanceof Cat); //true
複製代碼
注:若是隻是將子類的原型對象指向父類的原型對象(不是實例),則只繼承原型的方法函數
function Lion(){
}
Lion.prototype = Animal.prototype
console.log(cat.eat('fish'));
console.log(cat.sleep()); // Uncaught TypeError: lion.sleep is not a function
複製代碼
特色:post
缺點:性能
new Animal()
這樣的語句以後執行,不能放到構造器中核心:使用父類的構造函數來加強子類實例,等因而複製父類的實例屬性給子類(沒用到原型)
學習
function Cat(name){
Animal.call(this);
this.name = name || 'Tom';
}
// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat.eat()); // Uncaught TypeError: cat.eat is not a function
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true複製代碼
特色:ui
缺點:this
核心:爲父類實例添加新特性,做爲子類實例返回
function Cat(name){
var instance = new Animal();
instance.name = name || 'Tom';
return instance;
}
// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // false
複製代碼
特色:
new 子類()
仍是子類()
,返回的對象具備相同的效果缺點:
function Cat(name){
var animal = new Animal();
for(var p in animal){
Cat.prototype[p] = animal[p];
}
Cat.prototype.name = name || 'Tom';
}
// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true複製代碼
特色:
缺點:
核心:經過調用父類構造,繼承父類的屬性並保留傳參的優勢,而後經過將父類實例做爲子類原型,實現函數複用
function Cat(name){
Animal.call(this);
//此處能夠調用相似Animal的多個父類構造函數,實現多繼承
this.name = name || 'Tom';
}
Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;
// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // true複製代碼
特色:
缺點:
核心:經過寄生方式,砍掉父類的實例屬性,這樣,在調用兩次父類的構造的時候,就不會初始化兩次實例方法/屬性,避免的組合繼承的缺點
function Cat(name){
Animal.call(this);
this.name = name || 'Tom';
}
(function(){
// 建立一個沒有實例方法的類
var Super = function(){};
Super.prototype = Animal.prototype;
//將實例做爲子類的原型(new Super()的實例不包含Animal的屬性和實例方法,只包含Animal的原型方法,
因此比第五種方法少初始化了一次Animal的屬性和實例方法)
Cat.prototype = new Super();
})();
// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); //true複製代碼
參考:https://juejin.im/post/5b5f3e9c5188257bcc167bc6
https://www.cnblogs.com/humin/p/4556820.html
前端小白第一次寫 主要但願幫助本身更好了理解和學習 能對你們有幫助的話也是很是欣慰,謝謝參考的兩位的文章
但願多提意見,,,可是勿噴,謝謝你們~~