小白的前端练级之路——面向对象编程（封装）

大家晚上好，士心昨天被公司的项目弄得很是头疼，加班到有点晚，所以昨天晚上没有更新，实在是不好意思了。好了，废话不多说，每天学点小前端，走向人生大前端，继续和士心一起来学习前端知识吧。前两篇我们讲到了函数的几种书写方式以及链式调用怎么实现的，今天我们来一起学习学习面向对象编程吧（注：心士只是把看到的和自己的理解写出来，欢迎大神批评指教）。

要学习面向对象编程，首先要了解什么是面向对象编程？为什么要使用面向对象编程？以及面向对象和面向过程有什么区别？这些概念在网上随便一搜就是一大堆，士心就不再啰嗦概念性的东西了，举个小例子吧，希望能用通俗的语言帮助还不是很了解面向对象的朋友加深一点点认识，大神请略过。士心是个250K纯屌丝，请不起家政，所以什么洗衣服啊，叠被啊，打扫卫生啊，都需要自己去完成，然而，突然有一天士心人品大暴发，买彩票中了5000万，士心瞬间走上了人生巅峰，左手一个诺基亚右手一个摩托罗拉，还要请一个漂亮的小妹妹来做家务，有木有？然后洗衣服，叠被，打扫卫生什么的就不需要士心自己来做了，只要向漂亮小妹发个指令，她就可以帮我做那些本来需要我自己来做的事情----屌丝士心什么事都要自己做，这个就是面向过程，土豪士 心向漂亮小妹发个指令，漂亮小妹就按照我们的指令去完成我们想要完成的工作，这个漂亮小妹就可以看作是一个对象，我们只要通过这个对象就可以完成各种工作，但是我们不需要去理会漂亮小妹是如何完成工作的，这就是面向对象。面向对象和面向过程的区别也就出来了，面向过程你需要去重复很多复杂的工作，而面向对象，你只需要操作对象，向对象发送指令，所有复杂的工作则交给对象去完成。到这，大家应该就基本了解什么是面象对象了。了解了什么是面向对象之后，我们就要学习如何去封装对象了，学过java的朋友都知道，java有 封装，继承，多态几个特性，JavaScript中可以封装和继承，虽然js中没有多态这一说，但是我们也可以用相似的思路去实现它。

一.封装

在JavaScript中创建一个类很容易，首先，声明一个函数 保存在一个变量里，按编程习惯，一般将这个代表类的变量名首字母大写，然后在这个函数的内部通过对 this （函数内部自带的一个变量，用于指向当前对象）变量添加属性或者方法来实现对类添加 属性或者方法。下面直接上代码

我们这里封装了Book这个类，然后给Book类加上了id,bookname,price三个属性。当然，我们也可以用到前两集提到的原型（类也是一个对象，所以也有原型prototype）上添加属性和方法，有两种方式，一种是：

另一种是：

两种方式不能混用，前面两集已经说过了，这里就不再赘述。这样，我们就将所需要的方法和属性都 封装在我们抽象的Book类里面了，当使用功能方法时，我们就可以用new关键字来实例化对象，使用实例化的属性或者方法时，可以通过点语法访问，就像这样（嘿嘿，自恋一下）

到这里，可能有的初学的朋友不是很理解通过 this 添加 的属性和方法 与 在prototype 中添加 的属性和方法有什么区别？士心在这里说明一下，通过 this 添加的属性，方法是在当前对象上添加的，然而JavaScript是一种基于原型prototype的语言，所以每创建 一个对象，它都有一个原型prototype用于指向其继承的属性，方法。这样通过prototype继承的方法并不是对象自身的，所以在使用这些方法时，需要通过prototype一级一级查找来得到，这样你就会发现通过 this 定义的属性或者方法是对象自身拥有的，所以我们每次通过类创建 一个新对象的时候，this 指向的属性和方法都会得到相应的创建 ，而通过prototype继承的属性或者方法是每个对象通过prototype访问到，是所有对象共有的，所以我们每次通过创建 一个新对象时这些属性和方法不会再次创建 。

此外，在Java对象中还有私有属性，私有方法，共有属性，共有方法，保护方法等等，这些在JavaScript中虽然没有显性的存在，但是我们可以通过一些灵活的技巧来实现它。具体怎么来实现呢？由于JavaScript的函数 级作用域，声明在函数内部的变量以及方法在外界是方问到的，通过此特性即可创建 类的私有变量以及私有方法，然而在函数 内部通过 this 创建 的属性和方法，在类创建对象时，每个对象自身都拥有一份并且可以在外部访问到，因此通过 this 创建的属性可看作是对象的共有属性和对象共有方法，而通过 this 创建的方法，不但可以访问这些对象的共有属性和共有方法，而且还能方问到类或者对象自身的私有属性和私有方法，由于这些方法权利比较大，所以我们又将它看作特权方法。在对象创建时通过使用这些特权方法，我们可以初始化实例 对象的一些属性，因此这些在创建 对象时调用的特权方法还可以看作是类的构造器，就象下面这样：

这样，通过 JavaScript 函数级作用域 的特征来实现在函数 内部创建 ，外界就访问不到的私有化变量和私有方法，通过new 关键字实例 化对象时，由于对类执行一次，所以类的内部 this 上定义的属性和方法自然就可以复制 到新创建 的对象上，成为对象公有的属性和方法，而其中的一些方法能访问到的类的私有属性和方法，就像明星的家人比外界对明星了解的多是一个道理，而我们通过new关键字实例化对象时，执行了一遍类的函数，所以里面通过调用特权方法自然就可以初始化对象的一些属性了。

通过 new 关键字创建新对象时，由于类外面通过点语法添加的属性和方法没有执行到，所以新创建 的对象中无法获取他们，但是可以通过类来使用，因此在类外面通过点语法定义的属性和方法可以看作类的静态共有属性和类的静态共有方法，而类通过prototype 创建的属性或者方法在类实例对象中是可以通过 this 访问到的，所以我们将 prototype 对象中的属性和方法看作是共有属性和共有方法。

通过 new 关键字创建的对象实质是对新对象 this 的不断赋值，并将 prototype 指向类的 prototype 所指向的对象（这里有点绕，反正士心当初绕了很久），而类的构造函数 外面通过点语法定义的属性方法是不会添加 到新创建 的对象上去的。国此要想在新创建 的对象中使用isChinese 就得通过 Book 类使用而不能通过 this ，如 Book.isChinese,而类的原型 prototype 上定义的属性在新对象里就可以直接使用，这是因为新对象的 prototype 和类的 prototype 指向的是同一个对象。

我们可以写一段代码测试一下

好了，由于时间关系，今天先一起学到这吧，明天我们将会一起学习到闭包，继承，多态如何去实现，小伙伴们，我们明天见