005 ※ 从面向过程到面向对象？ |【新手的必经之路】

不二如是

关于为什么要学习JavaScript设计模式，请看：传送门

---

上一讲最后小不二见识到了prototype的威力，经过仔细琢磨后，他又领悟了一些东西。

奇妙而紧张的第一天工作就要结束了，小不二走在回家的路上，既欣慰又开心。

遇到那么好的上司，主动教给自己这么多东西，真的很开心。

一想到，玄武认可的眼神，小不二对日后的工作有了更多的信心。

走着走着，小不二突然想到：

哎，是不是今天的问题，其实就是面向过程和面向对象的区别呢？

回到家后，小不二赶紧翻看小甲鱼老师《零基础入门学习Web开发》（JavaScript）的配套书籍温习了一下。

看着那本被自己翻了无数次的宝典，感谢有这样一本权威的书籍，能帮助自己更好的工作～

看着看着，突然回想起下午学习的项目源码里面全都不是一个方法一个方法的写。

记得小甲鱼老师说过：

面向过程编程就是编写一个一个函数来实现相关的需求。

就像自己一开始，一上手就写了三个全局变量，这样很不利于团队开发～

而最后玄武大佬教给自己创建类的写法，岂不就是面向对象编程？

一想到这里，小不二翻开之前的笔记，去重温面向对象的定义。

面向对象：

就是将需求抽象成一个对象，然后针对这个对象分析其具备的属性和方法，这个对象就是类。

笔记下面有自己对定义的注解：

面向对象编程思想中最重要的特点，就是封装，即把需要的功能放在同一个类中。

就像大学毕业时搬家，我们没有一件一件把东西运走，而是打包放进一个行李箱中统一带走～

看到往昔自己的注解，小不二陷入了沉思：

感谢自己当时努力跟小甲鱼老师学习Web开发，毕业后才可以顺利入职，才没有像有的同学那样，毕业即失业。

虽然JavaScript是弱语言类型，没有C++中那种强类型语言中的class等关键字。
（ECMAScript中就有了，推荐：0 0 0 0 ㊣ Why ECMASCript）

我们可以曲线救国，JS语言很灵活，可以模仿出一种类。

看到这里，小不二打开电脑，用JS开始创建类。

1、在JS中创建一个类很容易，首先声明一个函数保存在变量中。

2、按照约定俗成的JS江湖规则，这个代表类的变量名要首字母大写。

3、然后在这个函数（类）的内部通过this（内部用于指向该对象的一个变量）变量添加属性或者方法来实现对类添加属性或者方法。

例如，记得小甲鱼老师的新书 《零基础入门学习C语言》就要出版了。
（更多：传送门）

那就拿书来举例子吧，代码：

1. var FishcBook = function(id,name,price){
   
2.         this.id = id;
   
3.         this.name = name;
   
4.         this.price = price;
   
5.     }

复制代码

这样我们就创建了一个类，FishcBook。

其中有三个属性，id，name，price。

还可以通过在类的原型（类仍是一个对象，原型依旧是prototype）上添加属性和方法。

常用的有两种方式：

1、依次为原型对象属性赋值

2、将一个对象赋值给类的原型对象。

两种方式不能混用，例如：

1. FishcBook.prototype.display = function(){
   
2. //        展示此书
   
3.     };

复制代码

或者：

1.     FishcBook.prototype = {
   
2.         display : function(){
   
3. //            展示
   
4.         }
   
5.     };

复制代码

这样我们将所需的方法和属性都封装在我们抽象的FishcBook类里面了。

当我们调用的时候呢，也不能直接使用，需要new关键字来创建（实例化）对象。

很简单：

1. var myBook = new FishcBook(10,'零基础入门学习C语言',55);

复制代码

调用的时候，通过点语法：

1. myBook.name

复制代码

看到这里，发现自己在笔记中记录了一个问题：

用this添加的属性和方法与在prototype中添加的属性和方法有啥区别呢？

哈哈，看来当时还是很青涩阿～

小不二结合午玄武教给他的类的创建，上面问题的答案已了然于胸～

通过this添加的属性、方法是在当前对象上添加的，然而JavaScript是一种基于原型prototype的语言。
（更多请看：0 0 8 6 ★ Js对象与禅 |【南无阿弥陀佛】）

所以每次创建一个对象时（函数也是对象），都有一个原型prototype用于指向其继承的属性、方法。

如此通过prototype继承的方法并不是对象自身的，需要一级一级来查找～

这样便会发现：

通过this定义的属性或者方法是该对象自身拥有的。

所以每次通过类创建一个新对象时，this指向的属性和方法都会得到相应的创建。

而通过prototype继承的属性或者方法是对每个对象通过prototype访问到的，所以每次通过类创建的一个新对象时这些属性和方法不会再次创建。

想着想着，小不二发现可以梳理出如下这张图：

constructor是一个属性，当创建一个函数或者对象时都会为其创建一个原型对象prototype。

在prototype对象中又会像函数中创建this一样创建一个constructor属性。

constructor属性指向的就是拥有整个原型对象的函数或对象。

在上面的代码中，FishcBook prototype中的constructor属性指向的就是FishcBook类对象。

上面的概念一梳理清楚，小不二内心豁然开朗～

突然想到：

在和小甲鱼老师学习C++时，里面也讲过面向对象编程，比如似有属性、私有方法、共有属性、共有方法等等，那是不是JS中也有呢？

答案是...

预知后事如何，请看下回分解

---

课后作业


1、用this添加的属性和方法与在prototype中添加的属性和方法有啥区别呢？

2、JavaScript中函数是一种对象吗？（T/F）



答案：

游客，如果您要查看本帖隐藏内容请回复

---

如果有收获，别忘了评分 ：

                               
登录/注册后可看大图

这位鱼油，如果喜欢JS-设计模式，请订阅 专辑☞（传送门）（不喜欢更要订阅 ）

                               
登录/注册后可看大图

不会C++

啊哈

lvfen

d

TCY

1.通过this定义的属性或者方法是该对象自身拥有的，而通过prototype继承的属性或者方法是对每个对象通过prototype访问到的，所以每次通过类创建的一个新对象时这些属性和方法不会再次创建。
2.T

jack6666

1