资讯专栏INFORMATION COLUMN

关于javascript面向对象编程

Enlightenment / 673人阅读

摘要:所以让我们赶紧切入正题,一起来看看关于脚本的面向对象编程。所以下面让我们用这些特性重新写一下上面实现的函数,看一下更原汁原味的面向对象编程。

今天怀着忐忑的心情写下这篇文章,因为这毕竟是我第一篇真正意义上的技术文章,巩固知识的同时,希望可以给阅读的人带来收获,就很满足了。所以让我们赶紧切入正题,一起来看看关于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 函数实现制造可以喷水的管子,可是喷水的管子也有各种各样的颜色,怎么能把 PumpwaterPump 联系起来呢,让仅仅调用 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) 替换,两者有什么区别呢?

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/91048.html

相关文章

  • 2017年 最好的javascript 书籍

    摘要:请记住,这些书中的一些可能不是最新的,但概念和基础仍应适用。是最好的老师之一。的秘密由部分组成。在你完成这些书后,查看书籍和最好的本土书籍。 我看过三本,第1本,第二本,第四本。第一本买的的实体书,其他两本看的是电子书。第一本是大名鼎鼎老道写的,书很薄,但是非常经典。javascirpt忍者秘籍是jquery的作者写的,也是非常经典。you dont kown js系列也是非常好。看了...

    mingzhong 评论0 收藏0
  • JS程序

    摘要:设计模式是以面向对象编程为基础的,的面向对象编程和传统的的面向对象编程有些差别,这让我一开始接触的时候感到十分痛苦,但是这只能靠自己慢慢积累慢慢思考。想继续了解设计模式必须要先搞懂面向对象编程,否则只会让你自己更痛苦。 JavaScript 中的构造函数 学习总结。知识只有分享才有存在的意义。 是时候替换你的 for 循环大法了~ 《小分享》JavaScript中数组的那些迭代方法~ ...

    melody_lql 评论0 收藏0
  • 面向对象JavaScript

    摘要:是完全的面向对象语言,它们通过类的形式组织函数和变量,使之不能脱离对象存在。而在基于原型的面向对象方式中,对象则是依靠构造器利用原型构造出来的。 JavaScript 函数式脚本语言特性以及其看似随意的编写风格,导致长期以来人们对这一门语言的误解,即认为 JavaScript 不是一门面向对象的语言,或者只是部分具备一些面向对象的特征。本文将回归面向对象本意,从对语言感悟的角度阐述为什...

    novo 评论0 收藏0
  • SegmentFault 技术周刊 Vol.32 - 七夕将至,你的“对象”还好吗?

    摘要:很多情况下,通常一个人类,即创建了一个具体的对象。对象就是数据,对象本身不包含方法。类是相似对象的描述,称为类的定义,是该类对象的蓝图或原型。在中,对象通过对类的实体化形成的对象。一类的对象抽取出来。注意中,对象一定是通过类的实例化来的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 马上就要到七夕了,离年底老妈老爸...

    李昌杰 评论0 收藏0
  • SegmentFault 技术周刊 Vol.32 - 七夕将至,你的“对象”还好吗?

    摘要:很多情况下,通常一个人类,即创建了一个具体的对象。对象就是数据,对象本身不包含方法。类是相似对象的描述,称为类的定义,是该类对象的蓝图或原型。在中,对象通过对类的实体化形成的对象。一类的对象抽取出来。注意中,对象一定是通过类的实例化来的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 马上就要到七夕了,离年底老妈老爸...

    Lyux 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<