2. 程式人生 > 實用技巧 >JS一些類實現方式的效能研究

JS一些類實現方式的效能研究

阿新 • • 發佈：2020-09-20

從javaeye看到一貼，探討如何實現計時器，集思廣益，最後竟然提出了十多種的實現。這再次證明了js的寫法很靈活（舉個反面的例子，如Python，其哲學原則是one way to go!）。這裡整理一下，研究一下各種實現的效能問題。現在js越來越向富客戶端發展，UI元件乃至網頁遊戲，對效能問題是相當重視的。

實現1

  function Timer(id){
    this.id = id;
    this.begin = function(count){
      this.show(this.id, count)();
      setInterval(this.show(this.id, count-1),1000);
    }
    this.show = function(id, count){
      return function(){
        document.getElementById(id).innerhtml = count < 0 ? "over" :count;
        count--;
      }
    }
  }

點評：採用最經典的建構函式來實現類。好處是明快易懂，缺點是多個例項都是獨立的記憶體，資料與方法都不共享。而且還存在一個明顯的缺陷，計時完成之後，setInterval沒有被clear，嚴重影響了效能。

實現2

function Timer(id){
    this.id = id;
    this.timer = null;
    this.count = 0;
    this.begin = function(count){
        this.count = count;
        this.show(this)();
        this.timer = setInterval(this.show(this),1000);
    }
    this.show = function(obj){
        return function(){
            if(obj.count < 0){
                document.getElementById(obj.id).innerhtml = "over";
                clearInterval(obj.timer);
                return ;
            }
            document.getElementById(obj.id).innerHTML = obj.count;
            obj.count--;
        }
    }
}

點評：解決了實現1的setInterval未被clear的問題，但依然是利用建構函式來實現類，因此Timer每個例項都複製了一份show和begin，而不是共享同一份。

實現3

function Timer(id){
    this.id = id;
    this.timer = null;  
    this.count = 0;
    this.begin = function(count){
        this.count = count;
        Timer.show(this)();
        this.timer = setInterval(Timer.show(this),1000);
    }
    Timer.show = function(obj){
        return function(){
            if(obj.count < 0){
                document.getElementById(obj.id).innerHTML = "over";
                clearInterval(obj.timer);
                return ;
            }
            document.getElementById(obj.id).innerHTML = obj.count;
            obj.count--;
        }
    }
}

點評：把show()弄成類的靜態方法，讓所有例項共享此方法。注意，show()是個currying函式，這就解決了各例項的資料互相汙染的問題。

實現4

function Timer(id){
    this.id = id;
    this.timer = null;
    this.count = 0;
    this.begin = function(count){
        this.count = count;
        this.show(this)();//注意和實現三的區別：這裡不是Timer.show(this)();
        this.timer = setInterval(this.show(this),1000);//注意和實現三的區別：這裡不是Timer.show(this)();
    }
}
Timer.prototype.show = function(obj){
    return function(){
        if(obj.count < 0){
            document.getElementById(obj.id).innerHTML = "over";
            clearInterval(obj.timer);
            return ;
        }
        document.getElementById(obj.id).innerHTML = obj.count;
        obj.count--;
    }
}

點評：這次把show()做成原型方法，由於所有例項都是共享原型，當例項在其成員中找不到此方法，它就會沿著原型鏈往上找。這個運用了很經典的類實現方式——混合的建構函式 /原型方式。

實現5

function Timer(id){
    this.id = id;
    this.timer = null;
    this.count = 0;

}
Timer.prototype.begin = function(count){
    this.count = count;
    this.show(this)();//注意這裡不是Timer.show(this)();
    this.timer = setInterval(this.show(this),1000);//注意這裡不是Timer.show(this)();
}
Timer.prototype.show = function(obj){
    return function(){
        if(obj.count < 0){
            document.getElementById(obj.id).innerHTML = "over";
            clearInterval(obj.timer);
            return ;
        }
        document.getElementById(obj.id).innerHTML = obj.count;
        obj.count--;
    }
}

點評：這次把bigin()也做成原型方法。

實現6

function Timer(id){  
    this.id = id;  
    this.timer = null;  
    this.count = 0;  
}  
Timer.prototype = {  
    begin : function(count){  
        this.count = count;  
        this.show(this)();//注意這裡不是Timer.show(this)();  
        this.timer = setInterval(this.show(this),1000);//注意這裡不是Timer.show(this)();  
    },  
    show : function(obj){     
        return function(){  
            if(obj.count < 0){  
                document.getElementById(obj.id).innerHTML = "over";  
                clearInterval(obj.timer);  
                return ;  
            }  
            document.getElementById(obj.id).innerHTML = obj.count;  
            obj.count--;  
        }  
    }   
}

