js面向对象编程

于 2016-10-19 18:18:14 发布
阅读量254 收藏
点赞数
分类专栏： javascript 文章标签： 对象的声明 对象的使用 面向对象实例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/web_note/article/details/52861999
版权

js面向对象编程

对象是什么?  对象数据类型：对象就是带有属性和方法的 数据类型

面向对象里面有什么：类和对象  （有什么关系）

类是对象的抽象，而对象是类的具体实例

 

基本数据类型    string   numberboolean   null   undefined

Array    对象 

对象数据类型有一个自定义属性

 var num = 10;   // 变量
var arr = [];  // 数组
arr.index = 10;  // 数组arr 的 一个 index  属性 

但是有个问题，我们想要某些属性或者方法的时候，用数组不合适。

arr.lenght  .

我们想要自己id属性和方法。 要求这个一定是个对象才行。

如何声明对象

我们有两种声明对象的方式.

var obj = new Object();   

但是我们更提倡用第二种方法：字面量式声明对象

 var obj  = {};

 

var obj = {};  // 声明对象
obj.name = "刘德华";  // 属性
obj.age = 55;
obj.showName = function() {   // 声明方法    方法一定带有 ()
    alert("俺是刘德华");
}
obj.showAge = function() {
    alert("俺今年18岁");
}

如何使用对象

console.log(obj.name);  // 调用属性
console.log(obj.age);
obj.showName();   //  调用方法
obj.showAge();

1、什么是面向对象 （面向对象是一种通用思想，并非只有编程中能用，任何事情都可以用） 

l 什么是对象  （  对象数据类型：对象就是带有属性和方法的 数据类型 ）
l电视机工作原理？
l 对象是一个整体，对外提供一些操作
l 什么是面向对象
l 使用对象时，只关注对象提供的功能，不关注其内部细节
l 比如 JQuery
l 面向对象是一种通用思想，并非只有编程中能用，任何事情都可以用

2、js中的面向对象

l 面向对象编程 (OOP) 的特点
l 抽象：抓住核心问题
l 封装：不考虑内部实现，只考虑功能使用
l 继承：从已有对象上，继承出新的对象
l 多重继承
l 多态
l 对象的组成
l 方法 —— 函数：过程、动态的
l 属性 —— 变量：状态、静态的 
    
    
  1. <script>
  2. var a=12;//变量：自由的，不属于任何人
  3. alert(a);
  4. var arr=[1,2,3,4,5,6];
  5. arr.a=12;//属性：属于一个对象的
  6. alert(arr.a);
  7. </script>
    
    
  1. <script>
  2. function aaa()//函数：自由
  3. {
  4. 	alert('abc');
  5. }
  6. var arr=[1,2,3,4];
  7. arr.aaa=function()//方法：属于一个对象
  8. {
  9. 	alert('abc');
  10. };
  11. aaa();
  12. arr.aaa();
  13. </script>

3、写一个面向对象程序

l 为对象添加方法和属性
l this 详解，事件处理中 this 的本质
l window
l this—— 函数属于谁
l 不能在系统对象中随意附加方法、属性，否则会覆盖已有方法、属性
l object 对象 
    
    
  1. <script>
  2. var arr=[1,2,3,4];
  3. arr.a=12;
  4. arr.show=function()
  5. {
  6. 	alert(this.a);
  7. };
  8. oDiv.onclick=function()
  9. {
  10. 	alert(this);
  11. };
  12. arr.show();
  13. </script>
上面的this是属于谁？ 
    
    
  1. <script>
  2. window.show=function()
  3. {
  4. 	alert(this);
  5. };
  6. show();
  7. </script>
会弹出什么？
上面的属性和方法都是加在数组对象上的，我们有个原则： 不能在系统对象中随意附加方法、属性，否则会覆盖已有方法、属性。所以这里，我们利用object来创建新对象： 
     
     
  1. <script>
  2. var obj=newObject();
  3. obj.name='blue';
  4. obj.qq='258248832';
  5. obj.showName=function()
  6. {
  7. 	alert('我的名字叫：'+this.name);
  8. };
  9. obj.showQQ=function()
  10. {
  11. 	alert('我的QQ号：'+this.qq);
  12. };
  13. obj.showName();
  14. obj.showQQ();
  15. </script>
