javascript面向對象的常見寫法與優缺點

我們通過表單驗證的功能，來逐步演進面向對象的方式.   對於剛剛接觸javascript的朋友來說，如果要寫一個驗證用戶名，密碼，郵箱的功能， 一般可能會這么寫：

        //表單驗證
        var checkUserName = function(){
            console.log( '全局checkUserName' );
        };
        var checkUserEmail = function(){
            console.log( '全局checkUserEmail' );
        };
        var checkUserPwd = function(){
            console.log( '全局checkUserPwd' );
        };

這種寫法，從功能上來說 沒有什么問題， 但是在團隊協作的時候， 會造成覆蓋全局變量的問題， 那要大大降低覆蓋的可能性， 一般會在外面套一個對象

        var Utils = {
            checkUserName : function(){
                console.log( 'Utils->checkUserName' );
            },
            checkUserEmail : function(){
                console.log( 'Utils->checkUserEmail' );
            },
            checkUserPwd :  function(){
                console.log( 'Utils->checkUserPwd' );
            }
        }

        checkUserEmail();
        Utils.checkUserEmail();

上面這種方式，是字面量方式添加，在設計模式里面，也稱為單例（單體）模式， 與之類似的可以通過在函數本身添加屬性和方法，變成靜態屬性和方法，達到類似的效果:

        var Utils = function(){

        }
        Utils.checkUserName = function(){
            console.log( 'Utils.checkUserName' );
        }
        Utils.checkUserPwd = function(){
            console.log( 'Utils.checkUserPwd' );
        }
        Utils.checkUserEmail = function(){
            console.log( 'Utils.checkUserEmail' );
        }

        Utils.checkUserEmail();

        for( var key in Utils ){
            ( Utils.hasOwnProperty( key ) ) ? console.log( key ) : '';
        }

        //加在函數上面的屬性和方法，無法通過對象使用
        var oUtil = new Utils(); 
        oUtil.checkUserEmail();//錯誤

還可以通過函數調用方式，返回一個對象，把方法和屬性寫在對象中, 這種方式 跟面向對象沒有什么關系，只是從函數的返回值角度來改造

        //使用函數的方式 返回一個對象
        var Util = function(){
            return {
                checkUserName : function(){
                    console.log( 'userName...' );
                },
                checkUserPwd : function(){
                    console.log( 'userPwd...' );
                },
                checkUserEmail : function(){
                    console.log( 'userEmail...' );
                }
            }
        }
        Util().checkUserEmail();

還可以通過類似傳統面向對象語言，使用構造函數方式 為每個實例添加方法和屬性, 這種方式，存在一個問題， 不能達到函數共用，每個實例都會復制到方法.

        var Util = function(){
            this.checkUserName = function(){
                console.log('userName');
            };
            this.checkUserEmail = function(){
                console.log('userEmail');
            };
            this.checkUserPwd = function(){
                console.log('userPwd');
            };
        }

        var oUtil1 = new Util();
        var oUtil2 = new Util();
        console.log( oUtil1.checkUserEmail === oUtil2.checkUserEmail );//false

一般，我們可以通過原型屬性（prototype）改造這種方式，達到不同實例共用同一個方法

        var Util = function(){
            
        };
        Util.prototype.checkUserName = function(){
            console.log('userName');
        };
        Util.prototype.checkUserPwd = function(){
            console.log('userPwd');
        };
        Util.prototype.checkUserEmail = function(){
            console.log('userEmail');
        };
        var oUtil1 = new Util();
        var oUtil2 = new Util();
        console.log( oUtil1.checkUserEmail === oUtil2.checkUserEmail );//true

也可以把原型對象上的所有方法，使用字面量方式簡寫

        var Util = function(){
            
        };
        Util.prototype = {
            checkUserEmail : function(){
                console.log( 'userEmail' );
            },
            checkUserName : function(){
                console.log( 'userName' );
            },
            checkUserPwd : function(){
                console.log( 'userPwd' );
            }
        };
        var oUtil1 = new Util();
        var oUtil2 = new Util();
        console.log( oUtil1.checkUserEmail === oUtil2.checkUserEmail );//true

注意：  字面量方式和原型對象一個個添加   這兩種不要混用， 否則會產生覆蓋

