24.OOP面向对象；

面向对象：是一种思想；

对象：生活中的像汽车，电视，收音机等都是对象，我们只关注使用功能，不关注他们的内部怎么实现的；

对象特征：抽象，封装，继承；

抽象：把问题的关键提取出来；

封装：只关注使用功能，不关注内部实现；

继承：从一个已有的对象继承它的属性和方法；

继承：多重继承（一个子类可以有两个父类），多态

对象：包括属性，方法，

属性在不属于一个对象前称为变量；

方法在不属于一个对象前称为函数；

类：模子，

对象：带有使用功能的；

工厂方式：原料：创建对象;加工：添加属性，方法;出厂：return返回对象；

原型用到对象中：构造函数.prototype.fn;，让每个创建的对象共用一个函数；

fn CreatPerson(name,age){//构造函数；构造函数名首字母大写；

　　this.nam=name;//this代表属性所属的那个对象；

　　this.age=age;

}

CreatPerson.prototype.showName=function(){//在原型上绑定函数；

　　alert('my name is '+this.name);

}

CreatPerson.prototype.showAge=function(){

　　alert("i'm "+this.age+' years old.');

}

var obj1=new CreatPerson('duoduo','23');

obj1.showName();

obj1.showAge();

 实例：选项卡切换;

将面向过程选项卡改写成面向对象；

函数不能有嵌套       可以有全局对象；

然后改写：

1.全局对象 -->属性；

2、函数-->方法；

3.添加this;this代表新创建的对象。但像oBtn[i].onclick=this.tabClick;时,this就被赋给了oBtn.要讲tabClick包含在function(){}里面，并加上_this(代表新创建对象的this)；this.className='';this代表oBtn被点击的按钮，在方法里面可以通过穿参的方式：tabClick(oBtn),oBtn.className来解决；

 

<script>
window.onload=function ()
{
    new TabSwitch('div1');
};

function TabSwitch(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>