理解什么是的面向对象设计

  我想大家都知道。现在最流行的设计模式就是面向对象,那么什么是面向对象呢?
  首先我们来看下官方的定义。在维基百科上说:

  面向对象程序设计(英语:Object-oriented programming,缩写:OOP)是种具有对象概念的程序编程范型,同时也是一种程序开发的抽象方针。它可能包含数据、属性、代码与方法。对象则指的是类的实例。它将对象作为程序的基本单元,将程序和数据封装其中,以提高软件的重用性、灵活性和扩展性,对象里的程序可以访问及经常修改对象相关连的数据。在面向对象程序编程里,计算机程序会被设计成彼此相关的对象

  上面是维基百科上对于面向对象的解释。这段话对于刚刚学习编程的人来说可能有点抽象,不太容易懂。至少我在第一次看到这句话时,是一脸懵逼的。下面我来说说我对面向对象的一个理解。

要理解什么是面向对象,我们就先要知道什么是面向过程。

面向过程:就是将要实现一个功能所需要的步骤一步一步的写出来出来,要做到面面俱到、有条不絮。

  例如在JavaScript如果需要在页面当中插入一个DOM元素。按照面向过程的设计方法就是:

1
2
var div = document.createElement(“div”);
document.body.appendChild(div);

如果需要让这元素显示出来这需要:

1
2
3
div.style.width = “100px”;
div.style.height = “100px”;
div.style.backgroundColor = “blue”;

  这样就可以在页面中显示边长为100px蓝色的区块。而如果你还想再要在页面插入一个DOM元素,这就需要将上面类似的代码再写一遍。这就是面向过程的设计方式。

而面向对象:就是找到或创建一个可以实现你想要功能的对象,然后调用这个对象来实现想要的功能。就如下面:

  • 首先我们定义一个对象:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
function createElem(elem) {
//创建DOM对象。
this.DOM = document.createElement(elem);
//设置样式
this.css = function(obj) {
for(var key in obj) {
if (!obj.hasOwnProperty(key)) {
this.DOM.style[key] = obj[key];
}
}
return this;
}
//设置属性
this.setAttributes = function(obj) {
for (var key in obj) {
this.DOM.setAttribute(key, obj[key]);
}
return this;
}
//插入到页面中
this.appendTo = function(node) {
node.appendChild(this.DOM);
return this;
}
return this;
}
  • 在调用这个对象
1
2
3
4
5
6
7
8
9
10
11
12
//要设置的样式
var obj = {
"width" : "100px",
"height" : "100px",
"backgroundColor" : "blue"
}
//调用创建的对象。
createElem("div").
css(obj).
appendTo(document.body).
setAttributes({"id" : "main","class" : "box"});

  这样的话同样在页面上显示出一个边长为100px 的蓝色区块。并且,如果想要再插入一个DOM元素的话。那就再调用上面的对象并传入相应的参数就可以了。所以说:面向对象就是将面向过程的代码进行封装,并将其核心的参数抽象化,使其可以复用,从而减少代码量的一个模式。
  最后要明确一个概念:面向对象不是面向过程的代替,而是面向过程的封装。所以不管你如何的面向对象,最终还是要靠一步一步的过程来实现你想要的功能的。