Web前端学习 第3章 JavaScript基础教程13 面相对象

一、面相对象概述

首先面向对象是一种编程思想，是一种通过多个对象互相协作完成处理流程的编程思路【是对现实世界中一类事物的抽象，在编程中可以理解为是一种建立现实世界事物的模型】 推及到广义上，面向对象已经越了程序设计和软件开发，我认为面向对象又是一种思维方式，不局限于编程语言，甚至不局限编程本身，它把复杂的需求、业务逻辑抽丝剥茧、逐个分析。 主要分为：类的声明定义、对象的创建使用、面向对象拥有的特征【三大特征：封装、继承、多态】 封装：体现了对象对于敏感数据的保护特征 继承：体现了代码的复用和功能的扩展 多态：体现了不同操作环境中代码的多样性【程序的健壮性】 思路：大量的程序开发—软件的开发—解决问题—处理数据—CRUD【增删改查】

二、基于原型的面向对象

在ES2015版本之前，JavaScript是没有类的概念的，我们可以使用构造函数来模拟一个类，这在我们之前的课程中已经讲解过了，这里我们简单复习一下。

创建一个猫的构造函数

1 function Cat(name,age){
2     this.name = name;
3     this.age = age;
4 }
5 
6 var cat = new Cat("miaomiao",2);
7 console.log(cat.name);

在上面的代码中，我们定义了一个构造函数Cat，通过var关键字创建了一个变量cat，cat有两个属性，name和age。我们可以直接输出cat.name;

我们可以通过原型属性为构造函数添加方法，例如我们给这个Cat添加一个shout方法，让这只猫可以叫 代码如下所示:

 1 function Cat(name, age) {
 2     this.name = name;
 3     this.age = age;
 4 }
 5 
 6 Cat.prototype.shout = function(){
 7     console.log("喵喵喵！")
 8 }
 9 
10 var cat = new Cat("miaomiao", 2);
11 cat.shout();

这样猫就有了shout方法，可以调用shout方法让猫叫。

通过上面的代码，我们可以模拟一个类的概念，但是这样的写法与真正面相对象语言的写法相比，确实更难以理解。所以ES2015中增加了类的概念。

三、ES2015中的面向对象

基于原型的继承方式，虽然实现了代码复用，但是行文松散且不够流畅，可阅读性差，不利于实现扩展和对源代码进行有效的组织管理。不得不承认，基于类的继承方式在语言实现上更健壮，且在构建可服用代码和组织架构程序方面具有明显的优势。所以，ES2015+中提供了基于类class的语法。但class本质上是ES2015+提供的一颗语法糖，正如我们前面提到的，JavaScript是一门基于原型的面向对象语言。

我们可以用class来定义一个类，然后可以在这个类中定义构造函数，方法和属性。 代码如下所示:

 1 class Cat{
 2     constructor(name,age){
 3         this.name = name;
 4         this.age = age;
 5     }
 6 
 7     shout(){
 8         console.log("喵喵喵");
 9     }
10 }
11 
12 let cat = new Cat("miaomiao",2);
13 cat.shout();

上面的这段代码与第二个案例的代码功能是完全一样的，但是通过class关键之定义一个猫的类，让这个类更像是一个整体，而非一个个零散的prototype组合起来的一个功能。

继承

课后练习

按要求实现功能：

1. 拓展Date对象实现如下功能:实现dateFomate方法，返回值是 “xxxx年xx月xx日”。
2. 定义一个Person类，让Student类和Teacher类继承Person,为Person类添加getlnfotmation方法，是student类和Teacher类都可以通过此方法获取个人信息