接觸面向對象許久了,對於繼承這一塊也確實琢磨了一段時間,搜集各種資料和網站,也未能得到使自己滿意的,並能快速理解的繼承知識,於是對他們歸類,並得出自己的總結。 先說說繼承是什麼吧?也許我們最早接觸有關繼承的應該是“遺產”??也許電視劇看多了,總有家族為了這玩意兒整的你死我活,確實聽看不下去的哈,但是 ...
接觸面向對象許久了,對於繼承這一塊也確實琢磨了一段時間,搜集各種資料和網站,也未能得到使自己滿意的,並能快速理解的繼承知識,於是對他們歸類,並得出自己的總結。
先說說繼承是什麼吧?也許我們最早接觸有關繼承的應該是“遺產”??也許電視劇看多了,總有家族為了這玩意兒整的你死我活,確實聽看不下去的哈,但是對於咱大JS而言,可就變得十分和藹,可親。畢竟沒有人來爭奪,也不會有任何事故,最多來些許bug等等。廢話不多說,進入正題!!
1、擴展原型對象繼承:往原型對象中添加新的屬性。
這應該是最基礎的繼承了吧,往對象中添加新的屬性和方法,實例就可以共用了。
直接上例子:
function Person(){ };
Person.prototype.say = function(){};
var p1 = new Person();
====》此時,p1就含有say()這個方法了;
2、替換原型對象繼承:需要給實例添加很多方法,一個一個往預設的原型對象中進行擴展會很麻煩,此時我們就可以把預設的原型對象替換掉,一起添加。
例子:
function Bird(){};
Bird.prototype.say = function(){};
Bird.prototype={
constructor:Bird,
c1:function(){},
c2:function(){},
c3:function(){}
};//新的原型對象
var maque = new Bird();
console.log(maque);
console.log(maque.constructor);
//通過控制台輸出,你會發現原來的say方法不存在了,取而代之的是新的c1、c2、c3方法
3、混入繼承:將一個對象的功能(屬性、方法)拷貝到另一個對象中。
var o = {name:"王五",age:30};
var o2 = {gender:"男"};
//遍歷o的功能,將這些功能添加到o2中去
for(var key in o) {
o2[key] = o[key];
}
console.log(o2);
4、原型+混入繼承
function Man(){};
//這裡將上述的混入繼承封裝成了一個函數如下:
function extend(target, source) {
for(var key in source) {
var value = source[key];
target[key] = value;
}
return value;
}
//往Man的原型中擴展多個方法(同一對象),調用上述方法。
extend(Man.prototype, {
age:function(){},
height:function(){},
nation:function(){}
});
var hMan = new Man();
console.log(hMan.age());
5、原型鏈繼承:創建一個對象,讓這個對象繼承自另一個對象
//想要創建一個對象,就需要一個媒介(構造函數);
function F(){};
var o2 = {age:30};
//設置原型對象
F.prototype=o2;
var o1 = new F();
//封裝一下就是如下這個樣子
function create(o2) {
function F(){};
//設置原型對象
F.prototype = o2;
//返回創建的新對象
return new F();
}
6、原型鏈繼承:任何對象都是繼承自原型對象,原型對象也有他自己的原型對象。(學好原型鏈)
7、借用構造函數繼承:在子類構造函數的內部調用超類型構造函數,可以通過apply()和call()方法,在新創建的對象上執行構造函數。
function SuperType() {
this.colors = { "red", "blue","green"};
}
function SubType(){
//繼承了SuperType
SuperType.call(this);
}
var instance1 = new SubType();
instance1.colors.push("black");
console.log(instance1.colors); //red,blue,green,black
var instance2 = new SubType();
console.log(instance2.colors);//red,blue,green