js-面向对象的概念

什么是面向对象？

首先，先理解一下对象，很多事物都是对象，简单到一整数，复杂到一架飞机，对象是一个整体，对外提供一些操作；那么面向对象就是说，使用对象的时候，你可以直接使用它所提供的功能而忽略其内部组成情况。面对对象不一定只有在编程界里才有，我们生活中无处不在；我的理解是这样的：比如说，你家里的电视机，你使用了遥控，就能操作电视机，但是你实际上不知道这台电视机里面是什么零件组成的，你只要知道，我拿到遥控就可以操作电视机就好了。这就是一种面向对象的思想。

js中的面向对象

1、面向对象编程的特点：

抽象：抓住核心问题

封装：不用考虑内部实现过程，只要考虑功能的使用

继承：从已有对象，继承出新的对象

2、对象的组成

方法：函数--过程、动态的

属性：变量--状态、静态的

1. <script>
2. var a=12;//变量：自由的，不属于任何人
3. 
   
4. alert(a);
5. 
   
6. var arr=[1,2,3,4,5,6];
7. 
   
8. arr.a=12;//属性：属于一个对象的
9. 
   
10. alert(arr.a);
11. </script>

/*-----------------------------------------------------------------------------------------------------------------------------*/

1. <script>
2. function aaa()//函数：自由
3. {
4. alert('abc');
5. }
6. 
   
7. var arr=[1,2,3,4];
8. 
   
9. arr.aaa=function()//方法：属于一个对象
10. {
11. alert('abc');
12. };
13. 
    
14. aaa();
15. arr.aaa();
16. </script>
17. 


写一个面向对象的程序

1、为对象添加属性和方法

1. <script>
2. var arr=[1,2,3,4];
3. 
   
4. arr.a=12;
5. 
   
6. arr.show=function()
7. {
8. alert(this.a);
9. };
10. 
    
11. oDiv.onclick=function()
12. {
13. alert(this);
14. };
15. 
    
16. arr.show();
17. </script>
18. //上面的this属于谁？

2、 this 详解，事件处理中 this 的本质

< script >

window . show = function ()

{

alert ( this );

};

show ();

</ script >

//会弹出什么？

上面的属性和方法都是加在数组对象上的，我们有个原则：不能在系统对象中随意附加方法、属性，否则会覆

已有方法、属性。所以这里，我们利用object来创建新对象：

1. <script>
2. var obj=newObject();
3. 
   
4. obj.name='blue';
5. obj.qq='258248832';
6. 
   
7. obj.showName=function()
8. {
9. alert('我的名字叫：'+this.name);
10. };
11. obj.showQQ=function()
12. {
13. alert('我的QQ号：'+this.qq);
14. };
15. 
    
16. obj.showName();
17. obj.showQQ();
18. </script>

如果有两个对象的情况；则

1. obj.name='blue';
2. obj.qq='258248832';
3. 
   
4. obj.showName=function()
5. {
6. alert('我的名字叫：'+this.name);
7. };
8. obj.showQQ=function()
9. {
10. alert('我的QQ号：'+this.qq);
11. };
12. 
    
13. obj.showName();
14. obj.showQQ();
15. 
    
16. var obj2=newObject();
17. 
    
18. obj2.name='张三';
19. obj2.qq='5468978546';
20. 
    
21. obj2.showName=function()
22. {
23. alert('我的名字叫：'+this.name);
24. };
25. obj2.showQQ=function()
26. {
27. alert('我的QQ号：'+this.qq);
28. };
29. 
    
30. obj2.showName();
31. obj2.showQQ();
32. </script>

上面的写法虽然没有问题，但是代码冗余，改进一下：构建函数（该函数的功能是构建对象）

1. <script>
2. function createPerson(name, qq)//构造函数
3. {
4. var obj=newObject();
5. 
   
6. obj.name=name;
7. obj.qq=qq;
8. 
   
9. obj.showName=function()
10. {
11. alert('我的名字叫：'+this.name);
12. };
13. obj.showQQ=function()
14. {
15. alert('我的QQ号：'+this.qq);
16. };
17. 
    
18. return obj;
19. }
20. 
    
21. var obj=createPerson('blue','258248832');
22. 
    
23. obj.showName();
24. obj.showQQ();
25. 
    
26. var obj2=createPerson('张三','45648979879');
27. 
    
28. obj2.showName();
29. obj2.showQQ();
30. </script>