【javascript】javascript面向对象(妙味版)

zccst笔记 
一、面向对象初步 
工厂方法 

Js代码  

1. function createPerson(name,sex){  
2.   //1  
3.   var p = new Object;  
4.   //2  
5.   p.name = name;  
6.   p.sex  = sex;  
7.   p.showName = function(){alert(this.name);}  
8.   p.showSex = function(){alert(this.sex);}  
9.   //3  
10.   return p;  
11. }  
12. p1 = createPerson('blue','male');  
13. p2 = createPerson('leo','female');  

缺点： 
1，没有new。 
2，每个对象都有一套自己的函数——浪费资源  解决：使用原型 
alert(p1.showName == p2.showName);//false 


真正的面相对象 

Js代码  

1. //例如  
2. function createPerson(name,sex){  
3.   this.name = name;  
4.   this.sex  = sex;  
5. }  
6. createPerson.prototype.showName = function(){alert(this.name);}  
7. createPerson.prototype.showSex = function(){alert(this.sex);}  
8. alert(p1.showName == p2.showName);//true  
9.   
10. //再例如:  
11. var arr1 = new Array(1,2,3,4);  
12. var arr2 = new Array(1,2,3,4,5);  
13. Array.prototype.sum = function(){  
14.   var ret = 0;  
15.   for(var i = 0; i < this.length; i++){  
16.     ret += this[i];  
17.   }  
18.   return ret;  
19. }  
20. alert(arr1.sum());  
21. alert(arr2.sum());  
22.   
23. String.prototype.trim = function(){  
24.   return this.replace(/^/s+|/s+$/g,'');  
25. }  

需要注意的几点： 

1，构造函数就是类，类就是构造函数 

Js代码  

1. echo typeof Date; //function  
2.   
3. function() show{  
4.  alert('abc');  
5. }  
6. var show = function(){ //alert(typeof show);//function  
7.  alert('abc');  
8. }  
9. //实际上是  
10. var show = new Function("alert('abc')");//alert(typeof show);//function  
11.   
12. typeof Array,Date//都是function  
13. typeof Array(), Date()//都是object  
14.   
15.   
16.   
17. alert(typeof Array);//function  
18. console.log(Array); //[undefined]  
19.   
20. alert(typeof Date); //function  
21. console.log(Date);  //Date()  
22.   
23. alert(typeof Array());//object  
24. console.log(Array()); //[]  
25.   
26. alert(typeof Date()); //string  
27. console.log(Date());  //Mon Nov 26 2012 18:45:27 GMT+0800  
28.   
29. alert(typeof (new Array()));//object  
30. console.log(new Array());   //[]  
31.   
32. alert(typeof (new Date())); //object  
33. console.log(new Date());    //Date {Mon Nov 26 2012 18:45:28 GMT+0800}  
34.   
35.   
36. alert(typeof Math);//function  
37. console.log(Math); //Math {}  

2，原型优先级（可类比CSS的行间样式和class） 

Js代码  

1. Array.prototype.a = 12;  
2. var arr = [1,2,3];  
3. alert(arr.a); //12  
4. arr.a = 5;  
5. alert(arr.a); //5  
6. delete arr.a;  
7. alert(arr.a); //12  

二、容易错乱的this 
this关键字 
在两种情况下回引起错乱：定时器和事件中。 
【北风版】解释：内部函数中的this是全局window。外部函数的this是当前函数域。 

Js代码  

1. var box = {    
2.     user : "the box",    
3.     getUser : function(){    
4.         return this.user;    
5.     }  
6. };  
7. //alert(box.getUser());  
8.   
9.   
10.   
11. var box = {    
12.     user : "the box",    
13.     getUser : function(){  
14.         return function(){  
15.             alert(this);     //[object Window]  
16.             return this.user;//undefined  
17.         }  
18.     }  
19. };  
20. //alert(box.getUser()());  
21. //内部函数中的this是全局window。外部函数的this是当前函数域。   
22.   
23.   
24. //解决办法一：使用_this。  
25. var box = {    
26.     user : "the box",    
27.     getUser : function(){  
28.         var _this = this;  
29.         return function(){  
30.             alert(_this);     //[object Object]  
31.             return _this.user;//the box  
32.         }  
33.     }  
34. };  
35. alert(box.getUser()());  
36.   
37. //解决办法二：使用call  
38. alert(box.getUser().call(box));  

