Js類的構(gòu)建與繼承案例詳解
JS里類的定義和繼承實(shí)在五花八門,所以單獨(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)寫 // 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寫在類外,但只能對(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)椒绞剑欠庋b了好理解,是知乎大佬曉宏和csdn大佬浴盆的答案,https://blog.csdn.net/sysuzhyupeng/article/details/54846949知乎那個(gè)寫法不容易理解)。主要還是利用類可以為函數(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實(shí)現(xiàn)輪盤抽獎(jiǎng)功能
對(duì)于有選擇困難癥的朋友來(lái)說(shuō),有個(gè)轉(zhuǎn)盤抽獎(jiǎng)功能再好不過(guò)了,今天通過(guò)本文給大家分享基于Js實(shí)現(xiàn)輪盤抽獎(jiǎng)功能,感興趣的朋友一起看看吧2023-01-01微信小程序點(diǎn)擊圖片實(shí)現(xiàn)長(zhǎng)按預(yù)覽、保存、識(shí)別帶參數(shù)二維碼、轉(zhuǎn)發(fā)等功能
這篇文章主要介紹了微信小程序點(diǎn)擊圖片實(shí)現(xiàn)長(zhǎng)按預(yù)覽、保存、識(shí)別帶參數(shù)二維碼、轉(zhuǎn)發(fā)等功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07js的math中缺少的數(shù)學(xué)方法小結(jié)
JavaScript?Math對(duì)象包含一些真正有用且強(qiáng)大的數(shù)學(xué)運(yùn)算,但它缺乏大多數(shù)其他語(yǔ)言提供的許多重要運(yùn)算,例如求和,乘積,奇數(shù)和偶數(shù)等等,本文就來(lái)介紹一下2023-08-08javascript函數(shù)特點(diǎn)實(shí)例分析
這篇文章主要介紹了javascript函數(shù)特點(diǎn),實(shí)例分析了javascript函數(shù)傳遞參數(shù)及調(diào)用方法,需要的朋友可以參考下2015-05-05JS實(shí)現(xiàn)自定義狀態(tài)欄動(dòng)畫文字效果示例
這篇文章主要介紹了JS實(shí)現(xiàn)自定義狀態(tài)欄動(dòng)畫文字效果,涉及javascript結(jié)合時(shí)間函數(shù)動(dòng)態(tài)設(shè)置IE狀態(tài)欄文字顯示效果相關(guān)操作技巧,需要的朋友可以參考下2017-10-10