欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

全面分析JavaScript 繼承

 更新時(shí)間：2019年05月30日 09:52:12   作者：文叔叔  
在JAVASCRIPT中，類(lèi)的所有實(shí)例對(duì)象都是從同一個(gè)原型對(duì)象（父類(lèi)）上繼承屬性，所以原型對(duì)象是類(lèi)繼承機(jī)制的核心?；蛘呤怯脩?hù)自己定義的類(lèi)，下面小編帶大家學(xué)習(xí)一下吧

ES6之前，JavaScript并沒(méi)有繼承這一現(xiàn)有的機(jī)制。

ES5的繼承方式

類(lèi)式繼承

//聲明父類(lèi)
function Father(){
this.fatherVal = 'father';
}
//為父類(lèi)添加共有方法
Father.prototype.getFatherValue = function(){
return this.fatherVal;
}
//聲明子類(lèi) 
function Child(){
this.childVal = 'child';
}
//繼承父類(lèi)
Child.prototype = new Father();
//為子類(lèi)添加共有方法
Child.prototype.getChildValue = function(){
return this.childVal;
}

子類(lèi)的prototype被賦予父類(lèi)的實(shí)例,新創(chuàng)建的對(duì)象復(fù)制了父類(lèi)的構(gòu)造函數(shù)內(nèi)的屬性和方法并且將原型_proto_指向了父類(lèi)的原型對(duì)象，這樣就擁有了父類(lèi)的原型對(duì)象上的屬性和方法與父類(lèi)構(gòu)造函數(shù)中復(fù)制的屬性和方法。

var instance = new Child();
console.log(instance.getFatherValue()); //father
console.log(instance.getChildValue()); //child
console.log(instance instanceof Child); //true
console.log(instance instanceof Father); //true
console.log(instance instanceof Object); //true
console.log(Child instanceof Father); //false
console.log(Child.prototype instanceof Father); //true

缺點(diǎn)：

1.子類(lèi)實(shí)例共用父類(lèi)的公有引用屬性。

2.無(wú)法對(duì)父類(lèi)構(gòu)造函數(shù)內(nèi)的屬性進(jìn)行傳參初始化。

function Father(){
this.companies =['bigo','yy','uc']
}
funtion Child(){}
Child.prototype = new Father();
var instanceA = new Child();
var instanceB = new Child();
console.log(instanceB.companies); //['bigo','yy','uc']
instanceA.companies.push('nemo');
console.log(instanceB.companies); //['bigo','yy','uc','nemo']

構(gòu)造函數(shù)繼承

//聲明父類(lèi)
function Father(val){
this.companies =['bigo','yy','uc']
this.val = val;
}
//聲明父類(lèi)原型方法
Father.prototype.getCom = function(){
console.log(this.companies);
}
//聲明子類(lèi)
function Child(val){
//繼承
Father.call(this,val);
}
var instanceA = new Child('childA');
var instanceB = new Child('childB');
instanceA.companies.push('nemo');
console.log(instanceA.companies); //['bigo','yy','uc','nemo']
console.log(instanceA.val); //childA
console.log(instanceB.companies); //['bigo','yy','uc']
console.log(instanceB.val); //childB

對(duì)Child調(diào)用call，將子類(lèi)中的變量在父類(lèi)中執(zhí)行一遍，然后父類(lèi)給this綁定，所以子類(lèi)繼承了父類(lèi)的公有屬性。

缺點(diǎn)：

由于這種類(lèi)型的繼承沒(méi)有設(shè)計(jì)原型prototype，所以父類(lèi)的原型方法不會(huì)被子類(lèi)繼承，而如果想被子類(lèi)繼承就必須放在構(gòu)造函數(shù)中，這樣創(chuàng)建出來(lái)的每個(gè)實(shí)例都會(huì)單獨(dú)擁有一份而不能共用。

組合繼承

//聲明父類(lèi)
function Father(val){
this.companies =['bigo','yy','uc']
this.val = val;
}
//聲明父類(lèi)原型方法
Father.prototype.getValue = function(){
console.log(this.val);
}
//聲明子類(lèi)
function Child(val,newVal){
//構(gòu)造函數(shù)式繼承
Father.call(this,val);
this.newVal = newVal;
}
//類(lèi)式繼承
Child.prototype = new Father();
//聲明子類(lèi)原型方法
Child.prototype.getNewValue = function(){
console.log(this.newVal);
}
var instanceA = new Child("fatherA","childA");
instanceA.companies.push('nemo');
console.log(instanceA.companies); //['bigo','yy','uc','nemo']
instanceA.getValue(); //fatherA
instanceA.getNewValue(); //childA
var instanceB = new Child("fatherB","childB");
console.log(instanceA.companies); //['bigo','yy','uc']
instanceB.getValue(); //fatherB
instanceB.getNewValue(); //childB

缺點(diǎn):

在使用構(gòu)造函數(shù)繼承使用執(zhí)行了一遍父類(lèi)的構(gòu)造函數(shù)，在實(shí)現(xiàn)子類(lèi)原型的類(lèi)式繼承再調(diào)用了一遍父類(lèi)的構(gòu)造函數(shù)，父類(lèi)構(gòu)造函數(shù)被調(diào)用了兩次。

原型式繼承