如果我們想把面向對象的使用方式更加的優雅，比如鏈式調用， 我們應該在每個方法中返回對象本身，才能繼續調用方法， 即返回this

        var Util = function(){
            return {
                checkUserName : function(){
                    console.log( 'userName...' );
                    return this;
                },
                checkUserPwd : function(){
                    console.log( 'userPwd...' );
                    return this;
                },
                checkUserEmail : function(){
                    console.log( 'userEmail...' );
                    return this;
                }
            }
        }
        // 方法中如果沒有返回this,下面這種調用方式是錯誤的
        Util().checkUserEmail().checkUserName();

        // 方法中返回對象本身,可以鏈式調用
        Util().checkUserEmail().checkUserName().checkUserPwd();

        var Util = function(){
            this.checkUserName = function(){
                console.log('userName');
                return this;
            };
            this.checkUserEmail = function(){
                console.log('userEmail');
                return this;
            };
            this.checkUserPwd = function(){
                console.log('userPwd');
                return this;
            };
        }

        new Util().checkUserEmail().checkUserName().checkUserPwd();

        var Util = function(){
            
        };
        Util.prototype = {
            checkUserEmail : function(){
                console.log( 'userEmail' );
                return this;
            },
            checkUserName : function(){
                console.log( 'userName' );
                return this;
            },
            checkUserPwd : function(){
                console.log( 'userPwd' );
                return this;
            }
        };

        new Util().checkUserEmail().checkUserName().checkUserPwd();

        var Util = function(){
            
        };
        Util.prototype.checkUserName = function(){
            console.log('userName');
            return this;
        };
        Util.prototype.checkUserPwd = function(){
            console.log('userPwd');
            return this;
        };
        Util.prototype.checkUserEmail = function(){
            console.log('userEmail');
            return this;
        };

        new Util().checkUserEmail().checkUserName().checkUserPwd();

 在實際開發中，我們經常需要擴展一些功能和模塊。擴展可以在本對象或者父類對象或者原型上

        Function.prototype.checkUserName = function(){
            console.log('ghostwu');
        };

        var fn1 = function(){};
        var fn2 = function(){};

        console.log( 'checkUserName' in fn1 ); //true
        console.log( 'checkUserName' in fn2 ); //true

        fn1.checkUserName(); //ghostwu
        fn2.checkUserName(); //ghostwu

如果我們使用上面這種方式擴展，從功能上來說，是沒有問題的，但是確造成了全局污染：通俗點說，並不是說有的函數都需要checkUserName這個方法，而我們這樣寫，所有的函數在創建過程中都會從父類的原型鏈上繼承checkUserName, 但是這個方法，我們根本不用， 所以浪費性能， 為了解決這個問題，我們應該要在需要使用這個方法的函數上添加，不是所有的都添加，另外關於in的用法，如果不熟悉,可以看下我的這篇文章:立即表達式的多種寫法與注意點以及in操作符的作用

        Function.prototype.addMethod = function( name, fn ){
            this[name] = fn;
        }

        var fn1 = function(){};
        var fn2 = function(){};

        fn1.addMethod( 'checkUserName', function(){console.log('ghostwu');});

        fn1.checkUserName(); //ghostwu
        fn2.checkUserName(); //報錯

通過上述的改造，成功解決了全局污染， fn2這個函數上面沒有添加checkUserName這個方法，只在fn1上面添加

我們繼續把上面的方式，改成鏈式調用：  這里需要改兩個地方， 一種是添加方法addMethod可以鏈式添加， 一種是添加完了之后，可以鏈式調用

        Function.prototype.addMethod = function( name, fn ){
            this[name] = fn;
            return this;
        };

        var fn1 = function(){};

        fn1.addMethod( 'checkUserName', function(){
            console.log( 'userName:ghostwu' );
            return this;
        } ).addMethod( 'checkUserEmail', function(){
            console.log( 'userEmail' );
            return this;
        } ).addMethod( 'checkUserPwd', function(){
            console.log( 'userUserPwd' );
            return this;
        } );
        fn1.checkUserName().checkUserEmail().checkUserPwd();

上面是屬於函數式 鏈式 調用，  我們可以改造addMethod方法， 在原型上添加函數，而不是實例上， 這樣我們就可以達到類式的鏈式調用

        Function.prototype.addMethod = function( name, fn ){
            this.prototype[name] = fn;
            return this;
        };

        var fn1 = function(){};

        fn1.addMethod( 'checkUserName', function(){
            console.log( 'userName:ghostwu' );
            return this;
        } ).addMethod( 'checkUserEmail', function(){
            console.log( 'userEmail' );
            return this;
        } ).addMethod( 'checkUserPwd', function(){
            console.log( 'userUserPwd' );
            return this;
        } );
        new fn1().checkUserName().checkUserEmail().checkUserPwd();