智能社JS学习笔记（七）

面向对象基础

——定义：在不了解原理的情况下，会使用功能

——对象：不了解内部的结构，知道表面的各种操作（按钮），如date，array

【面向对象是一种通用思想】

——面向对象编程（OOP）特点

抽象：把最主要的特征，跟问题相关的特征抽出来（抓住核心问题）；

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

继承：从父类上继承出一些方法，属性；子类又有一些自己的特性（在最大限度上重用已有的代码）。

【多重继承】：有多个父级，但容易导致程序混乱；【多态】：对JS用途不大，适用于强语言。

——对象的组成

属性：原来叫做变量，属于对象

方法：原来叫做函数，属于对象

——this：当前的方法属于谁

全局的方法属于window，故this为window

——为对象添加方法和属性

不能在系统对象中（如数组）随意附加方法，属性，否则会覆盖已有方法、属性

——使用Object对象

可随意附加方法，属性。

构造函数与普通函数没有区别，只是功能不同故称为构造函数。

——工厂方式

什么是工厂方式：包括原料，加工，出厂；用构造函数创建一个类；

问题：1. 没有new；2.函数重复——资源浪费

解决问题1：当调用函数时前面加上 new，系统会偷偷创建一个空白对象，并返回出去；

解决问题2：运用原型（prototype），给类添加方法

原型（prototype）：相当于css中的class，一次给多个元素加东西

类（模子）：本身不具备功能，用来生产产品；如var arr = new Array() 中的Array

