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

詳解如何利用ES6實現單例模式及其應用

小云云
發布: 2017-12-11 09:39:23
原創
1761 人瀏覽過

單例是在程式設計非常基礎的東西,本文主要為大家介紹了關於利用ES6實現單例模式及其應用的相關資料,文中透過範例程式碼介紹的非常詳細,需要的朋友可以參考借鑒,希望能幫助大家。

前言

在傳統開發工程師眼裡,單例就是保證一個類別只有一個實例,實現的方法一般是先判斷實例存在與否,如果存在直接返回,如果不存在就創建了再返回,這就確保了一個類別只有一個實例物件。在JavaScript裡,單例作為一個命名空間提供者,從全域命名空間裡提供一個唯一的存取點來存取該物件。

單例模式的定義是:保證一個類別只有一個一個實例,並提供一個存取它的全域存取點。

單例模式能在適當的時候創建對象,並且創建唯一的一個。

程式碼接近生活,很有意思。例如一個網站的登錄,點擊登入後彈出一個登入彈框,即使再次點擊,也不會再出現一個相同的彈框。又或者一個音樂播放程序,如果用戶打開了一個音樂,又想打開一個音樂,那麼之前的播放介面就會自動關閉,切換到當前的播放介面。這些都是單例模式的應用場景。

要實現一個單例模式,一個經典的方式是創建一個類,類中又一個方法能創建該類的實例對象,還有一個標記,記錄是否已經創了過了實例物件。如果物件已經存在,就傳回第一次實例化物件的參考。

單例模式的實作

es5實作方式

#
var Singleton = function(name) {
 this.name = name;
 //一个标记,用来判断是否已将创建了该类的实例
 this.instance = null;
}
// 提供了一个静态方法,用户可以直接在类上调用
Singleton.getInstance = function(name) {
 // 没有实例化的时候创建一个该类的实例
 if(!this.instance) {
  this.instance = new Singleton(name);
 }
 // 已经实例化了,返回第一次实例化对象的引用
 return this.instance;
}
登入後複製

使用者可以透過一個廣為人知的接口,對該實例進行存取。

我們嘗試對該物件進行兩次實例化,觀察兩次實例化結果是否指向同一個物件。

var a = Singleton.getInstance('sven1');
var b = Singleton.getInstance('sven2');
// 指向的是唯一实例化的对象
console.log(a === b);
登入後複製

傳回結果是:true。說明a、b之間是引用關係。

es6實作方式

建立Singleton類別。 class關鍵字和靜態函數都是es6新增的。

class Singleton {
 constructor(name) {
  this.name = name;
  this.instance = null;
 }
 // 构造一个广为人知的接口,供用户对该类进行实例化
 static getInstance(name) {
  if(!this.instance) {
   this.instance = new Singleton(name);
  }
  return this.instance;
 }
}
登入後複製

單例模式應用實例

我們用一個生活中常見的一個場景來說明單例模式的應用。

任一個網站,點擊登入按鈕,只會彈出有且僅有一個登入框,即使後面再點擊登入按鈕,也不會再彈出多一個彈框。這就是單例模式的典型應用。接下來我們實現它。為了注重單例模式的展示,我們把登入框簡化吧

以上是詳解如何利用ES6實現單例模式及其應用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!