面向对象---高级

1.Json方式的面向对象---通过在Json里面写函数来调用这个函数。

1 var obj={a: 12, b: 5, c: function (){
2     alert(this.a);
3 }};
4 
5 obj.c();

Json的缺陷----对象只能是自己一个一个的添加，在大型项目并不适用。

 1 var p1={
 2     name: 'paxster',
 3     sex: '男',
 4     showName: function ()
 5     {
 6         alert('我的名字是：'+this.name);
 7     },
 8     showSex: function ()
 9     {
10         alert('我的性别是'+this.sex+'的');
11     }
12 };
13 
14 var p2={
15     name: 'boychik',
16     sex: '女',
17     showName: function ()
18     {
19         alert('我的名字是：'+this.name);
20     },
21     showSex: function ()
22     {
23         alert('我的性别是'+this.sex+'的');
24     }
25 };
26 p1.showName();
27 p1.showSex();
28 p2.showName();
29 p2.showSex();

命名空间-----方便函数管理，分工明确

 1 var paxster={};//一个空的json
 2 paxster.common={
 3     getByClass: function ()
 4     {
 5     },
 6     myAddEvent: function ()
 7     {
 8     }
 9 };
10 
11 paxster.fx={
12     startMove: function ()
13     {
14     },
15     drag: function ()
16     {
17     }
18 };
19 
20 paxster.common.getByClass()

面向对象写法---拖拽

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <style>
 5 #div1 {width:100px; height:100px; background:red; position:absolute;}
 6 #div2 {width:100px; height:100px; background:yellow; position:absolute;}
 7 </style>
 8 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 9 <title>无标题文档</title>
10 <script>
11 window.onload=function ()
12 {
13     new Drag('div1');
14     new Drag('div2');
15 };
16 
17 function Drag(id)
18 {
19     var _this=this;
20     
21     this.disX=0;
22     this.disY=0;
23     this.oDiv=document.getElementById(id);
24     
25     this.oDiv.onmousedown=function ()
26     {
27         _this.fnDown();
28     };
29 }
30 
31 Drag.prototype.fnDown=function (ev)
32 {
33     var _this=this;
34     var oEvent=ev||event;
35     this.disX=oEvent.clientX-this.oDiv.offsetLeft;
36     this.disY=oEvent.clientY-this.oDiv.offsetTop;
37     
38     document.onmousemove=function ()
39     {
40         _this.fnMove();
41     };
42     
43     document.onmouseup=function ()
44     {
45         _this.fnUp();
46     };
47 };
48 
49 Drag.prototype.fnMove=function (ev)
50 {
51     var oEvent=ev||event;
52     
53     this.oDiv.style.left=oEvent.clientX-this.disX+'px';
54     this.oDiv.style.top=oEvent.clientY-this.disY+'px';
55 };
56 
57 Drag.prototype.fnUp=function ()
58 {
59     document.onmousemove=null;
60     document.onmouseup=null;
61 };
62 </script>
63 </head>
64 
65 <body>
66 <div id="div1">
67 </div>
68 <div id="div2">
69 asdf
70 </div>
71 </body>
72 </html>

php里的继承

关于php注释

//这里是注释内容。这种是C++的注释风格，只能注释单行的内容。

#这里是注释内容。这种是Unix shell的注释风格，也是只能注释单行的内容。

这里是注释内容。

这种注释方法可以使用多行注释，但绝对不能把/* */这个字串再嵌入注释里

 1 <?php
 2 class Person
 3 {
 4     function __construct($name, $sex)
 5     {
 6         $this->name=$name;//->相当于js里面的.   表示“的”
 7         $this->sex=$sex;
 8     }
 9     
10     function showName()
11     {
12         echo $this->name;//echo相当于js里的alert
13     }
14     
15     function showSex()
16     {
17         echo $this->sex;
18     }
19 }
20 
21 class Worker extends Person    //php里面的继承，使用extends继承父亲的特性
22 {
23     function __construct($name, $sex, $job)
24     {
25         parent::__construct($name, $sex);
26         
27         $this->job=$job;
28     }
29     
30     function showJob()
31     {
32         echo $this->job;
33     }
34 }
35 
36 $w1=new Worker('paxster', '男', '扫大街');
37 
38 $w1->showName();
39 $w1->showJob();
40 ?>

JS里的继承方式

 1 function Person(name, sex)
 2 {
 3     this.name=name;
 4     this.sex=sex;
 5 }
 6 
 7 Person.prototype.showName=function ()
 8 {
 9     alert(this.name);
10 };
11 
12 Person.prototype.showSex=function ()
13 {
14     alert(this.sex);
15 };
16 
17 //-------------------------------------
18 
19 function Worker(name, sex, job)　　//这个构造函数继承上面的父函数的功能，添加新的功能
20 {
21     //this->new出来的Worker对象
22     //构造函数伪装        调用父级的构造函数——为了继承属性
23     Person.call(this, name, sex);　　//继承父类的call方法
24     
25     this.job=job;　　//新添加的功能
26 }
27 
28 //原型链        通过原型来继承父级的方法----多次的值传递，产生一条原型链
29 //Worker.prototype=Person.prototype; 直接继承父类的方法，不使用这种方法　　
30 
31 for(var i in Person.prototype)　　
32 {
33     Worker.prototype[i]=Person.prototype[i];
34 }
35 
36 Worker.prototype.showJob=function ()
37 {
38     alert(this.job);
39 };
40 
41 var oP=new Person('blue', '男');
42 var oW=new Worker('blue', '男', '打杂的');
43 
44 oP.showName();
45 oP.showSex();
46 
47 oW.showName();
48 oW.showSex();
49 oW.showJob();

