JavaScript中將函數封裝到對象中

時間 2019-11-18

原文原文鏈接

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <script type="text/javascript">
    /*
       1.函數污染介紹2.函數封裝到對象；3.經過原型將函數封裝到對象；4.鏈式調用的寫法
    */
        //1.函數名重複，形成污染
        console.log('1.函數名重複，形成污染');
        function checkName(){
            console.log('函數名重複，形成污染checkName');
        }
        function checkEmail () {
            console.log('函數名重複，形成污染checkEmail');
        }
        function checkName(){
            console.log('函數名重複，形成污染checkName1');
        }
        function checkEmail () {
            console.log('函數名重複，形成污染checkEmail1');
        }
        checkName();
        checkEmail();
        debugger;

        //2.將函數封裝到類中,每一個實例都有本身的方法
        console.log('2.將函數封裝到類中');
        var CheckObject = function(){
            this.checkName = function(){
                console.log('將函數封裝到類中checkName');
            }
            this.checkEmail = function(){
                console.log('將函數封裝到類中checkEmail');
            }
        }
        var test1 = new CheckObject();
        var test2 = new CheckObject();
        test1.checkName();
        test1.checkEmail();
        debugger;

        //3.將函數封裝到類中,全部實例公用原型方法
        console.log('3.將函數封裝到類中,全部實例公用原型方法');
        var CheckObject1 = function(){};
        CheckObject1.prototype.checkName = function(){
            console.log('將函數封裝到類中,全部實例公用原型方法checkName');
        }
        CheckObject1.prototype.checkEmail = function(){
            console.log('將函數封裝到類中,全部實例公用原型方法checkEmail');
        }
        var test3 = new CheckObject1();
        var test4 = new CheckObject1();
        test3.checkName();
        test3.checkEmail();
        debugger;

        //4.鏈式調用的實現
        console.log('4.鏈式調用的實現');
        var CheckObject2 = function(){};
        CheckObject2.prototype.checkName = function(){
            console.log('將函數封裝到類中,全部實例公用原型方法checkName');
            return this;
        }
        CheckObject2.prototype.checkEmail = function(){
            console.log('將函數封裝到類中,全部實例公用原型方法checkEmail');
            return this;
        }
        var test5 = new CheckObject2();
        test5.checkName().checkEmail();
        debugger;

    </script>
</head>
<body>
    <h1>驗證函數重名，將函數封裝到對象中</h1>
</body>
</html>