如果有两个对象呢： 
     
     
  1. <script>
  2. var obj=newObject();
  3. obj.name='blue';
  4. obj.qq='258248832';
  5. obj.showName=function()
  6. {
  7. 	alert('我的名字叫：'+this.name);
  8. };
  9. obj.showQQ=function()
  10. {
  11. 	alert('我的QQ号：'+this.qq);
  12. };
  13. obj.showName();
  14. obj.showQQ();
  15. var obj2=newObject();
  16. obj2.name='张三';
  17. obj2.qq='5468978546';
  18. obj2.showName=function()
  19. {
  20. 	alert('我的名字叫：'+this.name);
  21. };
  22. obj2.showQQ=function()
  23. {
  24. 	alert('我的QQ号：'+this.qq);
  25. };
  26. obj2.showName();
  27. obj2.showQQ();
  28. </script>
上面的写法虽然没有问题，但是代码冗余，改进一下：构建函数（该函数的功能是构建对象） 
    
    
  1. <script>
  2. function createPerson(name, qq)//构造函数
  3. {
  4. var obj=newObject();
  5. 	obj.name=name;
  6. 	obj.qq=qq;
  7. 	obj.showName=function()
  8. {
  9. 		alert('我的名字叫：'+this.name);
  10. };
  11. 	obj.showQQ=function()
  12. {
  13. 		alert('我的QQ号：'+this.qq);
  14. };
  15. return obj;
  16. }
  17. var obj=createPerson('blue','258248832');
  18. obj.showName();
  19. obj.showQQ();
  20. var obj2=createPerson('张三','45648979879');
  21. obj2.showName();
  22. obj2.showQQ();
  23. </script>

4、工厂方式