对象（产品/成品）：由类产生的，如上面的 arr

       function CreatePersoon(name,qq){     //构造函数//系统偷偷替咱们做：//var this = new Object();//加工this.name = name;this.qq = qq;//也会偷偷做一些//return this;}CreatePersoon.prototype.showName = function (){     //原型console.log('我的名字叫：' + this.name);}CreatePersoon.prototype.showQQ = function(){console.log('我的QQ号：' + this.qq)}     var obj = new CreatePersoon('blue','5454548');var obj2 = new CreatePersoon('htrth','5887778');obj.showName();obj.showQQ();obj2.showName();obj2.showQQ();        console.log(obj.showName == obj2.showName);

——流行的面向对象编写模式

用混合方式构造对象；

原则：用构造函数加属性；用原型加方法；

对象命名规范：类名的首字母大写

面向对象实例

——将一个普通选项卡改为面向对象

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
<style type="text/css">#div1 input {background: white;}#div1 input.active {background: yellow;}#div1 div {width: 200px;height: 200px;background: #ccc;display: none;}
</style>
<script type="text/javascript">window.onload = function (){var oDiv = document.getElementById('div1');var aBtn = document.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><div id="div1"><input class="active" type="button" value="aaa" /><input type="button" value="bbb" /><input type="button" value="ccc" /><div>aaa</div><div>dscsdvcs</div><div>vfdvda</div></div>
</body>
</html>

原则：不能有嵌套函数，但可以有全局变量（尽量不用）

过程

1. 让函数没有嵌套；

2. 将window.onolad 改为构造函数；

3. 将变量改为属性，函数改为方法

改错

1. 将函数变为方法时前面需加this；

2. 原型中的this指向发生了改变，变成input而不是TabSwitch；将this重新定义，通过闭包传递this

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>#div1 input{background-color: #ffffff;}#div1 .active{background-color: yellow;}#div1 div{width: 200px;height: 200px;background-color: #ccc;display: none;}</style><script>window.onload = function(){new TabSwitch('div1')}function TabSwitch(id){       //将onload改为构造函数，用于初始化对象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){       //将嵌套的函数提出//用原型将函数变为方法// console.log(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>
</head>
<body><div id="div1"><input type="button" value="111" class="active"><input type="button" value="222"><input type="button" value="333"><div style="display: block;">164684</div><div>5464</div><div>dwqd</div>     </div>
</body>
</html>

面向对象高级

——JSON方式的面向对象

    var json={  name: 'frank',  qq: '123456',  showName:function()  {  alert('我的名字：'+this.name);  },  showQQ:function()  {  alert('我的qq：'+this.qq);  }  };  json.showName();  json.showQQ();

优缺点：简单，但不适合多个对象，适合整个程序里只有一个（如AJAX），写起来简单

命名空间：可以让多个相同名字的函数同时存在，把同一类的方法包在一起

var zns={};  zns.one={};
zns.two={};
zns.three={};  zns.one.getUser=function()
{  alert('aaa');
};
zns.two.getUser=function()
{  alert('bbb');
};
zns.three.getUser=function()
{  alert('ccc');
};  zns.one.getUser()
zns.two.getUser()
zns.three.getUser()

——对象的继承

对象由属性和方法组成，继承的也是属性和方法

继承属性：call(this,参数)；可以改变函数执行时的this

继承方法：引用，直接运用var arr1 = arr2; 的形式会导致改变其中一个另外一个也会改变；故需要建立新的数组arr2，在arr1中做for循环，将arr1中的所有元素push到arr2中；

    function A()  {  this.abc=12;  }  A.prototype.show=function ()  {  alert(this.abc);  };  //继承属性  function B()  {  //this->new B()  A.call(this)  };  B.prototype.fn=function ()  {  alert('aaa');  };  //继承方法 要用循环，不然B会影响A  //B.prototype=A.prototype; //前面是把两个原型指向一个方法，修改任意一个另一个都会受到影响  for (var i in A.prototype)  {  B.prototype[i]=A.prototype[i];  }  var objB=new B();  var objA=new A();  //检验属性  alert(objB.abc);  //检验方法  objB.show();  objB.fn();  //正常不弹出，A中没有这个方法  objA.fn();

——面向对象拖拽的继承

window.onload = function(){var oDiv = document.getElementById('div1')oDiv.οnmοusedοwn=function (ev)  {  var oEvent=ev||event;  var disX=oEvent.clientX-oDiv.offsetLeft;  var disY=oEvent.clientY-oDiv.offsetTop;  document.οnmοusemοve=function (ev)  {  var oEvent=ev||event;  oDiv.style.left=oEvent.clientX-disX+'px';  oDiv.style.top=oEvent.clientY-disY+'px';  }  document.οnmοuseup=function ()  {  document.οnmοusemοve=null;  document.οnmοuseup=null;  };  };  }

改为面向对象的过程

1. 去掉函数嵌套，将部分私有变量变为全局变量；

2. 将window.onolad 改为构造函数；

3. 将变量改为属性，函数改为方法

   window.οnlοad=function ()  {  new Drag('div1');  };  function Drag(id)  {  var _this=this;  this.disX = 0;  this.disY = 0;  this.oDiv=document.getElementById(id);  this.oDiv.οnmοusedοwn=function (ev)  {  _this.fnDown(ev);  return false;  };  };  Drag.prototype.fnDown=function (ev)  {  var oEvent=ev||event;  var _this=this;  this.disX=oEvent.clientX-this.oDiv.offsetLeft;  this.disY=oEvent.clientY-this.oDiv.offsetTop;  document.οnmοusemοve=function (ev)  {  _this.fnMove(ev);  };  document.οnmοuseup=function ()  {  _this.fnUp();  };  };  Drag.prototype.fnMove=function (ev)  {  var oEvent=ev||event;  this.oDiv.style.left=oEvent.clientX-this.disX+'px';  this.oDiv.style.top=oEvent.clientY-this.disY+'px';  };  Drag.prototype.fnUp=function ()  {  document.οnmοusemοve=null;  document.οnmοuseup=null;  };

面向对象改为继承的过程

1. 将需要继承的父类引用到外部

2. 继承父类中的方法属性

3. 写子类与父类不同的地方

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>#div1 {background-color: #ccc; width: 200px; height: 200px;position: absolute;}#div2 {background-color: yellow; width: 200px; height: 200px;position: absolute;}</style><script src="Drag.js"></script><script>window.οnlοad=function ()  {  new Drag('div1');  new LimitDrag('div2');};  function LimitDrag(id)     {  Drag.call(this, id); //继承属性 this和id之间用逗号隔开  };  for(var i in Drag.prototype)  {  LimitDrag.prototype[i]=Drag.prototype[i];   //继承原型  }; LimitDrag.prototype.fnMove=function (ev)        //限制范围  {  var oEvent=ev||event;  var l=oEvent.clientX-this.disX;  var t=oEvent.clientY-this.disY;  if(l<0)  {  l=0;  }  else if(l>document.documentElement.clientWidth-this.oDiv.offsetWidth)  {  l=document.documentElement.clientWidth-this.oDiv.offsetWidth;  };  if(t<0)  {  t=0;  }  else if(t>document.documentElement.clientHeight-this.oDiv.offsetHeight)  {  t=document.documentElement.clientHeight-this.oDiv.offsetHeight;  }  this.oDiv.style.left=l+'px';  this.oDiv.style.top=t+'px';  }; </script></head>
<body><div id="div1">普通拖拽</div><div id='div2'>限制范围</div>
</body>
</html>

——系统对象

宿主对象（由浏览器提供的对象）：DOM，BOM（在node中还有其他宿主对象）

本地对象和内置对象是JS本身具备的，与运行环境无关

本地对象（非静态对象）：需要经过new (实例化)才能用，常用的有Object Function Array String Boolean Number Date RegExp Error等

内置对象（静态对象）：不需要经过new，包括Math Global