关于javascript面向对象编程

今天怀着忐忑的心情写下这篇文章，由于这毕竟是我第一篇真正意义上的技术文章，巩固知识的同时，但愿能够给阅读的人带来收获，就很知足了。因此让咱们赶忙切入正题，一块儿来看看关于Java脚本的面向对象编程。

若是你没什么问题的看到这里，我会有一丝淡淡的忧伤，由于JavaScript就是JavaScript，和Java没半毛钱的关系，若是有的话，那也就有0.1分钱的关系，是的，就0.1分钱！想起几个月前我偶然看到 Johnhax 的 ppt ，看完以后，我发现我周围的世界和之前不那么同样了，没错，ppt改变人生的故事发生在了个人身上，今后我对JavaScript爱的更加深沉，哈哈哈......

华丽丽的分割线

---

若是你还不熟悉原型链和参数this的绑定机制，建议你花一些时间了解一下它们。

如今让咱们走进｀JavaScript｀面向对象编程的世界，那么什么是面向对象编程呢？

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

wiki描述好抽象，不想看了，那究竟什么是面向对象呢？下面让咱们来看一个例子，quoniammm同窗很爱玩游戏，有一天他想设计一款简单的游戏打发时间，叫究极进化白金版的会飞的小鸟(改良版的flappy bird),游戏中多了不少不一样属性的管道来阻止小鸟的前进。有红色的、蓝色的、紫色的、会喷火的、会喷水的、能够上下移动的、快速的、慢速的......各类各样的水管，因而quoniammm同窗为每一个水管写了一个函数，还不错，游戏能够正常运行。玩了几回后，quoniammm同窗把游戏放在了一边。几周后，quoniammm同窗又把这个游戏拿出来玩，发现那个快速移动的蓝色的会喷火的管子好难飞过去，手残的他不想再受虐了，决定修改一下这个fastmoveblueFirePump函数，但是打开代码，他一脸懵逼，有如此多类似的函数，一大堆代码，好晕，做为一个有原则的人，他也不想被代码虐了，所以他决定重构这段代码了，刚好最近学习了面向对象，这是命运的决定让quoniammm同窗用面向对象的思想来重构这段代码。

因而他写了一个 Pump 函数，这个函数有一个 methods 属性：

var Pump = function(color) {
    var obj = Object.create(Pump.methods);
    obj.color = color || 'green'；
    return obj;
}

Pump.methods = {
    //用来实现点击水管变色的功能
    draw: function(color) {
        ...
        this.color = color;
        ...
    }
    //......
}

var greenPump = Pump();
var redPump = Pump('red');
var blackPump = Pump('black');

仔细的从上到下阅读这段代码，发现这段代码更加方便的生成了各类各样不一样颜色的水管，quoniammm同窗很满意，代码量被减小了，但是想到还要构建红色的喷火函数，蓝色的喷水函数......quoniammm同窗有开始郁闷了，看来重构还得继续下去。因而quoniammm同窗开始思考，既然 Pump 函数能够方便的实现制造各类各样颜色的管子，那么能够实现一个 waterPump 函数实现制造能够喷水的管子，但是喷水的管子也有各类各样的颜色，怎么能把 Pump 和 waterPump 联系起来呢，让仅仅调用 waterPump 函数就能够实现制造各类各样颜色的喷水管子呢?因而机智的quoniammm同窗实现了下面的代码:

var waterPump = function(color) {
    var obj = Pump(color);
    obj.water = function() { //... };
    return obj;
}
//制造出了红色的喷水管子
var redwaterPump = waterPump('red');

写完这段代码后，quoniammm同窗又花了半天时间按照上面的思路重构了整个游戏代码，下降了那个让他恼火的快速移动的蓝色的会喷火的管子的难度，因而他又能够愉快地玩耍了，打发这使人绝望的无聊时光。

文章写到这里，quoniammm同窗去睡觉了，因此接结束了吗？固然尚未，还记得以前我提到的原型和参数 this 的绑定机制，这些都是 javascript 的特性。因此下面让咱们用这些特性从新写一下上面实现的函数，看一下更原汁原味的 javascript 面向对象编程。

var Pump = function(color) {
    this.color = color || 'green';
}
Pump.prototype.draw = function(color) {
    ...
    this.color = color;
    ...
}
var greenPump = new Pump();
var redPump = new Pump('red');
var blackPump = new Pump('black');

//function waterPump
var waterPump = function(color) {
    Pump.call(this, color);
}  
waterPump.prototype = Object.create(Pump.prototype);
waterPump.prototype.water = funciton() { //... }
var redwaterPump = new waterPump('red');

文章到这里已接近尾声，今天咱们简单的了解了 javascript 的面向对象编程，最后用比较官方的话总结一下，并提出一些问题供你们思考，但愿对你们能有所帮助。

今天咱们实现了一个父类函数 Pump，有 color 属性和 draw 方法，并实现了继承父类 Pump 的子类函数 waterPump，它自身实现了一个 water 方法。

Q&A:

waterPump.prototype = Object.create(Pump.prototype) 这段代码咱们也能够用 Object.setPrototype(waterPump.prototype, Pump.prototype) 替换，二者有什么区别呢？