Javascript 进阶 封装

分享一下我老师大神的人工智能教程。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.csdn.net/jiangjunshow

               

转载请标明出处：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中需要复用的方法和属性做到私有且对象间共享。

           

分享一下我老师大神的人工智能教程。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.csdn.net/jiangjunshow