如何理解及使用面向对象编程
对于初学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的绑定与丢失)