定义JavaScript类:工厂模式、构造函数模式、原型模式、构造函数原型模式、动态原型模式-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

定义JavaScript类:工厂模式、构造函数模式、原型模式、构造函数原型模式、动态原型模式

简介:

1    工厂模

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script type="text/javascript">
        //通过包装函数封装模具
        function wrapBook(title,pages){
            var book = new Object();
            //申明属性并接收参数
            book.title = title;
            book.pages = pages;
            book.what = function(){
                alert(this.title+":"+this.pages);
            }
            return book;   //返回初始化后的对象
        }
         window.onload = function(){
             //调用模具快速生产
             //var book1 = wrapBook("JavaScript权威指南",600);
             //var book2 = wrapBook("Dojo权威指南",390);
             var book1 = new wrapBook("JavaScript权威指南",600);
             var book2 = new wrapBook("Dojo权威指南",390);
             book1.what();
             book2.what();
             console.dir(book1);
             console.dir(book2);
         }
    </script>

 问题:上面方法what()封装在图书模具函数wrapBook结构中,这样每生产一本书,该函数就被创建一次,也就是说,每本书都有一个相同的方法,造成资源浪费。

  解决:把方法what()分离出来,在模具中引用该方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script type="text/javascript">
        //申明一个全局变量
        what = function (){
            alert(this.title+":"+this.pages);
        }
        //通过包装函数封装模具
        function wrapBook(title,pages){
            var book = new Object();
            //申明属性并接收参数
            book.title = title;
            book.pages = pages;
            book.what = what;   //引用全局方法的引用指针
            return book;   //返回初始化后的对象
        }
         window.onload = function(){
             //调用模具快速生产
             //var book1 = wrapBook("JavaScript权威指南",600);
             //var book2 = wrapBook("Dojo权威指南",390);
             var book1 = new wrapBook("JavaScript权威指南",600);
             var book2 = new wrapBook("Dojo权威指南",390);
             book1.what();
             book2.what();
             console.dir(book1);
             console.dir(book2);
         }
    </script>


2    构造函数模式


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//构造函数模型
        function Book(title,pages){
            //构造函数属性
            this.title = title;
            this.pages = pages;
            //构造函数方法
            this.what = function (){
                alert(this.title+":"+this.pages);
            }
        }
         window.onload = function(){
             //实例化构造函数,并传递参数
             var book1 = new Book("JavaScript权威指南",600);
             var book2 = new Book("Dojo权威指南",390);
             book1.what();
             book2.what();
             console.dir(book1);
             console.dir(book2);
         }
    </script>


      备注:构造函数模式只能使用new运算符进行调用,不能使小括号()来调用。

       问题:类似于工厂模式,造成what()方法重复创建。


3    原型模式

     采用函数的prototype属性来实现。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type="text/javascript">
       //使用构造函数定义一个空类
       function Book(){ }
      //为原型申明属性并初始化
       Book.prototype.title = "图书名称";
       Book.prototype.pages = 120;
       //为原型申明一个方法
       Book.prototype.what = function (){
               alert(this.title+":"+this.pages);
       }
        window.onload = function(){
            //实例化构造函数,并传递参数
            var book1 = new Book();
            var book2 = new Book();
            book1.what();
            book2.what();
            console.dir(book1);
            console.dir(book2);
        }
   </script>


4    构造函数原型模式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script type="text/javascript">
        //构造函数模式设计
        function Book(title,pages){
            //构造函数属性
            this.title = title;
            this.pages = pages;
        }
        //原型模式设计
        Book.prototype.what = function (){
                alert(this.title+":"+this.pages);
        }
         window.onload = function(){
             //实例化构造函数,并传递参数
             var book1 = new Book("JavaScript权威指南",600);
             var book2 = new Book("Dojo权威指南",390);
             book1.what();
             book2.what();
             console.dir(book1);
             console.dir(book2);
         }
    </script>

   备注:推荐采用此模式。


5     动态原型模式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script type="text/javascript">
        //构造函数模式设计
        function Book(title,pages){
            //构造函数属性
            this.title = title;
            this.pages = pages;
            //原型模式设计,位于类的内部
            Book.prototype.what = function (){
                alert(this.title+":"+this.pages);
            }
        }
         window.onload = function(){
             //实例化构造函数,并传递参数
             var book1 = new Book("JavaScript权威指南",600);
             var book2 = new Book("Dojo权威指南",390);
             book1.what();
             book2.what();
             console.dir(book1);
             console.dir(book2);
         }
    </script>

   问题:当每次实例化时,类中包含的原型方法就会被创建一次,造成资源浪费。

   解决:安装一个判断开关,检测该方法是否已经创建。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script type="text/javascript">
       //构造函数模式设计
       function Book(title,pages){
           //构造函数属性
           this.title = title;
           this.pages = pages;
           //创建原型方法的锁,如果不存在,就创建该方法
           if(typeof Book.isLock == "undefined"){
               Book.prototype.what = function (){
                   alert(this.title+":"+this.pages);
               };
               //创建原型方法后,把锁锁上,避免重复创建
               Book.isLock = true;
           }
       }
        window.onload = function(){
            //实例化构造函数,并传递参数
            var book1 = new Book("JavaScript权威指南",600);
            var book2 = new Book("Dojo权威指南",390);
            book1.what();
            book2.what();
            console.dir(book1);
            console.dir(book2);
        }
   </script>


       总结:目前使用最广泛的是混合的构造函数/原型方式。此外,动态原型方法也很流行,在功能上与构造函数/原型方式等价。可以采用这两种方式中的任何一种。不过不要单独使用经典的构造函数或原型方式,因为这样会给代码引入问题。







     本文转自stock0991 51CTO博客,原文链接:http://blog.51cto.com/qing0991/1363513,如需转载请自行联系原作者










版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享: