面向对象

面相对象的特点：

抽象，封装，继承，多态

抽象：抓住核心问题
封装：只能通过对象来访问方法
继承：从已有对象上继承出新对象
多态：多对象的不同状态

//////////////////////////////////////////////

对象组成：属性和方法

var arr=[];

arr.number=10;//对象的变量叫做对象的属性

arr.test=function(){

　　alert("123");//对象的函数叫做对象的方法

}

给个

1 var obj=new Object();//创建一个空的对象
2 obj.name="羊羊羊"; //对象属性
3 obj.showName=function(){
4     alert(this.name); //对象方法
5 }
6 obj.showName();//方法调用   //弹出羊羊羊

创建多个相同的。这里就可以采用工厂方式（封装函数）

 1 function createPerson(name){
 2     //原料
 3     var obj=new Object();
 4     //加工
 5     obj.name=name;
 6     obj.showName=function(){
 7         alert(this.name);
 8     }
 9     //出场
10     return obj;
11 }
12 
13 var p1=createPerson("羊羊羊");
14 p1.showName();
15 var p2=createPerson("美羊羊");
16 p2.showName();

采用构造函数

当new 去调用一个函数，这个函数中的this就是创建出来的对象，而且函数的返回值直接就是this(隐式返回)

 1 //new后面调用的函数 : 叫做构造函数
 2 function CreatePerson(name){
 3     this.name=name;
 4     this.showName=function(){
 5         alert(this.name);
 6     }
 7 }
 8 
 9 var p1=new CreatePerson('羊羊羊');
10 p1.showName();
11 var p2=new CreatePerson('美羊羊');
12 p2.showName();
13 alert(p1.showName==p1.showName);//false   对象类型要满足值和引用都相同

1 var a=[1,2,3];
2 var b=[1,2,3];
3 alert(a==b);//false
4 
5 var a = [1,2,3];
6 var b = a；
7 alert( a==b );  //true

怎么让alert(p1.showName==p1.showName);变成真，那么我们就要用到原形了

原型：去改写对象下面公用的方法或者属性，让公用的方法或者属性在内存中只存在一份，可以提高性能

原型要写在构造函数之后

1 var arr=[1,2,3,4,5];
2 var arr2=[2,2,2,2,2];
3 Array.prototype.sum=function(){
4     var result=0;
5     for(var i=0;i<this.length;i++){
6         result+=this[i];
7     }
8     return result;
9 }

function 构造函数(){
this.属性
}

构造函数.原型.方法 = function(){};

var 对象1 = new 构造函数();
对象1.方法();

小试牛刀

//先变型:
//尽量不要出现函数嵌套函数
//可以有全局变量
//把onload中不是赋值的语句放到单独函数中

 1 第一变
 2 var oParent=null;
 3 var aInput=null;
 4 var aDiv=null;
 5 window.onload=function(){
 6     oParent=document.getElementById('div1');
 7     aInput=oParent.getElementsByTagName('input');
 8     aDiv=oParent.getElementsByTagName('div');
 9     //把onload中不是赋值的语句单独放置
10     init();
11 }
12 function init(){
13     for(var i=0;i<aInput.length;i++){
14         aInput[i].index = i;
15         aInput[i].onclick = change
16     }
17 }
18 function change(){
19     for(var i=0;i<aInput.length;i++){
20         aInput[i].className = '';
21         aDiv[i].style.display = 'none';
22     }
23     this.className = 'active';
24     aDiv[this.index].style.display = 'block';
25 };

 改成面相对象

//全局变量就是属性   函数就是方法  onLoad中创建对象

//改this指向问题，事件或者是定时器，尽量让面向对象中的this指向对象

 1 //改成面向对象:
 2 //全局变量就是属性
 3 //函数就是方法
 4 //Onload中创建对象
 5 
 6 //改this指向问题 : 事件或者是定时器,尽量让面向对象中的this指向对象
 7 window.onload=function(){
 8     var t1=new Tab('div1');//创建对象
 9     t1.init();
　　　　//防止多个,传一个id

      var t2=new Tab('div2');//创建对象
 9     t2.init();

10 }
11 
12 function Tab(id){
13     this.oParent=document.getElementById(id);
14     this.aInput=this.oParent.getElementsByTagName('input');
15     this.aDiv=this.oParent.getElementsByTagName('div');
16 }
17 Tab.prototype.init=function(){
18     var This=this;
19     for(var i=0;i<this.aInput.length;i++){
20         this.aInput[i].index = i;
21         this.aInput[i].onclick = function(){
22             This.change(this)
23         }
24     }
25 }
26 Tab.prototype.change=function(obj){
27     for(var i=0;i<this.aInput.length;i++){
28         this.aInput[i].className = '';
29         this.aDiv[i].style.display = 'none';
30     }
31     obj.className = 'active';
32     this.aDiv[obj.index].style.display = 'block';
33 }

转载于:https://www.cnblogs.com/zhihou/p/8066183.html