javascript创建对象的方法--构造函数模式

天涯浪子 提交于 2020-05-09 10:54:24

javascript创建对象的方法--构造函数模式

一、总结

构造函数模式作用和不足

1、作用:解决工厂模式不是用new关键字来创建对象的弊端

2、作用:解决工厂模式创建的实例和模型没有内在联系的问题

3、不足:无法解决工厂模式不同实例对应于不同内存的问题(内存浪费),这个用原型模式可以解决

 

二、javascript创建对象的方法--构造函数模式(需仔细看

构造函数模式

  1. new 调用的函数为构造函数,构造函数和普通函数区别仅仅在于是否使用了new来调用
  2. 所谓“构造函数”,就是专门用来生成“对象”的函数。它提供模板,作为对象的基本结构
  3. 构造函数内部使用了this变量。对构造函数使用new运算符,就能生成实例,并且this变量会绑定在实例对象上
  4. instanceof 验证原型对象与实例对象之间的关系。
  5. 使用call和apply方法实现对象的冒充
  6. 问题:浪费内存--使用构造函数每生成一个实例,都增加一个重复的内容,多占用一些内存。这样既不环保,也缺乏效率。

 

三、代码

代码一:

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4   <meta charset="utf-8">
 5   <title>课堂演示</title>
 6 </head>
 7 <body>
 8   <script>
 9   //基本模式
10       var people1=new Object();
11       people1.name='孙悟空';
12       people1.weapon='金箍棒';
13       people1.run=function(){
14         return this.name+'的武器是'+this.weapon
15       }
16      // alert(people1.name) 
17       //alert(people1.run()) //注意方法的调用需要加()
18      //该方法如果创建多个对象就会比较繁琐,如下...... 
19       var people2=new Object();
20       people2.name='猪八戒';
21       people2.weapon='钉耙';
22       people2.run=function(){
23         return this.name+'的武器是'+this.weapon
24       }
25 //工厂模式
26       function creatPeople(name,weapon){
27         var people=new Object() //可以类比为加工对象的原材料
28         people.name=name;
29         people.weapon=weapon;
30         people.run=function(){
31            return this.name+'的武器是'+this.weapon
32         }  //以上步骤可以类比为加工对象的过程
33         return people //注意一定要讲创建的对象返回 
34         //可以类比为产品加工完毕出厂的工作
35       }
36        var wukong=creatPeople('孙悟空','金箍棒');
37        var bajian=creatPeople('猪八戒','钉耙');
38       //alert(wukong.run)
39       //alert(bajian.run)
40       //alert(wukong.run==bajian.run)//两个对象实例的地址是不同的,说明两个对象会占用两个地址空间的内存
41 //new 关键字
42      function fun(){
43       alert(this)
44     }
45     //fun()
46     //new fun() //如果有new 函数里的this就是新创建出来的对象,如果没有就是Window
47 //构造函数模式
48 //注意:构造函数不需要使用 return语句返回对象,它的返回是自动完成的
49       function People(name,weapon){
50         this.name=name;
51         this.weapon=weapon;
52         this.run=function(){
53            return this.name+'的武器是'+this.weapon
54         }  
55       }
56       var wujing=new People('沙悟净','禅杖');
57       alert(wujing.run())
58   </script>
59 </body>
60 </html>

1、原型模式(内存浪费):原型模式的不同实例分配到不同的内存

2、this用法:普通函数,如果有new 函数里的this就是新创建出来的对象,如果没有就是Window

3、js构造函数自动返回:js的构造函数不需要返回,自动返回

4、this用法:用了this关键字,因为用了new之后this指向对象

5、var 变量名接收一切:js中新创建出来的对象还是用 var 变量名 的方式接收,和变量的方式一样

6、js构造模式和其它一样:js的构造模式和java、c++等一样

 

代码二:

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4   <meta charset="utf-8">
 5   <title>课堂演示</title>
 6 </head>
 7 <body>
 8   <script>
 9 //构造函数模式
10 //注意:构造函数不需要使用 return语句返回对象,它的返回是自动完成的
11       function People(name,weapon){
12         this.name=name;
13         this.weapon=weapon;
14         this.run=function(){
15            return this.name+'的武器是'+this.weapon
16         }  
17       }
18       var wujing=new People('沙悟净','禅杖');
19       var wukong=new People('孙悟空','金箍棒');
20       var bajian=new People('猪八戒','钉耙');
21       //alert(wujing.run())
22       //alert(wujing instanceof People)
23       var monster=new Object();
24       //People.call(monster,'妖怪','葫芦')
25       People.apply(monster,['妖怪','葫芦'])
26       // alert(monster.run())
27       // alert(monster.name)
28       var monster1=new People('小妖','长矛')
29       var monster2=new People('小妖','长矛')
30       alert(monster1.run()+'\n'+monster2.run())
31       alert(monster1.run==monster2.run)//两个对象实例的地址是不同的,说明两个对象会占用两个地址空间的内存 
32 
33   </script>
34 </body>
35 </html>

1、判断实例instanceof来判断实例,看这个of就知道实例在前,模型在后

2、call和apply用法:call方法和apply方法实现对象的模仿,用法是要 被模仿的东西.apply 的形式

3、构造模式内存浪费:构造器模式创建的对象分配的地址是不同的

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!