點評：把原型方法整到一個物件中去。

實現7

function Timer(id){  
    this.id = id;  
    this.timer = null;  
    this.count = 0;  
    Timer.prototype.begin = function(count){  
        this.count = count;  
        this.show(this)();//主要這裡不是Timer.show(this)();  
        this.timer = setInterval(this.show(this),1000);//主要這裡不是Timer.show(this)();  
    }  
    Timer.prototype.show = function(obj){     
        return function(){  
            if(obj.count < 0){  
                document.getElementById(obj.id).innerHTML = "over";  
                clearInterval(obj.timer);  
                return ;  
            }  
            document.getElementById(obj.id).innerHTML = obj.count;  
            obj.count--;  
        }  
    }   
}

點評：把原型方法整到建構函式中去，但千萬不要弄成這個樣子：

function Timer(id){
    this.id = id;
    this.timer = null;
    this.count = 0;
    Timer.prototype= {
        begin:function(count){/*……*/},
        show : function(obj){ /*……*/}
    }
}

因為直接為prototype 賦值，會使得自動新增的constructor 成員丟失！

實現8

var Timer = {
    begin : function(id,count){
        var obj = {};
        obj["id"] = id;
        obj["count"] = count;
        Timer.show(obj)();
        obj["timer"] = setInterval(Timer.show(obj),1000);//注意這裡不是Timer.show(this)();
    },
    show : function(obj){
        return function(){
            if(obj["count"] < 0){
                document.getElementById(obj["id"]).innerHTML = "over";
                clearInterval(obj["timer"]);
                return ;
            }
            document.getElementById(obj["id"]).innerHTML = obj["count"] ;
            obj["count"]--;
        }
    }
}

點評：這次採用字面量構造物件。Timer成了一個全域性物件（當我們第一次呼叫begin方法才產生此全域性物件），類似於window，生成例項方法不再是new，而是採用工廠方式的方法，每begin一次就生成一個例項，資料是獨立的，方法是共享的。

實現9

var Timer = (function(){
    var items = {};
    function begin(id,count){
        var obj = {};
        obj["id"] = id;
        obj["count"] = count;
        Timer.show(obj)();
        obj["timer"] = setInterval(Timer.show(obj),1000);//注意這裡不是Timer.show(this)();
        Timer.items[id] = obj;
    };
    function show(obj){
        return function(){
            if(obj["count"] < 0){
                document.getElementById(obj["id"]).innerHTML = "over";
                clearInterval(obj["timer"]);
                return ;
            }
            document.getElementById(obj["id"]).innerHTML = obj["count"] ;
            obj["count"]--;
        }
    }
    return {
        items : items,
        begin : begin,
        show : show
    }
})()

點評：利用閉包，和上面的有點類似，但此全域性變數是DOM樹完成後就立即生成的，它擁有以下三個方法items : begin 與 show。許多類庫也採用此方式實現，不過它們稱之為名稱空間而已……

實現10

function Timer(id){
    this.element = document.getElementById(id);
    this.timer = null;
    this.count = 0;
}
Timer.prototype = {
    begin : function(count){
        this.count = count;
        this.show();
        var _this = this;
        this.timer = setInterval(function(){_this.show();}, 1000);
    }
    ,
    show : function(){
        this.element.innerHTML = this.count < 0 ? clearInterval(this.timer) || "over" : this.count--;
    }
}

點評：這是實現3的改進版，改進了每呼叫一次show就遍歷DOM樹的缺點（document.getElementById），而是第一次找到的元素放入例項的成員。利用三元表示式與短路運算使得程式碼更加內斂。儲存this，免去每次都往上層的作用域尋找。

廣州vi設計http://www.maiqicn.com 辦公資源網站大全https://www.wode007.com

實現11

function Timer(id) {
    this.container = document.getElementById(id);
}

Timer.prototype = {
    constructor: Timer,
    begin: function(count) {
        var container = this.container;
        setTimeout(function() {
            container.innerHTML = count > 0 ? count-- : "over";
            if(count + 1) {
                setTimeout(arguments.callee, 1000);
            }
        }, 1000);
    }

};

點評：YUI風格的實現方式，該類庫大量使用arguments ，callee等內部屬性。現在Timer類的成員很小，內部私有屬性也很少，效能明顯比以上所有實現要好得多。

相關推薦

JS一些類實現方式的效能研究

