js面向对象编程体会

面向对象编程在现在的服务端应该是一种应用很广泛的编程思想，通过实例化对象调用属性或者方法，减少了代码的冗余量，结构也比较清晰。现在谈一谈我对前端js的面向对象编程的一些理解。

我们现在的做web应用，前端的业务处理几乎全是在js的基础上完成的，可能一个项目会包含很多开发人员编写的js文件包含进去，因为我们就要注意函数名的唯一性和全局变量的使用，防止自己写的函数或声明的变量会和其他同事编写的js文件发生冲突，产生意想不到的bug。解决方法有很多，比如写匿名函数，封装成插件等等。我这里想介绍的js面向对象编程，这虽然是js语言的一种编程模式，但是面向对象在一定程度上解决了不同js文件内函数和变量之间的冲突。

首先，介绍几个基本概念：

基本概念

ECMA关于对象的定义是：”无序属性的集合，其属性可以包含基本值、对象或者函数。“对象的每个属性或方法都有一个名字，而每个名字都映射到

一个值。

类

在现实生活中，相似的对象之间往往都有一些共同的组成特征。类，实际上是对象的设计蓝图或者制作配方。我们能基于相同的类创建出许多不同的

对象，这些对象又会含有各自的属性和方法。

封装

封装主要用于阐述对象中所包含（或封装的内容），它通常由两部分组成：

1. 相关的数据（用于存储属性）

2. 基于这些数据所能做的事（所能调用的方法）

实践1：对象定义及赋予对象属性

假设我们现在想要封装一个js的类，功能是可以把我通过类名选中的元素为它缓存一个数据，方便我以后调用，这个类名就叫cacheDom吧，从最基本的开始做。

第一步.对象的定义：

    var cacheDom = function(clsname){};

对象创建好之后，根据功能，在使用这个类时需要传入一个我们需要缓存数据的dom元素的类名，那么function里面的形参就需要一个类名的参数；

    var cacheDom = function(clsname){};

基础的对象声明好之后，接下来要定义一些类内部的变量了，首选，我们需要取得类名，然后通过类名筛选得到jquery或者dom对象，接着为得到的对象缓存数据；

第二步.定义属性值：

根据功能，属性值的定义主要说明了类中通用的一些数据，就本案例来说，cacheDom类中需要的属性有：1.选中的jquery或dom对象，这是根据类名获取到的；功能简单所以只有这一个属性，就写作obj

var cacheDom = function(clsname){
    this.obj = $( '.'+claname );//这样就是通过给定的类名取得jquery对象，dom对象的获取差别也不大，这里就用jquery语法继续了
};

第三步.定义类中的方法：

这个类的方法就是缓存数据了，这里将一个知识点，js中的function也是一种属性，在本实例中我们的方法是定义在cacheDom这个对象的属性中，给缓存方法起个名字，就叫做tocache

var cacheDom = function(clsname){
    this.obj = $( '.'+claname );//这样就是通过给定的类名取得jquery对象，dom对象的获取差别也不大，这里就用jquery语法继续了
};
cacheDom.prototype{//在这里定义方法，可以很好的避免冲突
    tocache:function(obj){//tochche方法的定义，函数体内具体实现
    }
};

第四步.方法的实现：

执行顺序，1.取得类名；2.通过类名取到对象；3.将对象传入函数中缓存数据，继续将缓存方法补充完整

var cacheDom = function(clsname){
    this.obj = $( '.'+claname );//这样就是通过给定的类名取得jquery对象，dom对象的获取差别也不大，这里就用jquery语法继续了
    this.tocache(this.obj);//在这里面的其实相当于一个构造函数，在初始化对象是就会先执行这里的语句，我们这里就是在初始化对象传入类名后执行缓存方法
};
cacheDom.prototype{//在这里定义方法，可以很好的避免冲突
    tocache:function(obj){//tochche方法的定义，函数体内具体实现
         $.data(obj.get(0),'data','123456');//$.data()是jquery为dom对象缓存数据的函数，其中第一个参数是dom对象，因为之前传递的是jquery对象，故转换为don对象
    }
};

第五步.类的实例化：

var cacheobj=new cacheDom('classname');//在外部为cacheDom类实例化一个cacheobj对象，同时传入类名，之后cacheDom类就会自动给指定对象缓存数据