function inheritObject(obj){
function F(){};
F.prototype = obj;
return new F();
}
var situation = {
companies:['bigo','yy','uc'];
area:'guangzhou';
}
var situationA = inheritObject(situation);
situationA.area = 'shenzhen';
situationA.companies.push('tencent');
var situationB = inheritObject(situation);
situationB.area = 'beijing';
situationB.companies.push('baidu');
console.log(situationA.area); //shenzhen
console.log(situationA.companies); //['bigo','yy','uc','tencent','baidu']
console.log(situationB.area); //beijing
console.log(situationB.companies); //['bigo','yy','uc','tencent','baidu']
console.log(situation.area); //guangzhou
console.log(situation.companies); //['bigo','yy','uc','tencent','baidu']

是類(lèi)式繼承的一個(gè)封裝，其中的過(guò)渡對(duì)象就相當(dāng)于類(lèi)式繼承的子類(lèi)，然后返回新的實(shí)例化對(duì)象。

缺點(diǎn)：

跟類(lèi)式繼承一樣，父類(lèi)的公有引用屬性被共有。

寄生式繼承

function inheritObject(obj){
function F(){};
F.prototype = obj;
return new F();
}
var situation = {
companies:['bigo','yy','uc'];
area:'guangzhou';
}
function createSituation(obj){
//通過(guò)原型繼承創(chuàng)建新對(duì)象
var newObj = new inheritObject(obj);
//定義新對(duì)象方法
newObj.getArea = function(){
console.log(newObj.area)
}
//返回對(duì)象
return obj;
}

只是在原型式繼承的基礎(chǔ)上添加了新屬性和方法，還是跟原型式繼承一樣的缺點(diǎn)。

寄生式組合繼承

function inheritObject(obj){
function F(){};
F.prototype = obj;
return new F();
}
//傳遞參數(shù) child,parent 子類(lèi)父類(lèi)
function inheritPrototype(child,parent){
//復(fù)制一份父類(lèi)的原型副本保存在變量中;
var fatherProto = inheritObject(father.prototype);
//修正因?yàn)橹貙?xiě)子類(lèi)原型導(dǎo)致子類(lèi)的constructor屬性被修改;
fatherProto.constructor = child;
//設(shè)置子類(lèi)的原型
child.prototype = fatherProto;
}
//聲明父類(lèi)
function Father(val){
this.companies =['bigo','yy','uc']
this.val = val;
}
//聲明父類(lèi)原型方法
Father.prototype.getValue = function(){
console.log(this.val);
}
//聲明子類(lèi)
function Child(val,newVal){
//構(gòu)造函數(shù)式繼承
Father.call(this,val);
this.newVal = newVal;
}
//類(lèi)式繼承
Child.prototype = new Father();
inheritPrototype(Child,Father);
//聲明子類(lèi)原型方法
Child.prototype.getNewValue = function(){
console.log(this.newVal);
}

1.在構(gòu)造函數(shù)繼承中我們已經(jīng)調(diào)用了父類(lèi)的構(gòu)造函數(shù)，還差一個(gè)原型的副本

2.通過(guò)原型繼承得到副本，但是這時(shí)候fatherProto的constructor需要指向子類(lèi)。

3.最后將副本fatherProto賦給子類(lèi)的原型prototype。

總的來(lái)說(shuō)，就是既要構(gòu)造函數(shù)，又要原型繼承，但是又避免了組合繼承的兩次調(diào)用父類(lèi)構(gòu)造函數(shù)的問(wèn)題,最大的改變式對(duì)子類(lèi)原型賦予的式父類(lèi)原型的一個(gè)引用。

var instanceA = new Child("fatherA","childA");
instanceA.companies.push('nemo');
console.log(instanceA.companies); //['bigo','yy','uc','nemo']
instanceA.getValue(); //fatherA
instanceA.getNewValue(); //childA
var instanceB = new Child("fatherB","childB");
console.log(instanceA.companies); //['bigo','yy','uc']
instanceB.getValue(); //fatherB
instanceB.getNewValue(); //childB

注意點(diǎn)：

此時(shí)子類(lèi)如果需要添加原型方法，必須通過(guò)prototype點(diǎn)語(yǔ)法一個(gè)個(gè)添加，否則會(huì)覆蓋掉繼承父類(lèi)的原型對(duì)象。
ES6 新增了Class語(yǔ)法，Class 可以通過(guò)extends關(guān)鍵字實(shí)現(xiàn)繼承，這比 ES5 的通過(guò)修改原型鏈實(shí)現(xiàn)繼承，要清晰和方便很多。

Class 繼承

class Parent {
constructor(value) {
this.val = value
}
getValue() {
console.log(this.val)
}
}
class Child extends Parent {
constructor(value) {
super(value)
}
}
let child = new Child(1)
child.getValue() // 1
child instanceof Parent // true

class 實(shí)現(xiàn)繼承的核心在于使用 extends 表明繼承自哪個(gè)父類(lèi)，并且在子類(lèi)構(gòu)造函數(shù)中必須調(diào)用 super，因?yàn)檫@段代碼可以看成 Parent.call(this, value)。

如果子類(lèi)沒(méi)有定義constructor方法，這個(gè)方法會(huì)被默認(rèn)添加。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論