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