JS的面向对象

一、对象

1. 对象的概念：
   对象是事物存在的实体，通俗地说，每个对象都是某个类的一个实例，比如：人类，而每个人就是一个对象。
2. 对象的组成：
   方法——函数：过程、动态的
   属性——变量：状态、静态的

二、面向对象

1. 面对对象的概念：
   使用对象时，只关注对象提供的功能，不关注其内部细节,比如：JQuery,我们使用JQuery时直接调用它的函数即可，而不需要对里面的代码进行更多的操作；
2. 面向对象的特性：
   
   • 抽象：（抽取核心的信息来使用）
     抽象是通过特定的实例抽取共同特征以后形成概念的过程。它强调主要特征，忽略次要特征。一个对象是现实世界中一个实体的抽象，一个类足一组对象的抽象，抽象是一种单一化的描述，它强调给出与应用相关的特性，抛弃不相关的特性。
   • 继承：（可以使用父类的功能，同时拥有自己的功能）
     可以让某个类型的对象获得另一个类型的对象的属性的方法。它支持按级分类的概念。继承是指这样一种能力：它可以使用现有类的所有功能，并在无需重新编写原来的类的情况下对这些功能进行扩展。 通过继承创建的新类称为“子类”或“派生类”，被继承的类称为“基类”、“父类”或“超类”。继承的过程，就是从一般到特殊的过程。要实现继承，可以通过“继承”（Inheritance）和“组合”（Composition）来实现。继承概念的实现方式有二类：实现继承与接口继承。实现继承是指直接使用基类的属性和方法而无需额外编码的能力；接口继承是指仅使用属性和方法的名称、但是子类必须提供实现的能力。
   • 封装：（不考虑内部实现，只考虑功能使用）
     所谓封装，也就是把客观事物封装成抽象的类，并且类可以把自己的数据和方法只让可信的类或者对象操作，对不可信的进行信息隐藏。封装是面向对象的特征之一，是对象和类概念的主要特性。 简单的说，一个类就是一个封装了数据以及操作这些数据的代码的逻辑实体。在一个对象内部，某些代码或某些数据可以是私有的，不能被外界访问。通过这种方式，对象对内部数据提供了不同级别的保护，以防止程序中无关的部分意外的改变或错误的使用了对象的私有部分。

三、面向过程

1. 面向过程概念：
   自顶向下顺序执行，逐步求精；其程序结构是按功能划分为若干个基本模块，这些模块形成一个树状结构；各模块之间的关系尽可能简单，在功能上相对独立；每一模块内部均是由顺序、选择和循环三种基本结构组成；其模块化实现的具体方法是使用子程序。

四、JS是否是面向对象的语言？

1、它拥有对象，可以包含数据和处理数据的方法。对象可以包含其它对象。他没有类（在javascript2.0真正实现之前），但它却有构造器可以做类能做的事，包括扮演变量和方法的容器和角色。他没有基于类的继承，但它有基于原型的继承。两个建立对象系统的方法是通过继承和通过聚合。javaScript两个都有。
2、 一些评价说javascript不是真正面向对象的因为它不能提供信息的隐藏。也就是，对象不能有私有变量和私有方法：所有的成员都是公共的。但随后有人证明了javaScript对象可以拥有私有变量和私有方法。另外还有批评说javascript不能提供继承，但随后有人证明了javascript不仅能支持传统的继承还能应用其他的代码复用模式。
3、说javascript是一种基于对象的语言，是一种正确而略显保守的判断，其实可以说javascript是基于原型的面向对象。

五、实例（选项卡）

//      封装构造函数的方法：//      构造函数的三个步骤：1、原料（new Date()）;2、加工（主要代码块）;3、出厂（return）;//      1、函数之间不能互相嵌套，要把函数抽离出来；//      2、调用构造函数时要加一个new关键字，如：new TabWitch('box');使用new之后，系统默认帮我们构造空对象  var this=new Object();还有返回这个对象   如return this;就是三个步骤中的原料和出厂步骤；//      3、在每个对象和方法前加上this，这里需要注意的是this指向的对象，可以利用var _this=this;更换指向的对象；//      4、把函数改写成原型，改写成原型后，就证明内部调用同一段代码。（prototype）        function TabWitch(id) {            var _this=this;            var oBox = document.getElementById(id);            this.aInput = oBox.getElementsByTagName('input');            this.aDiv = oBox.getElementsByTagName('div');            for (var i = 0; i < this.aInput.length; i++) {                this.aInput[i].index = i;                this.aInput[i].onclick = function(){                    _this.fnclick(this);                }            }        }        TabWitch.prototype.fnclick=function(oBtn) {            for (var i = 0; i < this.aInput.length; i++) {                this.aInput[i].className = '';                this.aDiv[i].style.display = 'none';            }            oBtn.className = 'active';            this.aDiv[oBtn.index].style.display = 'block';        }        new TabWitch('box');