JS面向对象写法

“面向过程”、“面向对象”，这两个概念总是出现我们身边，那么它们到底什么区别呢？下面通过两段简单的代码，帮助大家理解一下

先写个html

//body
<button id="btn" type="button">点击切换</button>
<div id="box"></div>

//css
div{
    width:200px;
    height:200px;
    background-color:red;
}

我们的目标就是点击按钮，切换div样式，下面开始写JS部分

面向过程写法

document.getElementById("btn").onclick=function(){
    document.getElementById("box").style.backgroundColor="blue";
}

这个大家都好理解，”点击btn，box的background-color变蓝色”，直接翻译，这就是面向过程。

面向对象写法

function Change(btnId,boxId,color){
    this.btn=document.getElementById(btnId);
    this.box=document.getElementById(boxId);
    this.color=color;              //-->per(上面三个this)
};

Change.prototype.init=function(){     //添加函数（即方法）
    var that=this;             //-->per（）
    this.btn.onclick=function(){
        //this;                //-->per.btn   （this不再指向per,而是this.btn）
        that.box.style.backgroundColor=that.color;
    };   
};
var per=new Change("btn","box","blue");
per.init();

这里的难点包括用函数创建对象，以及函数中this的指向.

这就是这两种思维方式的差别体现，从上面可以发现，似乎面向过程写法还简短易懂些，为什么还要求用面向对象的写法呢？

用过框架、插件的朋友看见这个就会有那么一点模糊的感觉了。

上代码：

            function my$(id) {
                return document.getElementById(id);
            }
            function Change(btnId,boxId,json){
                this.btn=btnId;
                this.box=boxId;
                this.json=json;
            };
            Change.prototype.init=function(){
                that=this;
                this.btn.onclick=function(){
                    for(var x in that.json){
                        that.box.style[x] = that.json[x];
                    } 
                };
            };
            var json={"width":"400px","height":"400px","background-color":"blue"};   //使用JSON
            var per=new Change(my$("btn"),my$("box"),json);
            per.init();

当你掌握一定的技巧后，在做大项目时，用面向对象方式的优点就出来了，对于一些同样的处理，可以直接调用函数，不用重复写代码，而且灵活度高。