instanceof实例属于谁？

1 var arr1=[1,2,3];
2 
3 alert(arr1 instanceof Object);　　//arr1属于Object

引用类型的特点

1 var arr1=[1,2,3];　　//第一个数组和第二个数组
2 var arr2=arr1;　　
3 
4 arr2.push(4);　　　　//第一个数组和第二个数组输出的都是1,2，3,4   因为第一个数组引用了第二个数组，也就是第二个数组的改变影响了第一个，因为有一句arr2=arr1
5 
6 alert('1:'+arr1);
7 alert('2:'+arr2);

改进后的引用

 1 var arr1=[1,2,3];
 2 var arr2=[];　　//第二个数组没有去取第一个数组的内容
 3 
 4 for(var i in arr1)　　//数组arr2遍历数组arr1里面的内容，复制了一份arr1，不会存在儿子影响父亲的情况
 5 {
 6     arr2[i]=arr1[i];
 7 }
 8 
 9 arr2.push(4);
10 
11 alert('1:'+arr1);    
12 alert('2:'+arr2);

使用继承实现拖拽

html结构代码：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <style>
 5 #div1 {width:100px; height:100px; background:red; position:absolute;}
 6 #div2 {width:100px; height:100px; background:yellow; position:absolute;}
 7 </style>
 8 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 9 <title>无标题文档</title>
10 <script src="Drag.js"></script>
11 <script src="LimitDrag.js"></script>
12 <script>
13 window.onload=function ()
14 {
15     new Drag('div1');
16     new LimitDrag('div2');
17 };
18 </script>
19 </head>
20 
21 <body>
22 <div id="div1">
23 </div>
24 <div id="div2">
25 </div>
26 </body>
27 </html>

Drag.js

 1 function Drag(id)
 2 {
 3     var _this=this;
 4     
 5     this.disX=0;
 6     this.disY=0;
 7     this.oDiv=document.getElementById(id);
 8     
 9     this.oDiv.onmousedown=function (ev)
10     {
11         _this.fnDown(ev);
12         
13         return false;
14     };
15 }
16 
17 Drag.prototype.fnDown=function (ev)
18 {
19     var _this=this;
20     var oEvent=ev||event;
21     this.disX=oEvent.clientX-this.oDiv.offsetLeft;
22     this.disY=oEvent.clientY-this.oDiv.offsetTop;
23     
24     document.onmousemove=function (ev)
25     {
26         _this.fnMove(ev);
27     };
28     
29     document.onmouseup=function ()
30     {
31         _this.fnUp();
32     };
33 };
34 
35 Drag.prototype.fnMove=function (ev)
36 {
37     var oEvent=ev||event;
38     
39     this.oDiv.style.left=oEvent.clientX-this.disX+'px';
40     this.oDiv.style.top=oEvent.clientY-this.disY+'px';
41 };
42 
43 Drag.prototype.fnUp=function ()
44 {
45     document.onmousemove=null;
46     document.onmouseup=null;
47 };

limiitdrag.js

 1 function LimitDrag(id)
 2 {
 3     Drag.call(this, id);
 4 }
 5 
 6 //LimitDrag.prototype=Drag.prototype;
 7 
 8 for(var i in Drag.prototype)
 9 {
10     LimitDrag.prototype[i]=Drag.prototype[i];
11 }
12 
13 LimitDrag.prototype.fnMove=function (ev)
14 {
15     var oEvent=ev||event;
16     var l=oEvent.clientX-this.disX;
17     var t=oEvent.clientY-this.disY;
18     
19     if(l<0)
20     {
21         l=0;
22     }
23     else if(l>document.documentElement.clientWidth-this.oDiv.offsetWidth)
24     {
25         l=document.documentElement.clientWidth-this.oDiv.offsetWidth;
26     }
27     
28     if(t<0)
29     {
30         t=0;
31     }
32     else if(t>document.documentElement.clientHeight-this.oDiv.offsetHeight)
33     {
34         t=document.documentElement.clientHeight-this.oDiv.offsetHeight;
35     }
36     
37     this.oDiv.style.left=l+'px';
38     this.oDiv.style.top=t+'px';
39 };

系统对象：

宿主对象：由浏览器提供，BOM---window，DOM---document，不同的浏览器对他们的支持不一样
内置对象：静态对象----Global，Math
本地对象：非静态对象----需要new出来，也就是创建实例；常用对象----Object、Function、Array、String、Boolean、Number、Date、RegExp、Error

念念不忘，必有回响。