js類的常用寫法

1. prototype 繼承父類

2. 修正 constructor

示例：

function Fn(name){

　this.name=name;

}

Fn.prototype.getName=function(){

　return this.name;

}

//繼承

function SubFn(name){

　Fn.call(this,name); //傳遞參數

}

SubFn.prototype=new Fn();

SubFn.prototype.constructor=SubFn;

var test=new SubFn("全棧前端");

test.getName();

//"全棧前端"

注：缺點是構造函數會執行兩次

js類的終極寫法

1. 調用父類構造函數

2. 繼承-複製父類的 prototype

//封裝方法：返回父類的 prototype 的複製

function inheritObject(o){

function Fn(){};

Fn.prototype=o.prototype;

　return new Fn();

}

3. 修正 constructor

示例：

function Fn(name){

　this.name=name;

}

Fn.prototype.getName=function(){

　return this.name;

}

//繼承

function SubFn(name){

　Fn.call(this,name);

}

SubFn.prototype=inheritObject(Fn);

SubFn.prototype.constructor=SubFn;

var test=new SubFn("全棧前端");

test.getName();

//"全棧前端"

多繼承

同上，js的多繼承靠複製多個父類的原型對象實現。

//單繼承，多繼承皆可

function inheritObject(){

　var

　　len=arguments.length,

　　extendPrototype={};

　for(var i=0;i

　　var proto=arguments[i].prototype;

　　for(var j in proto){

　　　extendPrototype[j]=proto[j];

　　}

　}

　return extendPrototype;

}

注：同名屬性方法會被覆蓋

文章到這裡結束，後續更多幹貨，關注後可以收到文章推送

【關注一下不迷路~】

閱讀更多 全棧前端 的文章

關鍵字: 技術 JavaScript 編程語言