首頁 > web前端 > js教程 > 主體

JS的設計模式之構造函數模式詳解

php中世界最好的语言
發布: 2018-03-14 14:07:33
原創
1523 人瀏覽過

這次帶給大家JS的設計模式建構子模式詳解,使用JS建構函式模式的注意事項有哪些,以下就是實戰案例,一起來看一下。

概念 
建構函式用於建立特定類型的對象,我們在裡面不僅宣告了使用的對象,建構函式還可以接受參數以便於第一次建立的時候設定物件的成員值。你也可以宣告自訂類型物件的屬性和方法

作用與注意事項 

用於建立特定類型的物件。

第一次宣告的時候給物件賦值

可以傳參進去,自己宣告建構函數,賦予屬性與方法

注意事項:

注意new的使用

區分與單例的區別

基本用法 
JavaScript裡,建構子通常是認為用來實作實例的,JavaScript沒有類別的概念,但是有特殊的建構子。我們透過使用new操作付,我們可以告訴javascript我們要建立的的一個新的物件並且新物件的成員都是建構函式裡定義的。在建構子裡,this指向的是新建立的對象,基本語法如下:

function PersonBir(name, year, month) {
    this.month = month;    this.year = year;    this.name = name;    this.output= function () {
        return this.name + ":" + this.year +"年"+ this.month+"月";
    };
}var ming= new PersonBir("小明", 1998, 5);var gang= new PersonBir("小刚", 2000, 4);
console.log(ming.output());
console.log(gang.output());1234567891011121314
登入後複製

這就是最簡單的建構子的方法,但我們有沒有發現一個問題,我們在繼承的時候是不是感覺太麻煩了,所以我們可以透過原型prototype,將ouput方法加入到創建的物件上,來看下面的這一段程式碼

function PersonBir(name, year, month) {
    this.month = month;    this.year = year;    this.name = name;
}
PersonBir.prototype.output=function(){
     return this.name + ":" + this.year +"年"+ this.month+"月";
}var ming= new PersonBir("小明", 1998, 5);var gang= new PersonBir("小刚", 2000, 4);
console.log(ming.output());
console.log(gang.output());123456789101112
登入後複製

這樣output單一實例可以在PersonBir物件實例中共享使用,我們透過給建構函式命名時採用函式名稱大寫來表示,以便於區分普通函式。

強制使用new運算子 
對於建構子new運算子的使用我們來看下面這些程式碼,我們透過判斷this值的instanceof是不是PersonBir達到強制使用new運算符,以達到目的。

function PersonBir(name, year, month) {
    //核心代码,如果为假,就创建一个新的实例返回。
    if(!(this instanceof PersonBir)){        return new PersonBir(name, year, month);
    }    this.month = month;    this.year = year;    this.name = name;
}
PersonBir.prototype.output=function(){
     return this.name + ":" + this.year +"年"+ this.month+"月";
}var ming= new PersonBir("小明", 1998, 5);var gang= new PersonBir("小刚", 2000, 4);
console.log(ming.output());
console.log(gang.output());
登入後複製

我相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

js設計模式之-單例模式的使用

前端為什麼要使用模組化?

CSS的常見相容性問題解決方案

#

以上是JS的設計模式之構造函數模式詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板