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

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

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

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

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

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

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

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

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

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

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

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

• 首先我们定义一个对象：

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;
}

• 在调用这个对象

//要设置的样式	
var obj = {
	"width" : "100px",
	"height" : "100px",
	"backgroundColor" : "blue"
}

//调用创建的对象。
createElem("div").
		css(obj).
		appendTo(document.body).
		setAttributes({"id" : "main","class" : "box"});

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

我的个人网址 https://wangyiming.info/