我对JavaScript面向对象的思考

面向对象是一种思维方式,在拿到问题时我们先不考虑代码的具体实现,而是先考虑需要哪些功能才能去解决这个问题。
假设我们现在有这样一个需求,一个人员架构的列表。


demo.png

页面的逻辑是这样的。


demo1.jpg

顶部有一个面包屑,下面的列表有人员和部门,当点人员时拿到人员详情,点击部门时加载这个部门下的人员和部门,点击部门时要加载面包屑对应的部门下的人员和部门。
首先我们需要一个类,就叫PersonManage。然后分析一下这个需求需要哪些功能。首先肯定是创建列表的dom,人员和部门不一样,所以需要buildPerson和buildDepartment两个方法。然后是面包屑需要addCrumb,removeCrumb和updateCrumb三个方法,分别用来增加面包屑,减少面包屑,增加和减少后都需要更新下面包屑。当然还需要其他的方法,不一一介绍了。有了这些方法后,我们就可以去构建类了。这大概就是面向对象的思想的思维方式。

1. 什么是对象?

所谓的对象就是若干属性的集合。在js中狭义的对象就是由大括号括起来并带有键值对的一种数据类型,广义的对象就是狭义的对象加上js的内建的对象类型,比如Array,Function。

2. 数据类型的检测

我们可以用typeOf操作符检测js中的数据类型,如果是对象就会返回'object'。

3. 封装

拿上面的例子继续说。现在有这样一个需求,要在面包屑的上面加一个搜索人员的搜索框,这个搜索框请求搜索接口返回人员列表。这个时候难道我们还去写一个专门生成搜索人员列表的方法吗,当然不用,我们可以直接利用上面那个PersonManage类的实例上的方法buildPerson方法,然后把搜索拿到的数据给这个函数,就可以了。这里就体现了封装的好处了,可以重用。

4. 继承

继承的好处在于子类可以直接复用父类的方法,无需在子类上重新定义。
这一点在three.js中体现的非常好,因为threejs中所有的类都是继承子Object3D这个大类,其他的响灯光,几何体都是继承子这个类,那么这些子类就可以使用在Object3D上定义的一些方法和属性,比如用于变换的Matrix,translate方法等等。

最后补充一下,这里总结的只是我自己的一点理解,面向对象是个很大的话题,不是几句话就可以概括的。还有就是图是我自己做的,丑了点。。。。

你可能感兴趣的:(我对JavaScript面向对象的思考)