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










相关文章
|
14天前
|
JavaScript
JS代码动态打印404页面源码
源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面
13 0
JS代码动态打印404页面源码
|
22天前
|
设计模式 JavaScript
js设计模式【详解】—— 原型模式
js设计模式【详解】—— 原型模式
23 6
|
22天前
|
设计模式 JavaScript 前端开发
js设计模式【详解】—— 构造函数模式
js设计模式【详解】—— 构造函数模式
21 6
|
19天前
|
JavaScript
js好用的动态分页插件
js好用的动态分页插件是一款简单的分页样式插件,支持样式类型,当前页,每页显示数量,按钮数量,总条数,上一页文字,下一页文字,输入框跳转等功能。
15 1
|
21天前
|
JavaScript 前端开发
vue 模拟随机变速的动态打字特效【支持多行文本】(含css实现闪烁光标,js动态改变setInterval定时器的时间间隔)
vue 模拟随机变速的动态打字特效【支持多行文本】(含css实现闪烁光标,js动态改变setInterval定时器的时间间隔)
18 1
|
24天前
|
前端开发 JavaScript
使用JavaScript动态更改元素的CSS属性
【6月更文挑战第29天】使用JavaScript动态更改元素的CSS属性
29 3
|
25天前
|
JavaScript 前端开发
JavaScript中的var变量详解:定义、提升与注意事项
JavaScript中的var变量详解:定义、提升与注意事项
16 2
|
18天前
|
JavaScript 索引
js 类数组 转 数组
js 类数组 转 数组
17 0
|
19天前
|
JavaScript
Js,定义数组的方法,let 数组名 = [数据1,数据2,........,数据n],取值方法,数组名[x],arr[0],let sum sum = sum + arr[0],求和的写法,平均值
Js,定义数组的方法,let 数组名 = [数据1,数据2,........,数据n],取值方法,数组名[x],arr[0],let sum sum = sum + arr[0],求和的写法,平均值
|
21天前
|
存储 JavaScript 前端开发
面试官:JS中变量定义时内存有什么变化?
面试官:JS中变量定义时内存有什么变化?
15 0