面向过程与面向对象
面向过程
面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现， 使用的时候再一个一个的依次调用就可以了。
面向对象
面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作。
面向过程与面向对象对比
| 面向过程 | 面向对象 | |
|---|---|---|
| 优点 | 性能比面向对象高，适合跟 硬件联系很紧密的东西，例 如单片机就采用的面向过程 编程。 | 易维护、易复用、易扩展，由于面向对象有 封装、继承、多态性的特性，可以设计出低 耦合的系统，使系统 更加灵活、更加易于维 护 |
| 缺点 | 不易维护、不易复用、不易 扩展 | 性能比面向过程低 |
ES6中的类和对象
面向对象的思维特点
1.抽取（抽象）对象共有的属性和行为组织(封装)成一个类(模板)
2.对类进行实例化，获取类的对象
对象
对象是由属性和方法组成的：是一个无序键值对的集合,指的是一个具体的事物
1.属性：事物的特征，在对象中用属性来表示（常用名词）
2.方法：事物的行为，在对象中用方法来表示（常用动词）
类class
1.类抽象了对象的公共部分，它是泛指某一大类(class)
2.对象特指某一个，通过实例化一个具体的对象
创建类和生成实例
语法
class name {
//class body
}
创建实例
var xx=new name();
注意：类必须使用new实例化对象
类constructor构造函数
constructor()方法是类的构造函数（默认方法）,用于传递参数，返回实例对象，通过new命令生成实例时，自动调用该方法
示例
<script type="text/javascript">
//1创建类 class 创建一个明星类
class Star {
constructor(uname, age) {
//this指向的是创建的实例
this.uname = uname;
this.age = age;
}
}
//2.利用类创建实例new
var ldh = new Star('刘德华', 18);
var zxy = new Star('张学友', 20);
console.log(ldh);
console.log(zxy);
</script>
输出
Star {uname: "刘德华", age: 18}
Star {uname: "张学友", age: 20}
注意:
1.通过class 关键字创建类, 类名我们还是习惯性定义首字母大写
2.类里面有个constructor 函数,可以接受传递过来的参数,同时返回实例对象
3.constructor 函数 只要 new 生成实例时,就会自动调用这个函数, 如果我们不写这个 函数,类也会自动生成这个函数
4.生成实例 new 不能省略
5.语法规范, 创建类 类名后面不要加小括号,生成实例 类名后面加小括号, 构造函数不需 要加function
类中添加共有方法
<script type="text/javascript">
//1创建类 class 创建一个明星类
class Star {
constructor(uname, age) {
//this指向的是创建的实例
this.uname = uname;
this.age = age;
}
sing(song) {
console.log(this.uname + song);
}
}
//2.利用类创建实例new
var ldh = new Star('刘德华', 18);
var zxy = new Star('张学友', 20);
console.log(ldh);
console.log(zxy);
ldh.sing('冰雨');
zxy.sing('李香兰');
</script>
输出
Star {uname: "刘德华", age: 18}
Star {uname: "张学友", age: 20}
刘德华冰雨
张学友李香兰
注意：
1.多个函数方法之间不需要添加逗号分隔
2.类里面所有函数不需要写function
类的继承extends和super关键字
类的继承
程序中的继承：子类可以继承父类的一些属性和方法
语法：
class Father { //父类
}
class Son extends Father { //子类继承父类
}
示例：
<script>
class Father {
constructor() {
}
money() {
console.log(100);
}
}
class Son extends Father {
}
var son = new Son();
son.money();
</script>
输出：
100
super关键字
super关键字用于访问和调用对象父类上的函数。可以调用父类的构造函数，也可以调用父类的普通函数
super关键字调用父类的构造函数
示例：
<script type="text/javascript">
class Father {
constructor(x, y) {
this.x = x;
this.y = y;
}
sum() {
console.log(this.x + this.y);
}
}
class Son extends Father {
constructor(x, y) {
super(x, y); //调用了父类中的构造函数
}
}
var son = new Son(1, 2);
var son1 = new Son(11, 22);
son.sum();
son1.sum();
</script>
输出：
3
33
super关键字调用父类的普通函数
<script type="text/javascript">
class Father {
say() {
return ('我是爸爸');
}
}
class Son extends Father {
say() {
console.log(super.say() + '的儿子');
//super.say()就是调用父类中的普通函数say()
}
}
var son = new Son();
son.say();
// 1. 继承中, 如果实例化子类输出一个方法, 先看子类有没有这个方法, 如果有就先执行 子类的
// 2. 继承中, 如果子类里面没有, 就去查找父类有没有这个方法, 如果有, 就执行父类的这个方法(就近原则)
super必须在子类this之前
<script type="text/javascript">
//父类有加法方法
class Father {
constructor(x, y) {
this.x = x;
this.y = y;
}
sum() {
console.log(this.x + this.y);
};
}
//子类继承父类加法 同时扩展减法方法
class Son extends Father {
constructor(x, y) {
//利用super调用父类的构造函数
//super必须在子类this之前调用
super(x, y);
this.x = x;
this.y = y;
}
substract() {
console.log(this.x - this.y);
}
}
var son = new Son(5, 3);
son.substract();
son.sum();
</script>
输出
2
8
三个注意点
1.在ES6中没有变量提升，所以先定义类，才通过类实例化对象
2.类里面的共有属性和方法一定要加this使用
3.constructor里面的this指向实例对象，方法里面的this指向这个方法的调用者
