初入面向对象编程

如何理解及使用面向对象编程

对于初学js的同学来说，当打到了面向对象的这一关卡后应该大部分人都会有这么一个疑问：这是个什么玩意儿？
对象本身相当于一个看得见摸得着的东西，可面向对象却是一个看不见摸不着的，需要你凭空想象出来的一个东西，而面向对象编程就更加复杂了。需要将所有的逻辑都想成类与对象的关系。
首先我们需要有一个清晰的概念：什么是类？-> 类应该有什么私有属性和公有属性？ -> 有多少个实例？

先拿一个简单的列子来说：

    alert(100);

如何将以上代码进行面向对象编程，首先我们想象一下有群菇凉(类)，她们每个人有不同的名字(私有属性)，每一个人都有一个方法(公有属性）用来弹她们的名字(私有属性)，而这里有一个菇凉(实例):

    function Girl(name){
        this.name = name;//私有属性
    }
    
    //公有属性
    Girl.prototype.sayname = function(){
        alert(this.name);
    }
    
    var girl = new Girl(100);//构造对象girl
    girl.sayname();//使用公有方法弹name

上面的例子可能稍微的有点抽象，现在来个具象化点的：

    <div id="div">这是div的内容</div>
    
    
    <script>
        var oDiv = document.getElementById('div');
        oDiv.style.background = 'red';
    </script>

上面代码进行面向对象编程，首先也可以想象有一群菇凉（类），她都有一个不同的div(私有属性)和一包颜料(私有属性)，都可以用颜料染色div的技能（公有属性）

    <div id="div">这是div的内容</div>


    <script>
    
        function Gril(id,color){
            this.div = document.getElementById(id);
            this.color = color;
        }
        
        Girl.prototype.draw = function(){
            this.div.style.background = this.color;
        }
        
        var girl = new Girl('div','red');
        girl.draw();
    </script>

当只有一个div依旧不是特别的直观，但当有很多个div是会显得很直观：

    <div id="div1">这是div1的内容</div>
    <div id="div2">这是div2的内容</div>
    <div id="div3">这是div3的内容</div>

    <script>
        function Gril(id,color){
            this.div = document.getElementById(id);
            this.color = color;
        }
        
        Girl.prototype.draw = function(){
            this.div.style.background = this.color;
        }
        
        var girl1 = new Girl('div','red');
        var girl2 = new Girl('div','blue');
        var girl2 = new Girl('div','green');

        girl1.draw();
        girl2.draw();
        girl3.draw();
    </script>

换一个角度想也是可以的：

我们直接从一个对象出发，一个对象应该有一个不同的div，不同的颜色，那么这个类就应该有一个私有属性来获取一个不同的div，一个私有属性来表示颜色，而每一个对象都有一个方法就是将自身div的背景颜色变为自身私有属性的颜色。所以我们应该在类的公有属性上添加一个公有的方法。

面向对象编程最好有这么个思路：

1:什么是类，什么是类的私有属性，什么是公有属性。
2:在程序内,任何的私有属性和公有属性都通过this来使用.
3:必须确保所有的this都指向正确(this指向可参考js中this的绑定与丢失)