1，定时器 
原因：定时器是全局变量 

Js代码  

1. function Aaa(){  
2.   this.a = 12;  
3.   
4.   //异常原因是this此时变成全局window  
5.   //setInterval(this.show, 1000);  
6.   
7.   //正确的方法  
8.   var _this = this;  
9.   setInterval(function(){  
10.     _this.show();  
11.   },1000);  
12. }  
13. Aaa.prototype.show = function(){  
14.   alert(this.a);  
15. }  
16. var obj = new Aaa();  
17. obj.show();  

2，事件中 
原因：对象和dom对象混在一起 
解决办法： 
var _this = this; 
this.xx = function(){ 
  _this.show(); 
} 
实例 

Js代码  

1. function Bbb(){  
2.   this.b = 5;  
3.   
4.   //异常原因是show方法中的this变成dom对象  
5.   //document.getElementById('btn1').οnclick=this.show;  
6.   
7.   //正确的方法  
8.   var _this = this;  
9.   document.getElementById('btn1').οnclick= = function(){  
10.     _this.show();  
11.   }  
12. }  
13. BB.prototype.show = function(){  
14.   alert(this.b);  
15. }  
16. window.onload = function(){  
17.   new Bbb();  
18. }  

三、继承 
js继承通过call 

Js代码  

1. function Person(name,sex){  
2.     this.name = name;  
3.     this.sex  = sex;  
4. }  
5. Person.prototype.showName = function(){  
6.     alert(this.name);  
7. }  
8. Person.prototype.showSex = function(){  
9.     alert(this.sex);  
10. }  
11.   
12. function Worker(name,sex,job){  
13.     //继承父类,this由Person变为Worker对象。构造函数伪装：继承父类的属性  
14.     Person.call(this,name,sex);  
15.     this.job = job;  
16. }  
17.   
18. //通过原型继承父类的方法。原型链  
19. Worker.prototype = Person.prototype;  
20. //是引用。对Worker的修改影响了Person的方法。换成  
21. for(var i in Person.prototype){  
22.     Worker.prototype[i] = Person.prototype[i];  
23. }  
24.   
25.   
26. Worker.prototype.showJob = function(){  
27.     alert(this.job);  
28. }  
29. var oM1 = new Worker('blue','男', '打杂的');  
30. oM1.showJob();  

总结： 
构造函数伪装：继承父类的属性 
通过原型链：继承父类方法 

需要注意的几点： 
1，引用 
本质就是指向同一块区域。js所有对象全是引用。 

Js代码  

1. var arr1 = [1,2,3];  
2. var arr2 = arr1;  
3. arr2.push(4);  
4. alert(arr1);  
5. alert(arr2);  
6.   
7. //解决办法之一：通过for循环  

2，instanceof 

Js代码  

1. var arr1 = new Array();  
2. alert(arr1 instanceof Object);   //true  
3. alert(arr1 instanceof Array);    //true  
4. alert(arr1 instanceof Function); //false  
5. alert(arr1 instanceof Date);     //false  
6.   
7. alert(typeof arr1);              //object  

四、js系统对象 

1，宿主对象（由浏览器提供） 
主要是document和widow。 

2，本地对象（非静态对象） 
var arr = new Array(); //正常 
常见：Object, Function, Array, String, Boolean, Number, Date, RegExp, Error 

3，内置对象（静态对象） 
var oMath = new Math();//报错 
不需要实例化，可以直接用。比如熟悉函数。 
常见：Math，Global