靈活的語言-JavaScript

剛開始去公司實習的時候,接到了一個驗證表單的任務,內容不多,需要驗證用戶名,郵箱 ,密碼~接到需求手,立刻寫下了以下幾個函數

function checkName(){
    // 驗證姓名
}
function checkEmail(){
    // 驗證郵箱
}
function checkPasswork(){
    // 驗證密碼
}

我相信作為剛入職的新人,大家都很可能會這樣寫,但是這樣寫會寫出現很多問題,那就是創建了太多的全局變量


大家再來看看以下幾個代碼

var checkName = function(){
    // 驗證姓名
}
var checkEmail = function(){
    // 驗證郵箱 
}
var checkPassword = function(){
    // 驗證密碼
}

也許有人會說這兩個是不一樣的,確實不一樣,因為這個在用的時候要提前聲明,但這么看你就會發現創建了三個函數保存在變量里來實現你的功能,而你寫的是將你的變量名放在function后面而已,它也代表了你的變量,所以說在這里我們也聲明的3個全局變量。

但在團隊協作中,我們不能只考慮自己,如果別人也我了同樣的方法就會覆蓋掉原有的功能,特別是你定義了很多方法,這種相互覆蓋的問題是不很不容易察覺到的。

所以我們應該把它們 放在一個對象里

var CheckObject = {
    checkName: function () {
        // 驗證姓名
    },
    checkEmail: function () {
        // 驗證郵箱
    },
    checkPassword: function () {
        // 驗證密碼
    }
}

當然了,我們也可以通過我們熟悉的點(obj.xxx)方法來創建

var CheckObject = function() {}
CheckObject.checkName: function () {
        // 驗證姓名
    },
CheckObject.checkEmail: function () {
        // 驗證郵箱
    },
CheckObject.checkPassword: function () {
        // 驗證密碼
    }

但這里又會有一個問題出現,我們自己使用這個方法的時候確實非常方便,便如果別用想使用就會有些麻煩了,因為這個對象不能復制一份,或者說這個對你在用new關鍵字創建新的對象的時候,新的對象是不能繼承這些方法的。

這里舉個例子,如果我喜歡某本書,買回去后,我的小伙伴看見了,感覺很有用,可書就一本要怎么辦,如果再買一本就太浪費了。所以如果你有一臺復制機,那么你小伙伴再多,你也有能力給他們每人復印一本

如果想簡單地復制一下,你可以將這些方法放在一個函數對象中

var CheckObject = function() {
    return {
        checkName: function () {
        // 驗證姓名
        },
        checkEmail: function () {
        // 驗證郵箱
        },
        checkPassword: function () {
        // 驗證密碼
        }
    }
}

// 所以以后我們想再次使用的時候就可以這樣

var a = CheckObject
a.checkEmail

雖然創建了新對象完成了我們的需求,但是按面向對象的編程思想,這不是一個正直意義上類的創建方法,而且創建的的對象a和CheckObject沒有任何關系(返回出來的對象本身就與CheckObject對象無關),所以我們要稍加改造一下

var CheckObject = function() {
    this.checkName: function () {
        // 驗證姓名
    },
    this.checkEmail: function () {
        // 驗證郵箱
    },
    this.checkPassword: function () {
        // 驗證密碼
    }
}

像上面這樣寫就可以看成是一個類了,既然是一個類了,我我們就應該用new來創建

var a = new CheckObject()
a.checkEmail

但是,我們把所有的方法放在函數內部,并通過this來定義,第一次通過new關鍵字創建新對象里,新創建的對象都會對類的this上的屬性進行復制 ,而這些新創建的對象都會有自己的一套方法,然而有時候這么做千萬的消耗是非常奢侈的,我們再處理一下

var CheckObject = function(){}
CheckObject.prototype.checkName = function(){
    // 驗證姓名
}
CheckObject.prototype.checkEmail = function(){
    // 驗證郵箱
}
CheckObject.prototype.checkPassword = function(){
    // 驗證密碼
}

這樣創建對你的時候,創建出來的對象所擁有的方法就都是一個了,因為它們都要依賴prototype原型依次尋找,這樣做的問題在于我們要寫很多次prototype,所以我們可以這樣做

var CheckObject = function(){}
    CheckObject.prototype = {
        checkName : function(){
            // 驗證姓名
        }
        checkEmail : function(){
            // 驗證郵箱 
        }
        checkPassword : function(){
         // 驗證密碼
        }
    }
}

但有一點要特別提醒一下,這兩種方式不能混著用,這樣做后面的對象的原型對象賦值新對象時,就會覆蓋掉前對prototpye對象賦值的方法

繼續 ,在這里我們又發現這么做又會有一個新的問題,就是如果我想一次過驗證賬號,郵箱和密碼就必需要單獨調用,這是可以避免的。知道this吧,在JavaScript中,this指向的是當前對象,所以你可以將它返回

var CheckObject = function(){}
    CheckObject.prototype = {
        checkName : function(){
            // 驗證姓名
            return this;
        }
        checkEmail : function(){
            // 驗證郵箱 
            return this;
        }
        checkPassword : function(){
            // 驗證密碼
            return this;
        }
    }
    
// 使用的時候先創建一個
// 鏈式調用
var a = new CheckObject();
a.checkName().checkEmail().checkPassword()

后記,JavaScript是一門靈活的語言,函數在其中扮演著一等公民。所以使用JavaScript你可以編寫出很多優雅的藝術代碼

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容