Js類的構(gòu)建與繼承案例詳解
JS里類的定義和繼承實(shí)在五花八門(mén),所以單獨(dú)開(kāi)一個(gè)筆記本記錄。
定義
派生于Object的方式
1.new Object:在創(chuàng)建對(duì)象后動(dòng)態(tài)定義屬性、方法
var Car = new Object;
Car.color = "red";
Car.showColor = function(){
console.log(this.color);
}
//想要繼承就要先構(gòu)造空對(duì)象然后用__proto__原型鏈來(lái)繼承
var Car1 = new Object; //或者 = {}
Car1.__proto__ = Car;
使用函數(shù)構(gòu)造
1.工廠函數(shù):在函數(shù)內(nèi)生成類,好處是不用再構(gòu)造空對(duì)象+繼承原型鏈,直接返回一個(gè)對(duì)象的復(fù)制,類似于構(gòu)造函數(shù)
function createCar(){ //也可以為此函數(shù)傳遞參數(shù)creatCar(color)
let car = new Object;
car.color = "red"; //傳遞參數(shù):car.color = color
car.showColor = function(){
console.log(this.color);
}
return car;
}
var newCar = createCar(); //傳遞參數(shù):createCar("red")
//但是使用工廠函數(shù),每構(gòu)造一個(gè)函數(shù)就會(huì)構(gòu)建一次showColor方法,很不劃算
//所以可以在類的工廠函數(shù)之前為所有類統(tǒng)一確定一個(gè)用于繼承的方法
function showColor(){
console.log(this.color);
}
function createCar(){
...
car.showColor = showColor;
...
}
2.構(gòu)造函數(shù)方法:類似于工廠函數(shù)方法,使用構(gòu)造函數(shù)方法。不同的是構(gòu)造函數(shù)內(nèi)屬性只能為this.attr
function Car(color,num){
this.color = color;
this.num = num;
this.showColor = function(){
console.log(this.color);
}
this.drivers = new Array("mike");
}
var car1 = new Car("red",1); //注意,此時(shí)Car本身的屬性和方法不能被訪問(wèn),只能實(shí)例化之 后訪問(wèn)
//比如:console.log(new Car("red",1).color)
//這表示,構(gòu)造函數(shù)真的是類似類的構(gòu)造函數(shù)而非實(shí)例化對(duì)象,js也 //有傳統(tǒng)意義的對(duì)象而不是只有函數(shù)對(duì)象
//和方式1一樣Car的類內(nèi)函數(shù)showColor將在每次構(gòu)造時(shí)被構(gòu)造出來(lái),占據(jù)了沒(méi)必要的空間
var car2 = new Car("green",1);
car1.drivers.push("kiki");
console.log(car2.drivers); //不存在引用同一個(gè)數(shù)組的現(xiàn)象
3.原型方法:類似于Object派生,形成基于Object的原型鏈,再綁定方法和屬性
function Car(){};
Car.prototype.color = "red";
Car.prototype.showColor = function(){
console.log(this.color);
}
//Car.prototyoe = { //把多個(gè)綁定的函數(shù)放進(jìn)一個(gè)匿名的類來(lái)寫(xiě)
// mathod1:function(){...};
// mathod2:function(){...};
//}
Car.prototype.drivers = new Array("mike","jhon");
var car1 = new Car(); //一定要?jiǎng)?chuàng)建實(shí)例才能調(diào)用方法訪問(wèn)屬性
var car2 = new Car();
car1.drivers.push("bill");
console.log(car1.color);
console.log(car2.drivers);
//這樣綁定arry的屬性全部都指向同一個(gè)數(shù)組對(duì)象,屬于引用。當(dāng)改變一個(gè)實(shí)例的color,所有的color都一起變了
混合方法:
1.構(gòu)造函數(shù)+原型:構(gòu)造函數(shù)內(nèi)只構(gòu)造屬性和類內(nèi)數(shù)組,而用原型的方式聲明類內(nèi)函數(shù)
function Car(color){
this.color = color;
this.drivers = new Array("mike");
}
Car.prototype.showColor = function(){
console.log(this.color);
}
var car1 = new Car(); //一定要?jiǎng)?chuàng)建實(shí)例才能調(diào)用方法訪問(wèn)屬性
var car2 = new Car();
car1.drivers.push("bill");
console.log(car2.drivers); //避免了原型方法的缺點(diǎn)
2.使用class關(guān)鍵字定義類:不能在類外直接定義屬性,仍需要使用prototype方法在類外綁定函數(shù)對(duì)象。
class Car{
constructor(color) {
this.color = color;
}
drivers = new Array("mike","jhon");
hello = function(){
return "Di Di"+ this.color;
}
}
Car.prototype.hello = function (){ //類外綁定方法
return "Di Di";
}
var car1 = new Car("red");
var car2 = new Car("green");
car1.drivers.push("kiki");
console.log(car1.color);
console.log(car2.hello());
綜上,當(dāng)在類內(nèi)定義變量時(shí),在構(gòu)造實(shí)例時(shí)會(huì)隨之一起調(diào)用構(gòu)造函數(shù)進(jìn)行構(gòu)造,而類外綁定的方法、屬性將會(huì)是一種引用的形式不參與構(gòu)造直接調(diào)用。同時(shí),也便于保密,隱藏信息。
繼承
1.偽裝繼承:把類作為新類的構(gòu)造函數(shù)來(lái)繼承,有點(diǎn)神奇,js里類可以當(dāng)成函數(shù)對(duì)象的奇特屬性
function Car1(color){
this.color = color;
this.showColor = function(){
console.log("this car is "+this.color);
}
this.drivers = new Array("mike");
}
function Car2(){
this.makeSound = function(){
console.log("Di Di");
}
}
function Car3(color){
this.newConstruct = Car1; //作為構(gòu)造函數(shù)傳入
this.newConstruct(color); //調(diào)用構(gòu)造函數(shù)
delete this.newConstruct;
this.newConstruct2 = Car2; //多重繼承,但是由于閉包機(jī)制,要用不同的構(gòu)造函數(shù)名
this.newConstruct2();
delete this.newConstruct2;
}//同樣,偽裝繼承也可以用.prototype來(lái)綁定構(gòu)造函數(shù)
var car1 = new Car3("red");
var car2 = new Car3("green");
car1.drivers.push("kiki");
console.log(car1.color);
car1.showColor();
car1.makeSound();
console.log(car2.drivers);
2.用父類的方法call和apply進(jìn)行繼承
function Car1(color){
this.color = color;
this.showColor = function(){
console.log("this car is"+this.color);
}
}
function Car2(num){
this.num = num;
this.makeSound = function(){
console.log("Di Di");
}
}
function Car3(color,num){
Car1.call(this, color);
Car2.apply(this, augments);//augments為一個(gè)數(shù)組,包含所需的參數(shù)
}
var car1 = new Car3("red",1);
var car2 = new Car3("green",2);
console.log(car1.color);
console.log(car2.num);
car1.showColor();
car1.makeSound();
//也可以把.apply和.call寫(xiě)在類外,但只能對(duì)實(shí)例進(jìn)行操作,不能用于構(gòu)成類
3.用原型鏈進(jìn)行繼承:使用__proto__和.prototype構(gòu)成原型鏈,缺點(diǎn)是不能實(shí)現(xiàn)多重繼承,只能通過(guò)綁定成構(gòu)造函數(shù)或者再創(chuàng)造幾個(gè)類用鏈?zhǔn)椒绞嚼^承來(lái)來(lái)實(shí)現(xiàn)多重繼承
function Car1(color){
this.color = color;
this.showColor = function(){
console.log("this car is"+this.color);
}
}
function Car3(){};
Car3.prototype = new Car1();
4.用class...extends...,也可以實(shí)現(xiàn)繼承,但是不能實(shí)現(xiàn)多重繼承,也只能像原型鏈一樣用多個(gè)類作為節(jié)點(diǎn)的方式來(lái)實(shí)現(xiàn)多重繼承,屬于是ES6的特性了。ES6還引入了let、public、private、protected關(guān)鍵字但是不能實(shí)現(xiàn)多重繼承,也沒(méi)有什么包的概念也是挺奇葩的
class Car2 extends Car1{
constructor(color) {
super(); //類似java,super本身可以代表父類,此處是用了代表父類的
//構(gòu)造函數(shù)
this.color = color;
}
drivers = new Array("mike","jhon");
hello = function(){
return "Di Di"+ this.color;
}
}
5.使用參數(shù)可變的封裝函數(shù)extend(需要自己實(shí)現(xiàn))實(shí)現(xiàn)多個(gè)類的按順序繼承extend(A,B,C)的鏈?zhǔn)嚼^承,B節(jié)點(diǎn)繼承A,C繼承B(實(shí)際上還是鏈?zhǔn)椒绞?,但是封裝了好理解,是知乎大佬曉宏和csdn大佬浴盆的答案,https://blog.csdn.net/sysuzhyupeng/article/details/54846949知乎那個(gè)寫(xiě)法不容易理解)。主要還是利用類可以為函數(shù)并可作為返回值的特性
所以,正常情況下:創(chuàng)建類用class或者構(gòu)造函數(shù)+原型的方式;繼承類用class...extends...或者call方法。了解工廠方法和偽裝繼承。
重載就不細(xì)究了,和class一樣不完善,只能自己用augments.length去實(shí)現(xiàn)。
到此這篇關(guān)于Js類的構(gòu)建與繼承案例詳解的文章就介紹到這了,更多相關(guān)Js類的構(gòu)建與繼承內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript中scrollTo()無(wú)效問(wèn)題處理辦法
這篇文章主要給大家介紹了關(guān)于JavaScript中scrollTo()無(wú)效問(wèn)題處理辦法,scrollTo()方法將文檔滾動(dòng)到指定的坐標(biāo),如需使 scrollTo()方法起作用,文檔必須大于屏幕,并且滾動(dòng)條必須可見(jiàn),需要的朋友可以參考下2024-01-01
JS實(shí)現(xiàn)的驗(yàn)證身份證及獲取地區(qū)功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)的驗(yàn)證身份證及獲取地區(qū)功能,結(jié)合實(shí)例形式分析了JS字符串、數(shù)組及正則操作相關(guān)技巧,需要的朋友可以參考下2017-01-01
Express框架詳解app函數(shù)使用實(shí)例
這篇文章主要為大家介紹了Express框架app函數(shù)使用實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03
淺談關(guān)于JS下大批量異步任務(wù)按順序執(zhí)行解決方案一點(diǎn)思考
這篇文章主要介紹了淺談關(guān)于JS下大批量異步任務(wù)按順序執(zhí)行解決方案一點(diǎn)思考,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
javascript 刪除數(shù)組元素和清空數(shù)組的簡(jiǎn)單方法
這篇文章主要介紹了javascript 刪除數(shù)組元素和清空數(shù)組的簡(jiǎn)單方法的相關(guān)資料,需要的朋友可以參考下2017-02-02
JavaScript判斷表單提交時(shí)哪個(gè)radio按鈕被選中的方法
這篇文章主要介紹了JavaScript判斷表單提交時(shí)哪個(gè)radio按鈕被選中的方法,實(shí)例分析了javascript操作表單radio按鈕的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03
JS實(shí)現(xiàn)title標(biāo)題欄文字不間斷滾動(dòng)顯示效果
這篇文章主要介紹了JS實(shí)現(xiàn)title標(biāo)題欄文字不間斷滾動(dòng)顯示效果,通過(guò)javascript時(shí)間函數(shù)定時(shí)操作動(dòng)態(tài)修改頁(yè)面元素實(shí)現(xiàn)滾動(dòng)效果,需要的朋友可以參考下2016-09-09
js左右彈性滾動(dòng)對(duì)聯(lián)廣告代碼分享
這個(gè)對(duì)聯(lián)廣告與其它的有所區(qū)別,這個(gè)是頁(yè)面加載時(shí)先沒(méi)看到廣告,然后從左邊快速飛進(jìn)來(lái)的兩個(gè)對(duì)聯(lián)廣告哦,下面我們一起來(lái)看看對(duì)聯(lián)廣告效果代碼2014-02-02
Javascript實(shí)現(xiàn)鼠標(biāo)右鍵特色菜單
鼠標(biāo)右鍵大家都經(jīng)常操作,但是鼠標(biāo)的內(nèi)容是不是符合大家的“口味”?這篇文章就是教大家如何定制自己專屬鼠標(biāo)右鍵,需要的朋友可以參考下2015-08-08

