Js中類構(gòu)建與繼承的示例分析

這篇文章將為大家詳細講解有關(guān)Js中類構(gòu)建與繼承的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

定義

派生于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)造空對象+繼承原型鏈，直接返回一個對象的復制，類似于構(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ù)組對象，屬于引用。當改變一個實例的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());

綜上，當在類內(nèi)定義變量時，在構(gòu)造實例時會隨之一起調(diào)用構(gòu)造函數(shù)進行構(gòu)造，而類外綁定的方法、屬性將會是一種引用的形式不參與構(gòu)造直接調(diào)用。同時，也便于保密，隱藏信息。

繼承

1.偽裝繼承：把類作為新類的構(gòu)造函數(shù)來繼承，有點神奇，js里類可以當成函數(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)造幾個類用鏈式方式繼承來來實現(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; 
           }  
        }

關(guān)于“Js中類構(gòu)建與繼承的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。