JavaScript高级--面向对象

面向过程与面向对象编程

1、面向过程：所有的工作都是现写现用。

2、面向对象：是一种编程思想，许多功能事先已经编写好了，在使用时，只需要关注功能的运用，而不需要这个功能的具体实现过程。

javascript对象
将相关的变量和函数组合成一个整体，这个整体叫做对象，对象中的变量叫做属性，变量中的函数叫做方法。javascript中的对象类似字典。

创建对象的方法
1、单体 

2、工厂模式

3、构造函数

4、原型模式

5、继承

  1 <!doctype html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport"
  6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8     <title>创建对象的方法-单体/工厂模式/构造函数/原型模式/继承</title>
  9 
 10     <script type="text/javascript">
 11     //---------------------------单体-----------------------------
 12         var Tom={
 13             name:'tom',   //注意逗号
 14             age:20,
 15             showname:function(){
 16                 alert(this.name);
 17             },
 18             showage:function(){
 19                 alert(this.age);
 20             }
 21         }
 22 
 23        // alert(Tom.age);
 24        // Tom.showage();
 25 
 26 
 27     //---------------------------工厂模式-----------------------------
 28         function Person(name,age,job){
 29             var o=new Object();  //等价于new o={};
 30 
 31             o.name=name;
 32             o.age=age;
 33             o.job=job;
 34 
 35             o.showname=function(){
 36                 alert(this.name);
 37             }
 38 
 39             o.showage=function(){
 40                 alert(this.age);
 41             }
 42 
 43             o.showjob=function(){
 44                 alert(this.job);
 45             }
 46 
 47             return o;
 48         }
 49 
 50         //var Tom=Person('tom',22,'singer');
 51         //var Jack=Person('jack',19,'teacher');
 52         //Tom.showname();
 53         //Jack.showname();
 54 
 55 
 56     //---------------------------构造函数-----------------------------
 57         function Person(name,age,job){
 58         this.name=name;
 59         this.age=age;
 60         this.job=job;
 61 
 62         this.showname=function(){
 63             alert(this.name);
 64         }
 65         this.showage=function(){
 66             alert(this.age);
 67         }
 68         this.showjob=function(){
 69             alert(this.job);
 70         }
 71         }
 72 
 73         //var Tom=new Person('tom',22,'singer');
 74         //var Jack=new Person('jack',19,'teacher');
 75         //Tom.showname();
 76         //Jack.showname();
 77         
 78 
 79     //---------------------------原型模式-----------------------------
 80         function Person(name,age,job){
 81             this.name=name;
 82             this.age=age;
 83             this.job=job;
 84         }
 85 
 86         Person.prototype.showname=function(){
 87             alert(this.name);
 88         }
 89         Person.prototype.showage=function(){
 90             alert(this.age);
 91         }
 92         Person.prototype.showjob=function(){
 93             alert(this.job);
 94         }
 95 
 96         /*
 97         var Tom=new Person('tom',22,'singer');
 98         var Jack=new Person('jack',19,'teacher');
 99 
100         Tom.showage=function(){
101             alert('my age is:'+this.age);
102         }
103 
104         Tom.showage();  //弹出 my age is:22
105         Jack.showage(); //弹出19
106 
107         alert(Tom.showage==Jack.showage);
108         */
109         
110 
111     //---------------------------类的继承----------------------------
112     function Fclass(name,age){
113         this.name=name;
114         this.age=age;
115     }
116 
117     Fclass.prototype.showname=function(){
118         alert(this.name);
119     }
120     Fclass.prototype.showage=function(){
121         alert(this.age);
122     }
123 
124     // 属性用call或者applay的方式来继承
125     function Sclass(name,age,job){
126         Fclass.call(this,name,age);  //这里的this指Sclass
127         this.job=job;
128     }
129 
130     // 方法继承：将父类的一个实例赋值给子类的原型属性
131     Sclass.prototype=new Fclass();
132 
133     Sclass.prototype.showjob=function(){
134         alert(this.job);
135     }
136 
137     var Tom=new Sclass('tom',22,'singer');
138     Tom.showname();
139     Tom.showjob();
140     </script>
141 </head>
142 <body>
143 
144 </body>
145 </html>

 

 

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>call和apply</title>
 9 
10     <script type="text/javascript">
11         function aa(a,b){
12             alert('我的this是：'+this+',我的a是：'+a+' 我的b是：'+b)
13         }
14 
15         //aa(12,24)    //我的this是：[object Window],我的a是：12 我的b是：24
16        // aa.call('abc',12,24) //我的this是：abc,我的a是：12 我的b是：24
17        aa.apply('abc',[12,24]) //我的this是：abc,我的a是：12 我的b是：24
18     </script>
19 </head>
20 <body>
21 
22 </body>
23 </html>

posted on 2019-12-20 00:15  cherry_ning  阅读(156)  评论(0)    收藏  举报

导航