亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Js類的構(gòu)建與繼承案例詳解

 更新時(shí)間:2021年09月14日 16:29:20   作者:Carl.Cloud  
這篇文章主要介紹了Js類的構(gòu)建與繼承案例詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下

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)文章

  • bootstrap實(shí)現(xiàn)輪播圖效果

    bootstrap實(shí)現(xiàn)輪播圖效果

    這篇文章主要為大家詳細(xì)介紹了bootstrap實(shí)現(xiàn)輪播圖效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-05-05
  • 基于JavaScript實(shí)現(xiàn)輪盤抽獎(jiǎng)功能

    基于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ā)等功能

    這篇文章主要介紹了微信小程序點(diǎn)擊圖片實(shí)現(xiàn)長(zhǎng)按預(yù)覽、保存、識(shí)別帶參數(shù)二維碼、轉(zhuǎn)發(fā)等功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-07-07
  • js的math中缺少的數(shù)學(xué)方法小結(jié)

    js的math中缺少的數(shù)學(xué)方法小結(jié)

    JavaScript?Math對(duì)象包含一些真正有用且強(qiáng)大的數(shù)學(xué)運(yùn)算,但它缺乏大多數(shù)其他語(yǔ)言提供的許多重要運(yùn)算,例如求和,乘積,奇數(shù)和偶數(shù)等等,本文就來(lái)介紹一下
    2023-08-08
  • javascript函數(shù)特點(diǎn)實(shí)例分析

    javascript函數(shù)特點(diǎn)實(shí)例分析

    這篇文章主要介紹了javascript函數(shù)特點(diǎn),實(shí)例分析了javascript函數(shù)傳遞參數(shù)及調(diào)用方法,需要的朋友可以參考下
    2015-05-05
  • JS實(shí)現(xiàn)自定義狀態(tài)欄動(dòng)畫文字效果示例

    JS實(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
  • JS重要知識(shí)點(diǎn)小結(jié)

    JS重要知識(shí)點(diǎn)小結(jié)

    這里列出了一些JS重要知識(shí)點(diǎn)(不全面,但自己感覺(jué)很重要)。徹底理解并掌握這些知識(shí)點(diǎn),對(duì)于每個(gè)想要深入學(xué)習(xí)JS的朋友應(yīng)該都是必須的
    2011-11-11
  • GoJs基本使用示例詳解

    GoJs基本使用示例詳解

    這篇文章主要為大家介紹了GoJs基本使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-04-04
  • JavaScript實(shí)現(xiàn)放大鏡效果

    JavaScript實(shí)現(xiàn)放大鏡效果

    這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)放大鏡效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-10-10
  • javascript設(shè)計(jì)模式 接口介紹

    javascript設(shè)計(jì)模式 接口介紹

    最近在看javascript設(shè)計(jì)模式的書籍《pro javascript design pattrens》,覺(jué)得很不錯(cuò),可以提高自己對(duì)js oo的理解,也可能幫助自己更好的理解別人寫的js library,提高自己js的水平
    2012-07-07

最新評(píng)論