定义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,如需转载请自行联系原作者










相关文章
|
1月前
|
存储 JavaScript 前端开发
构造函数和原型的结合应用:轻松搞定JS的面向对象编程(三)
构造函数和原型的结合应用:轻松搞定JS的面向对象编程
|
1月前
|
设计模式 JavaScript 前端开发
构造函数和原型的结合应用:轻松搞定JS的面向对象编程(一)
构造函数和原型的结合应用:轻松搞定JS的面向对象编程
|
1月前
|
JavaScript 前端开发
实现一个JavaScript动态日期功能
实现一个JavaScript动态日期功能
|
3月前
|
JavaScript 小程序
小程序JS动态修改样式vv
小程序JS动态修改样式
75 0
|
3月前
|
JavaScript 前端开发 Java
javascript实现像java、c#之类的sleep暂停的函数功能
javascript实现像java、c#之类的sleep暂停的函数功能
35 0
|
1月前
|
存储 JavaScript 前端开发
构造函数和原型的结合应用:轻松搞定JS的面向对象编程(二)
构造函数和原型的结合应用:轻松搞定JS的面向对象编程
|
19天前
|
前端开发 JavaScript UED
动态伸缩搜索框:HTML, CSS, JavaScript的完美结合
动态伸缩搜索框:HTML, CSS, JavaScript的完美结合
24 1
|
22天前
|
JavaScript 索引
js之数组,对象,类数组对象
js之数组,对象,类数组对象
|
24天前
|
JavaScript 前端开发
js定义函数的三种方式
js定义函数的三种方式
7 0
|
1月前
|
JSON JavaScript 前端开发
【面试题】JS判断两个数组相等的4类方法
【面试题】JS判断两个数组相等的4类方法

相关产品

  • 云迁移中心