Javascript 进阶 封装

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/25080573

js中处处是对象,面向对象的第一步当然就是封装了,由于Js中没有类的概念,所以封装起来也比较麻烦,下面介绍两种js的封装。

1、使用约定优先的原则,将所有的私有变量以_开头

 <script type="text/javascript">
        /**
         * 使用约定优先的原则,把所有的私有变量都使用_开头
         */
        var Person = function (no, name, age)
        {
            this.setNo(no);
            this.setName(name);
            this.setAge(age);
        }
        Person.prototype = {
            constructor: Person,
            checkNo: function (no)
            {
                if (!no.constructor == "string" || no.length != 4)
                    throw new Error("学号必须为4位");
            },
            setNo: function (no)
            {
                this.checkNo(no);
                this._no = no;
            }, getNo: function ()
            {
                return this._no;
            }, setName: function (name)
            {
                this._name = name;
            }, getName: function ()
            {
                return this._name;
            }, setAge: function (age)
            {
                this._age = age;
            }, getAge: function ()
            {
                return this._age;
            }, toString: function ()
            {
                return "no = " + this._no + " , name = " + this._name + " , age = " + this._age;
            }
        };
        var p1 = new Person("0001", "鸿洋", "22");
        console.log(p1.toString());        //no = 0001 , name = 鸿洋 , age = 22
        p1.setNo("0003");
        console.log(p1.toString());      //no = 0003 , name = 鸿洋 , age = 22
        p1.no = "0004";
        p1._no = "0004";
        console.log(p1.toString());    //no = 0004 , name = 鸿洋 , age = 22

    </script>

看完代码,是不是有种被坑的感觉,仅仅把所有的变量以_开头,其实还是可以直接访问的,这能叫封装么,当然了,说了是约定优先嘛,这种方式还是不错的,最起码成员变量的getter,setter方法都是prototype中,并非存在对象中,总体来说还是个不错的选择。如果你觉得,这不行,必须严格实现封装,那么看第二种方式。

2、严格实现封装

<script type="text/javascript">
        /**
         *  使用这种方式虽然可以严格实现封装,但是带来的问题是get和set方法都不能存储在prototype中,都是存储在对象中的
         * 这样无形中就增加了开销
         */
        var Person = function (no, name, age)
        {
            var _no , _name, _age ;
            var checkNo = function (no)
            {
                if (!no.constructor == "string" || no.length != 4)
                    throw new Error("学号必须为4位");
            };
            this.setNo = function (no)
            {
                checkNo(no);
                _no = no;
            };
            this.getNo = function ()
            {
                return _no;
            }
            this.setName = function (name)
            {
               _name = name;
            }

            this.getName = function ()
            {
                return _name;
            }

            this.setAge = function (age)
            {
                _age = age;
            }
            this.
                    getAge = function ()
            {
                return _age;
            }

            this.setNo(no);
            this.setName(name);
            this.setAge(age);
        }
        Person.prototype = {
            constructor: Person,
            toString: function ()
            {
                return "no = " + this.getNo() + " , name = " + this.getName() + " , age = " + this.getAge();
            }
        }
        ;
        var p1 = new Person("0001", "鸿洋", "22");
        console.log(p1.toString());        //no = 0001 , name = 鸿洋 , age = 22
        p1.setNo("0003");
        console.log(p1.toString());      //no = 0003 , name = 鸿洋 , age = 22
        p1.no = "0004";
        console.log(p1.toString());    //no = 0003 , name = 鸿洋 , age = 22

    </script>

看上面的代码,去掉了this.属性名,严格的实现了封装,只能通过getter,setter访问成员变量了,但是存在一个问题,所有的方法都存在对象中,增加了内存的开销。

3、以闭包的方式封装

<script type="text/javascript">
        /**
         *  使用这种方式虽然可以严格实现封装,但是带来的问题是get和set方法都不能存储在prototype中,都是存储在对象中的
         * 这样无形中就增加了开销
         */
        var Person = (function ()
        {
            var checkNo = function (no)
            {
                if (!no.constructor == "string" || no.length != 4)
                    throw new Error("学号必须为4位");
            };
            //共享变量
            var times = 0;

            return function (no, name, age)
            {
                console.log(times++);    // 0 ,1 , 2
                var no , name , age;
                this.setNo = function (no)
                {
                    checkNo(no);
                    this._no = no;
                };
                this.getNo = function ()
                {
                    return this._no;
                }
                this.setName = function (name)
                {
                    this._name = name;
                }

                this.getName = function ()
                {
                    return this._name;
                }

                this.setAge = function (age)
                {
                    this._age = age;
                }
                this.
                        getAge = function ()
                {
                    return this._age;
                }

                this.setNo(no);
                this.setName(name);
                this.setAge(age);
            }
        })();
        Person.prototype = {
            constructor: Person,
            toString: function ()
            {
                return "no = " + this._no + " , name = " + this._name + " , age = " + this._age;
            }
        }
        ;
        var p1 = new Person("0001", "鸿洋", "22");
        var p2 = new Person("0002", "abc", "23");
        var p3 = new Person("0003", "aobama", "24");


        console.log(p1.toString());        //no = 0001 , name = 鸿洋 , age = 22
        console.log(p2.toString());      //no = 0002 , name = abc , age = 23
        console.log(p3.toString());    //no = 0003 , name = aobama , age = 24

    </script>

上述代码,js引擎加载完后,会直接执行Student = 立即执行函数,然后此函数返回了一个子函数,这个子函数才是new Student所调用的构造函数,又因为子函数中保持了对立即执行函数中checkNo(no) ,times的引用,(很明显的闭包)所以对于checkNo和times,是所有Student对象所共有的,创建3个对象后,times分别为0,1,2 。这种方式的好处是,可以使Student中需要复用的方法和属性做到私有且对象间共享。


版权声明:本文为博主原创文章,未经博主允许不得转载。

posted @ 2014-05-05 22:45  dingxiaoyue  阅读(122)  评论(0编辑  收藏  举报