l 什么是工厂
l 原料
l 加工
l 出厂
l 工厂方式
l 用构造函数创建一个类
l 什么是类、对象（实例）：模具和零件 
   
   
  1. <script>
  2. function createPerson(name, qq)//构造函数
  3. {
  4. //原料
  5. var obj=newObject();
  6. //加工
  7. 	obj.name=name;
  8. 	obj.qq=qq;
  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. var obj=createPerson('blue','258248832');
  21. obj.showName();
  22. obj.showQQ();
  23. var obj2=createPerson('张三','45648979879');
  24. obj2.showName();
  25. obj2.showQQ();
  26. </script>

5、工厂方式遇到的问题

l 问题
l 没有 new
l 函数重复定义
l 加上 new
l 偷偷做了两件事
l 替你创建了一个空白对象
l 替你返回了这个对象
l new 和 this
上面的这个对象有什么缺点？1.var date=new Date(); 这里没有用new。第二个：函数的重复（系统资源浪费，因为每个对象都有一个方法）
下面先解决第一个问题，加上new： 
   
   
  1. <script>
  2. function createPerson(name, qq)//构造函数
  3. {
  4. //系统偷偷替咱们做：
  5. //var this=new Object();
  6. //加工
  7. this.name=name;
  8. this.qq=qq;
  9. this.showName=function()
  10. {
  11. 		alert('我的名字叫：'+this.name);
  12. };
  13. this.showQQ=function()
  14. {
  15. 		alert('我的QQ号：'+this.qq);
  16. };
  17. //也会偷偷做一些：
  18. //return this;
  19. }
  20. var obj=new createPerson('blue','258248832');
  21. var obj2=new createPerson('张三','45648979879');
  22. obj.showName();
  23. obj.showQQ();
  24. //alert(obj.showName==obj2.showName);
  25. </script>

6、原型——prototype

l 什么是原型
l 原型是 class ，修改他可以影响一类元素
l 在已有对象中加入自己的属性、方法
l 原型修改对已有对象的影响
l 为 Array 添加 sum 方法
l 给对象添加方法，类似于行间样式
l 给原型添加方法，类似于 class
l 原型的小缺陷
l 无法限制覆盖
解决第二个问题：原型 
    
    
  1. <script>
  2. var arr1=newArray(12,55,34,78,676);
  3. var arr2=newArray(12,33,1);
  4. Array.prototype.sum=function()//class
  5. //arr1.sum=function ()				//行间样式
  6. {
  7. var result=0;
  8. for(var i=0;i<this.length;i++)
  9. {
  10. 		result+=this[i];
  11. }
  12. return result;
  13. };
  14. alert(arr1.sum());
  15. alert(arr2.sum());//?
  16. </script>
什么是类和对象？
var arr=new Date();
arr叫做对象，Date叫做类。


构造函数和原型一起做： 
    
    
  1. <script>
  2. function createPerson(name, qq)//构造函数
  3. {
  4. //系统偷偷替咱们做：
  5. //var this=new Object();
  6. //加工
  7. this.name=name;
  8. this.qq=qq;
  9. //也会偷偷做一些：
  10. //return this;
  11. }
  12. createPerson.prototype.showName=function()//原型
  13. {
  14. 	alert('我的名字叫：'+this.name);
  15. };
  16. createPerson.prototype.showQQ=function()
  17. {
  18. 	alert('我的QQ号：'+this.qq);
  19. };
  20. var obj=new createPerson('blue','258248832');
  21. var obj2=new createPerson('张三','45648979879');
  22. /*obj.showName();
  23. obj.showQQ();
  24. obj2.showName();
  25. obj2.showQQ();*/
  26. alert(obj.showName==obj2.showName);
  27. </script>
规范写法： 
   
   
  1. <script>
  2. functionCreatePerson(name, qq)//构造函数
  3. {
  4. this.name=name;
  5. this.qq=qq;
  6. }
  7. CreatePerson.prototype.showName=function()//原型
  8. {
  9. 	alert('我的名字叫：'+this.name);
  10. };
  11. CreatePerson.prototype.showQQ=function()
  12. {
  13. 	alert('我的QQ号：'+this.qq);
  14. };
  15. var obj=newCreatePerson('blue','258248832');
  16. var obj2=newCreatePerson('张三','45648979879');
  17. /*obj.showName();
  18. obj.showQQ();
  19. obj2.showName();
  20. obj2.showQQ();*/
  21. alert(obj.showName==obj2.showName);
  22. </script>

l 用混合方式构造对象
l 混合的的构造函数 / 原型方式
l Mixed Constructor Function/Prototype Method
l 原则
l 构造函数：加属性
l 原型：加方法
l 对象命名规范
l 类名首字母大写

二、面向对象的选项卡


先用之前面向过程的方法写一次选项卡： 
   
   

    
    

     
     <!DOCTYPE HTML>
    
    

    
    

     
     <html>
    
    

    
    

     
     <head>
    
    

    
    

     
     <metacharset="utf-8">
    
    

    
    

     
     <title>无标题文档</title>
    
    

    
    

     
     <style>
    
    

    
    

     
     #div1 input {background:white;}
    
    

    
    

     
     #div1 input.active {background:yellow;}
    
    

    
    

     
     #div1 div {width:200px; height:200px; background:#CCC; display:none;}
    
    

    
    

     
     </style>
    
    

    
    

     
     <script>
    
    

    
    

     
     window.onload=function()
    
    

    
    

     
     {
    
    

    
    

     
     var oDiv=document.getElementById('div1');
    
    

    
    

     
     var aBtn=oDiv.getElementsByTagName('input');
    
    

    
    

     
     var aDiv=oDiv.getElementsByTagName('div');
    
    

    
    

     
     for(var i=0;i<aBtn.length;i++)
    
    

    
    

     
     {
    
    

    
    

     
     		aBtn[i].index=i;
    
    

    
    

     
     		aBtn[i].onclick=function()
    
    

    
    

     
     {
    
    

    
    

     
     for(var i=0;i<aBtn.length;i++)
    
    

    
    

     
     {
    
    

    
    

     
     				aBtn[i].className=''
    
    

    
    

     
     				aDiv[i].style.display='none';
    
    

    
    

     
     }
    
    

    
    

     
     this.className='active';
    
    

    
    

     
     			aDiv[this.index].style.display='block';
    
    

    
    

     
     };
    
    

    
    

     
     }
    
    

    
    

     
     };
    
    

    
    

     
     </script>
    
    

    
    

     
     </head>
    
    

    
    

     
      
    
    

    
    

     
     <body>
    
    

    
    

     
     <divid="div1">
    
    

    
    

     
     <inputclass="active"type="button"value="aaa"/>
    
    

    
    

     
     <inputtype="button"value="bbb"/>
    
    

    
    

     
     <inputtype="button"value="ccc"/>
    
    

    
    

     
     <divstyle="display:block;">aaa</div>
    
    

    
    

     
     <div>dfsadf</div>
    
    

    
    

     
     <div>erwqerwe</div>
    
    

    
    

     
     </div>
    
    

    
    

     
     </body>
    
    

    
    

     
     </html>

1、把嵌套函数抽出来。

  • 函数不能嵌套
  • 变量变成全局变量
   
   

    
    

     
     <script>
    
    

    
    

     
     var aBtn=null;
    
    

    
    

     
     var aDiv=null;
    
    

    
    

     
      
    
    

    
    

     
     window.onload=function()
    
    

    
    

     
     {
    
    

    
    

     
     var oDiv=document.getElementById('div1');
    
    

    
    

     
     	aBtn=oDiv.getElementsByTagName('input');
    
    

    
    

     
     	aDiv=oDiv.getElementsByTagName('div');
    
    

    
    

     
     for(var i=0;i<aBtn.length;i++)
    
    

    
    

     
     {
    
    

    
    

     
     		aBtn[i].index=i;
    
    

    
    

     
     		aBtn[i].onclick=fnClick;
    
    

    
    

     
     }
    
    

    
    

     
     };
    
    

    
    

     
      
    
    

    
    

     
     function fnClick()
    
    

    
    

     
     {
    
    

    
    

     
     for(var i=0;i<aBtn.length;i++)
    
    

    
    

     
     {
    
    

    
    

     
     		aBtn[i].className=''
    
    

    
    

     
     		aDiv[i].style.display='none';
    
    

    
    

     
     }
    
    

    
    

     
     this.className='active';
    
    

    
    

     
     	aDiv[this.index].style.display='block';
    
    

    
    

     
     }
    
    

    
    

     
     </script>

2、去掉onload,写上ｔｈｉｓ

    
    

     
     

      
      <script>
     
     

     
     

      
      //var aBtn=null;
     
     

     
     

      
      //var aDiv=null;
     
     

     
     

      
       
     
     

     
     

      
      functionTabSwitch(id)
     
     

     
     

      
      {
     
     

     
     

      
      var oDiv=document.getElementById(id);
     
     

     
     

      
      this.aBtn=oDiv.getElementsByTagName('input');
     
     

     
     

      
      this.aDiv=oDiv.getElementsByTagName('div');
     
     

     
     

      
      for(var i=0;i<aBtn.length;i++)
     
     

     
     

      
      {
     
     

     
     

      
      this.aBtn[i].index=i;
     
     

     
     

      
      this.aBtn[i].onclick=fnClick;
     
     

     
     

      
      }
     
     

     
     

      
      };
     
     

     
     

      
       
     
     

     
     

      
      TabSwitch.prototype.fnClick=function()
     
     

     
     

      
      {
     
     

     
     

      
      for(var i=0;i<this.aBtn.length;i++)
     
     

     
     

      
      {
     
     

     
     

      
      this.aBtn[i].className=''
     
     

     
     

      
      this.aDiv[i].style.display='none';
     
     

     
     

      
      }
     
     

     
     

      
      this.className='active';
     
     

     
     

      
      this.aDiv[this.index].style.display='block';
     
     

     
     

      
      }
     
     

     
     

      
      </script>
3、修复bug 
    
    

     
     

      
      <script>
     
     

     
     

      
      window.onload=function()
     
     

     
     

      
      {
     
     

     
     

      
      newTabSwitch('div1');
     
     

     
     

      
      };
     
     

     
     

      
       
     
     

     
     

      
      functionTabSwitch(id)
     
     

     
     

      
      {
     
     

     
     

      
      var oDiv=document.getElementById(id);
     
     

     
     

      
      this.aBtn=oDiv.getElementsByTagName('input');
     
     

     
     

      
      this.aDiv=oDiv.getElementsByTagName('div');
     
     

     
     

      
      for(var i=0;i<this.aBtn.length;i++)
     
     

     
     

      
      {
     
     

     
     

      
      this.aBtn[i].index=i;
     
     

     
     

      
      this.aBtn[i].onclick=this.fnClick;
     
     

     
     

      
      }
     
     

     
     

      
      };
     
     

     
     

      
       
     
     

     
     

      
      TabSwitch.prototype.fnClick=function()
     
     

     
     

      
      {
     
     

     
     

      
      for(var i=0;i<this.aBtn.length;i++)
     
     

     
     

      
      {
     
     

     
     

      
      this.aBtn[i].className=''
     
     

     
     

      
      this.aDiv[i].style.display='none';
     
     

     
     

      
      }
     
     

     
     

      
      	oBtn.className='active';
     
     

     
     

      
      this.aDiv[oBtn.index].style.display='block';
     
     

     
     

      
      }
     
     

     
     

      
      </script>
     
     

    
    

    
    

     
     

      
      <script>
     
     

     
     

      
      window.onload=function()
     
     

     
     

      
      {
     
     

     
     

      
      newTabSwitch('div1');
     
     

     
     

      
      };
     
     

     
     

      
       
     
     

     
     

      
      functionTabSwitch(id)
     
     

     
     

      
      {
     
     

     
     

      
      var _this=this;
     
     

     
     

      
      var oDiv=document.getElementById(id);
     
     

     
     

      
      this.aBtn=oDiv.getElementsByTagName('input');
     
     

     
     

      
      this.aDiv=oDiv.getElementsByTagName('div');
     
     

     
     

      
      for(var i=0;i<this.aBtn.length;i++)
     
     

     
     

      
      {
     
     

     
     

      
      this.aBtn[i].index=i;
     
     

     
     

      
      this.aBtn[i].onclick=function()
     
     

     
     

      
      {
     
     

     
     

      
      			_this.fnClick();
     
     

     
     

      
      };
     
     

     
     

      
      }
     
     

     
     

      
      };
     
     

     
     

      
       
     
     

     
     

      
      TabSwitch.prototype.fnClick=function()
     
     

     
     

      
      {
     
     

     
     

      
      //alert(this);
     
     

     
     

      
      for(var i=0;i<this.aBtn.length;i++)
     
     

     
     

      
      {
     
     

     
     

      
      this.aBtn[i].className=''
     
     

     
     

      
      this.aDiv[i].style.display='none';
     
     

     
     

      
      }
     
     

     
     

      
      	oBtn.className='active';
     
     

     
     

      
      this.aDiv[oBtn.index].style.display='block';
     
     

     
     

      
      }
     
     

     
     

      
      </script>

修复完： 
    
    

     
     

      
      <script>
     
     

     
     

      
      window.onload=function()
     
     

     
     

      
      {
     
     

     
     

      
      newTabSwitch('div1');
     
     

     
     

      
      };
     
     

     
     

      
       
     
     

     
     

      
      functionTabSwitch(id)
     
     

     
     

      
      {
     
     

     
     

      
      var _this=this;
     
     

     
     

      
      var oDiv=document.getElementById(id);
     
     

     
     

      
      this.aBtn=oDiv.getElementsByTagName('input');
     
     

     
     

      
      this.aDiv=oDiv.getElementsByTagName('div');
     
     

     
     

      
      for(var i=0;i<this.aBtn.length;i++)
     
     

     
     

      
      {
     
     

     
     

      
      this.aBtn[i].index=i;
     
     

     
     

      
      this.aBtn[i].onclick=function()
     
     

     
     

      
      {
     
     

     
     

      
      			_this.fnClick(this);
     
     

     
     

      
      };
     
     

     
     

      
      }
     
     

     
     

      
      };
     
     

     
     

      
       
     
     

     
     

      
      TabSwitch.prototype.fnClick=function(oBtn)
     
     

     
     

      
      {
     
     

     
     

      
      //alert(this);
     
     

     
     

      
      for(var i=0;i<this.aBtn.length;i++)
     
     

     
     

      
      {
     
     

     
     

      
      this.aBtn[i].className=''
     
     

     
     

      
      this.aDiv[i].style.display='none';
     
     

     
     

      
      }
     
     

     
     

      
      	oBtn.className='active';
     
     

     
     

      
      this.aDiv[oBtn.index].style.display='block';
     
     

     
     

      
      }
     
     

     
     

      
      </script>



小小樟鱼
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值