面向对象

面相对象的特点：

抽象，封装，继承，多态

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

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

对象组成：属性和方法

var arr=[];

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

arr.test=function(){

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

}

给个

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

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

function createPerson(name){
    //原料
    var obj=new Object();
    //加工
    obj.name=name;
    obj.showName=function(){
        alert(this.name);
    }
    //出场
    return obj;
}

var p1=createPerson("羊羊羊");
p1.showName();
var p2=createPerson("美羊羊");
p2.showName();

采用构造函数

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

//new后面调用的函数 : 叫做构造函数
function CreatePerson(name){
    this.name=name;
    this.showName=function(){
        alert(this.name);
    }
}

var p1=new CreatePerson('羊羊羊');
p1.showName();
var p2=new CreatePerson('美羊羊');
p2.showName();
alert(p1.showName==p1.showName);//false   对象类型要满足值和引用都相同

var a=[1,2,3];
var b=[1,2,3];
alert(a==b);//false

var a = [1,2,3];
var b = a；
alert( a==b );  //true

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

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

原型要写在构造函数之后

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

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

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

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

小试牛刀

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

第一变
var oParent=null;
var aInput=null;
var aDiv=null;
window.onload=function(){
    oParent=document.getElementById('div1');
    aInput=oParent.getElementsByTagName('input');
    aDiv=oParent.getElementsByTagName('div');
    //把onload中不是赋值的语句单独放置
    init();
}
function init(){
    for(var i=0;i<aInput.length;i++){
        aInput[i].index = i;
        aInput[i].onclick = change
    }
}
function change(){
    for(var i=0;i<aInput.length;i++){
        aInput[i].className = '';
        aDiv[i].style.display = 'none';
    }
    this.className = 'active';
    aDiv[this.index].style.display = 'block';
};

 改成面相对象

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

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

//改成面向对象:
//全局变量就是属性
//函数就是方法
//Onload中创建对象

//改this指向问题 : 事件或者是定时器,尽量让面向对象中的this指向对象
window.onload=function(){
    var t1=new Tab('div1');//创建对象
    t1.init();
　　　　//防止多个,传一个id

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

}

function Tab(id){
    this.oParent=document.getElementById(id);
    this.aInput=this.oParent.getElementsByTagName('input');
    this.aDiv=this.oParent.getElementsByTagName('div');
}
Tab.prototype.init=function(){
    var This=this;
    for(var i=0;i<this.aInput.length;i++){
        this.aInput[i].index = i;
        this.aInput[i].onclick = function(){
            This.change(this)
        }
    }
}
Tab.prototype.change=function(obj){
    for(var i=0;i<this.aInput.length;i++){
        this.aInput[i].className = '';
        this.aDiv[i].style.display = 'none';
    }
    obj.className = 'active';
    this.aDiv[obj.index].style.display = 'block';
}