Js類的構(gòu)建與繼承案例詳解
JS里類的定義和繼承實在五花八門,所以單獨開一個筆記本記錄。
定義
派生于Object的方式
1.new Object:在創(chuàng)建對象后動態(tài)定義屬性、方法
var Car = new Object;
Car.color = "red";
Car.showColor = function(){
console.log(this.color);
}
//想要繼承就要先構(gòu)造空對象然后用__proto__原型鏈來繼承
var Car1 = new Object; //或者 = {}
Car1.__proto__ = Car;
使用函數(shù)構(gòu)造
1.工廠函數(shù):在函數(shù)內(nèi)生成類,好處是不用再構(gòu)造空對象+繼承原型鏈,直接返回一個對象的復(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)造一個函數(shù)就會構(gòu)建一次showColor方法,很不劃算
//所以可以在類的工廠函數(shù)之前為所有類統(tǒng)一確定一個用于繼承的方法
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); //注意,此時Car本身的屬性和方法不能被訪問,只能實例化之 后訪問
//比如:console.log(new Car("red",1).color)
//這表示,構(gòu)造函數(shù)真的是類似類的構(gòu)造函數(shù)而非實例化對象,js也 //有傳統(tǒng)意義的對象而不是只有函數(shù)對象
//和方式1一樣Car的類內(nèi)函數(shù)showColor將在每次構(gòu)造時被構(gòu)造出來,占據(jù)了沒必要的空間
var car2 = new Car("green",1);
car1.drivers.push("kiki");
console.log(car2.drivers); //不存在引用同一個數(shù)組的現(xiàn)象
3.原型方法:類似于Object派生,形成基于Object的原型鏈,再綁定方法和屬性
function Car(){};
Car.prototype.color = "red";
Car.prototype.showColor = function(){
console.log(this.color);
}
//Car.prototyoe = { //把多個綁定的函數(shù)放進一個匿名的類來寫
// mathod1:function(){...};
// mathod2:function(){...};
//}
Car.prototype.drivers = new Array("mike","jhon");
var car1 = new Car(); //一定要創(chuàng)建實例才能調(diào)用方法訪問屬性
var car2 = new Car();
car1.drivers.push("bill");
console.log(car1.color);
console.log(car2.drivers);
//這樣綁定arry的屬性全部都指向同一個數(shù)組對象,屬于引用。當(dāng)改變一個實例的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(); //一定要創(chuàng)建實例才能調(diào)用方法訪問屬性
var car2 = new Car();
car1.drivers.push("bill");
console.log(car2.drivers); //避免了原型方法的缺點
2.使用class關(guān)鍵字定義類:不能在類外直接定義屬性,仍需要使用prototype方法在類外綁定函數(shù)對象。
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)定義變量時,在構(gòu)造實例時會隨之一起調(diào)用構(gòu)造函數(shù)進行構(gòu)造,而類外綁定的方法、屬性將會是一種引用的形式不參與構(gòu)造直接調(diào)用。同時,也便于保密,隱藏信息。
繼承
1.偽裝繼承:把類作為新類的構(gòu)造函數(shù)來繼承,有點神奇,js里類可以當(dāng)成函數(shù)對象的奇特屬性
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; //多重繼承,但是由于閉包機制,要用不同的構(gòu)造函數(shù)名
this.newConstruct2();
delete this.newConstruct2;
}//同樣,偽裝繼承也可以用.prototype來綁定構(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進行繼承
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為一個數(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寫在類外,但只能對實例進行操作,不能用于構(gòu)成類
3.用原型鏈進行繼承:使用__proto__和.prototype構(gòu)成原型鏈,缺點是不能實現(xiàn)多重繼承,只能通過綁定成構(gòu)造函數(shù)或者再創(chuàng)造幾個類用鏈?zhǔn)椒绞嚼^承來來實現(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...,也可以實現(xiàn)繼承,但是不能實現(xiàn)多重繼承,也只能像原型鏈一樣用多個類作為節(jié)點的方式來實現(xiàn)多重繼承,屬于是ES6的特性了。ES6還引入了let、public、private、protected關(guān)鍵字但是不能實現(xiàn)多重繼承,也沒有什么包的概念也是挺奇葩的
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(需要自己實現(xiàn))實現(xiàn)多個類的按順序繼承extend(A,B,C)的鏈?zhǔn)嚼^承,B節(jié)點繼承A,C繼承B(實際上還是鏈?zhǔn)椒绞剑欠庋b了好理解,是知乎大佬曉宏和csdn大佬浴盆的答案,https://blog.csdn.net/sysuzhyupeng/article/details/54846949知乎那個寫法不容易理解)。主要還是利用類可以為函數(shù)并可作為返回值的特性
所以,正常情況下:創(chuàng)建類用class或者構(gòu)造函數(shù)+原型的方式;繼承類用class...extends...或者call方法。了解工廠方法和偽裝繼承。
重載就不細(xì)究了,和class一樣不完善,只能自己用augments.length去實現(xiàn)。
到此這篇關(guān)于Js類的構(gòu)建與繼承案例詳解的文章就介紹到這了,更多相關(guān)Js類的構(gòu)建與繼承內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
淺談關(guān)于JS下大批量異步任務(wù)按順序執(zhí)行解決方案一點思考
這篇文章主要介紹了淺談關(guān)于JS下大批量異步任務(wù)按順序執(zhí)行解決方案一點思考,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
javascript 刪除數(shù)組元素和清空數(shù)組的簡單方法
這篇文章主要介紹了javascript 刪除數(shù)組元素和清空數(shù)組的簡單方法的相關(guān)資料,需要的朋友可以參考下2017-02-02
JavaScript判斷表單提交時哪個radio按鈕被選中的方法
這篇文章主要介紹了JavaScript判斷表單提交時哪個radio按鈕被選中的方法,實例分析了javascript操作表單radio按鈕的技巧,非常具有實用價值,需要的朋友可以參考下2015-03-03
JS實現(xiàn)title標(biāo)題欄文字不間斷滾動顯示效果
這篇文章主要介紹了JS實現(xiàn)title標(biāo)題欄文字不間斷滾動顯示效果,通過javascript時間函數(shù)定時操作動態(tài)修改頁面元素實現(xiàn)滾動效果,需要的朋友可以參考下2016-09-09
Javascript實現(xiàn)鼠標(biāo)右鍵特色菜單
鼠標(biāo)右鍵大家都經(jīng)常操作,但是鼠標(biāo)的內(nèi)容是不是符合大家的“口味”?這篇文章就是教大家如何定制自己專屬鼠標(biāo)右鍵,需要的朋友可以參考下2015-08-08

