您现在的位置是:php教程网 > 编程技术 >

[db:作者] 2019-09-10 00:32 PHP学习

什么是javascript封装?

封装是面向对象编程中的一个主要概念。它允许一个对象以单一名称将私人和公共成员分组。所有面向对象的编程语言都支持这一点。由于JavaScript也是面向对象的编程语言,它也支持它。那么什么是封装?如何封装?下面就来介绍一下。

什么是封装?

封装就是隐藏对象的属性和实现细节,仅对外公开接口,控制在程序中属性的读取和修改的访问级别;将抽象得到的数据和行为(或功能)相结合,形成一个有机的整体,也就是将数据与操作数据的源代码进行有机的结合,形成“类”,其中数据和函数都是类的成员。

封装的目的是增强安全性和简化编程,使用者不必了解具体的实现细节,而只是要通过外部接口,以特定的访问权限来使用类的成员。

如何封装?

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中需要复用的方法和属性做到私有且对象间共享。

以上就是什么是javascript封装?的详细内容,更多请关注html中文网其它相关文章!

上一篇:上一篇:javascript如何判断浏览器类型?

下一篇:下一篇:typescript有什么用?