從javaeye看到一貼，探討如何實現計時器，集思廣益，最後竟然提出了十多種的實現。這再次證明了js的寫法很靈活（舉個反面的例子，如Python，其哲學原則是one way to go!）。這裡整理一下，研究一下各種實現的效能問題

js遞迴實現方式

遞迴的概念： 遞迴函式就是在函式體內呼叫本函式（通俗的說：也就是自己呼叫自己）；

Qt主介面卡死的解決方案-一些具體實現方式(轉)

轉自：(7條訊息) Qt主介面卡死的解決方案-一些具體實現方式_qq_37518975的部落格-CSDN部落格

史上最全面的SignalR系列教程-2、SignalR 實現推送功能-永久連線類實現方式

1、概述 通過上篇史上最全面的SignalR系列教程-1、認識SignalR文章的介紹，我們對SignalR技術已經有了一個全面的瞭解。本篇開始就通過SignalR的典型應用的實現方式做介紹，例子雖然簡單，但麻雀雖小五臟俱全。可以以

Java獲取介面所有實現類的方式詳解

有時候，根據業務邏輯的需求，我們想要獲取到某個介面的所有實現類。在這裡大致介紹兩種方式：

JS中FileReader類實現檔案上傳及時預覽功能

FileReader是H5瀏覽器才支援的JS類，如果不支援H5de瀏覽器可以使用FormData類實現檔案的上傳預覽，使用可以參考我的下一篇部落格：JS中FormData類實現檔案上傳

JS中FormData類實現檔案上傳

本文例項為大家分享了JS中FormData類實現檔案上傳的具體程式碼，供大家參考，具體內容如下

JS倒計時兩種實現方式程式碼例項

最近做瀏覽器介面倒計時，用js就實現，兩種方式： 一：設定時長，進行倒計時。比如考試時間等等

實現抽象類之方式二

from abc import ABCMeta, abstractmethod class Pay(metaclass=ABCMeta):# 這種方式約束力強，但是依賴abc模組

實現抽象類之方式一

# 抽象類： # 是一個開發的規範，約束它的所有子類必須實現一些和它同名的方法

js防抖和節流 區別及實現方式

概念： 函式防抖(debounce)：觸發高頻事件後n秒內函式只會執行一次，如果n秒內高頻事件再次被觸發，則重新計算時間。

node.js面向物件實現（一）類和物件

>>> 使用Node.js好一段時間了，其實大部分還是停留在使用的階段對於它（或者也可以說是JS）的很多特性也不是非常的瞭解，之後要開始做自己的東西了，所以嚴謹的態度還是要保持的，在這裡記錄下

幀動畫的多種實現方式與效能對比

Web動畫形式 首先我們來了解一下Web有哪些動畫形式 1. CSS3動畫 　　 Transform（變形）

JS手寫instanceof實現方式

技術標籤：前端JSinstanceof手寫 // 使用方式 function Car(color) { this.color = color this.sayColor = function () {

Java基礎進階:時間類要點摘要,時間Date類實現格式化與解析原始碼實現詳解,LocalDateTime時間類格式化與解析原始碼實現詳解,Period,Duration獲取時間間隔與原始碼實現,程式異常解析與處理方式

　　　　　　　　　　　　　　　　　　　　　　 　　　　　　　　　　　　　　　　　　　　要點摘要

選擇排序演算法兩種實現方式的效能對比

技術標籤：演算法排序演算法演算法javascript 普通的選擇排序 定義一個長度為10萬的陣列，利用普通的選擇排序進行排序，我們再演算法開始的時候列印系統的時間然後當演算法執行完成之後我們再一次列印系統時間，

Spring Boot掃描mapper介面類的兩種實現方式

技術標籤：系統架構解決方案mybatisspring boot 1、方式一：使用註解@Mapper 在所有mapper介面上添加註解@Mapper；Spring boot啟動註解自動掃描。

JS定義類的六種方式詳解以及幾種常用的JS類定義方法

技術標籤：JSjsjavascript類 在前端開發中，經常需要定義JS類。那麼在JavaScript中，定義類的方式有幾種，分別是什麼呢？本文就JS定義類的六中方式說明如下（案例說明）：

js將列表組裝成樹結構的兩種實現方式分享

目錄前言背景介紹實現方案遞迴法資源總結前言 工作中偶爾就會遇到後端同學丟來一個列表，要我們自己組裝成一個樹結構渲染到頁面上，本文以兩種不同方式探索生成樹的演算法思想。

分散式Session的幾種實現方式

SpringBoot 分散式session 在如今伺服器叢集的情況下，使用者登入會話狀態的儲存也從單機的變成了分散式要求的，下面詳細說一下幾種分散式session儲存方案。