最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

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í)在五花八門(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)文章

最新評(píng)論

个旧市| 宣化县| 屏山县| 原平市| 鲁山县| 新龙县| 襄城县| 盐边县| 休宁县| 孝昌县| 西林县| 买车| 台江县| 玉门市| 邢台市| 英吉沙县| 阜阳市| 基隆市| 嘉义县| 龙门县| 宁乡县| 大城县| 韶山市| 麦盖提县| 永丰县| 牡丹江市| 新和县| 大英县| 唐山市| 德庆县| 铅山县| 桑日县| 汉川市| 泰顺县| 甘孜县| 黔西| 新丰县| 吴忠市| 封丘县| 吉隆县| 教育|