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

1    工厂模

<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()分离出来，在模具中引用该方法。

<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    构造函数模式

//构造函数模型
        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属性来实现。

<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    构造函数原型模式

<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     动态原型模式

<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>

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

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

<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>

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

本文出自 “IT技术学习与交流” 博客，谢绝转载！