在JS中繼承是一個非常復雜的話題,比其他任何面向對象語言中的繼承都復雜得多。
在大多數其他面向對象語言中,繼承一個類只需使用一個關鍵字即可。在JS中想要達到繼承公用成員的目的,需要采取一系列措施。JS屬于原型式繼承,得益于這種靈活性,我們既可以使用標準的基于類的繼承,也可以使用更微妙一些的原型式繼承。在JS中應該要明確一點,一切繼承都是通過prototype來進行的,且JS是基于對象來繼承的。(這話是比較官方的說法,看著都很專業(yè))
在說繼承之前,首先得先回答一個問題,什么是繼承?
我理解的繼承,簡單來說就是,
--1.在原有類的基礎上,進行可操作的修改,得到一個嶄新的類,這個類有原來類的功能,同時也有自己的功能;
--2.這個新的類,不會影響原有類的功能,不會相互干預;
這里肯定有人要問了,什么是‘可操作的修改呢?’說白了就是在不影響整個類的功能的前提下,進行的修改!這點和第二點略有重復,仔細想想,還是有所區(qū)別的!?。?br>
下面開始說說常用的集中繼承方式:
1.代碼:
function Person(name, sex) {
this.name = name;
this.sex = sex;
}
Person.prototype.showName = function() {
console.log(this.name);
}
Person.prototype.showSex = function() {
console.log(this.sex);
}
function work(name, sex, job) {
//構造函數偽裝調用父級的構造函數——為了繼承屬性
Person.call(this, name, sex);
//Person.apply(this, [name, sex]); //此處的call與apply是有區(qū)別的,往下看
this.job = job;
}
work.prototype = Person.prototype; //通過prototype繼承父級的屬性
work.prototype.showJob = function() {
console.log(this.job);
}
var s = new work('xue', 'nan', 'developer');
s.showJob() //developer
簡單的解釋一下上面的代碼:首先寫了一個很簡單的構造函數,在函數的原型上分別添加了showName和showSex的方法;緊接著寫了一個work()函數,這里注意work()里面的參數,多了一個job參數,這個參數就是要繼承的參數, Person.call(this, name, sex);有人問這里的this指的是啥?看下圖:

答案就是 <b>new出來的work對象!</b>
work.prototype = Person.prototype;這句話就是通過prototype繼承父級的屬性,name和sex;然后就是在work的基礎上添加showJob方法;
最后就是new一個work對象,執(zhí)行方法!最后work繼承了Person的name和sex屬性;是不是很好懂!
2.代碼:
function Person(name, sex) {
this.name = name;
this.sex = sex;
}
Person.prototype.showName = function() {
alert(this.name);
};
Person.prototype.showSex = function() {
alert(this.sex);
};
function work(name, sex, job) {
Person.call(this, name, sex);
this.job = job;
}
//1.原型鏈 通過原型來繼承父級的方法
//work.prototype=Person.prototype;
// 2.原型鏈 通過原型來繼承父級的方法(循環(huán)方法)
// Person.prototype類型是object;
for (var i in Person.prototype) {
Worker.prototype[i] = Person.prototype[i];
}
Worker.prototype.showJob = function() {
alert(this.job);
};
var p = new Person('xue', 'nan');
var w = new work('xue', 'nan', 'developer');
// p.showName();
// p.showSex();
// w.showName();
// w.showSex();
// w.showJob();
簡單解釋一下:work.prototype=Person.prototype;這里是通過原型鏈來繼承父級的方法;這里肯定有人要問“什么是原型鏈?”后期會講?。?!
for (var i in Person.prototype) {
Worker.prototype[i] = Person.prototype[i];
}
這里只是用不同方法,通過原型鏈來繼承父級的方法,原理是一樣的!
call與apply的區(qū)別
js中call和apply都可以實現繼承,唯一的一點參數不同,func.call(func1,var1,var2,var3)對應的apply寫法為:func.apply(func1,[var1,var2,var3])。
說簡單一點,這兩函數的作用其實就是更改對象的內部指針,即改變對象的this指向的內容。這在面向對象的js編程過程中有時是很有用的。
如有錯誤請私信本人!