（10）es6——面向对象Class

什么是面向过程编程?

	面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步步的实现，作为前端人员来说对于这种方式应该已经不陌生了。
使用的时候再一个个的依次调用就可以了。
	比如：打开冰箱门-->大象装进去-->关上冰箱门。
	总结：面向过程就是按照我们分析好了的步骤，按照步骤解决问题。

// 声明3个回调函数，三个回调函数分别对应程序的三个过程
const open_the_door = function() {
    console.log("开门");
};

const put_items = function(name) {
    console.log("放入/取出" + name);
};

const close_the_door = function() {
    console.log("关门");
};

open_the_door();
put_items("大象");
close_the_door();

什么是面向对象编程？

	面向对象就是把问题分解成一个个对象，由这些对象相互配合、分工合作解决问题
	
	比如：创建一个大象对象
				有行走这个方法和若干属性
			   创建一个冰箱对象
				有开门和关门两个方法和若干属性
	总结：面向对象是以对象的功能来划分问题，而不是步骤
	
	面向对象开发中，每个对象都是功能中心，具有明确的分工；面向对象编程具有灵活、
代码可复用、容易维护和开发的优点，更适合多人合作的大型软件项目
	
	面向对象的特性：封装性（类封装共有的方法和属性）
								 继承性（子类继承父类）
								 多态性（子类可拓展）
	
	面向对象编程具体实现概括：1、抽取对象共有的属性和行为封装成一个类（图纸）2、对象实例化，获取对象（根据图纸生产物品）。

面向过程编程和面向对象编程的比较

	优点	缺点
面向过程编程	能比面向对象高，适合跟硬件联系密切的大戏，例如单片机	没有面向对象易维护、易复用、易拓展
面向对象编程	易维护、易复用、易拓展；可设计出低耦合的系统，使系统更加灵活、更加易于维护	性能比面向过程低

什么是对象？

现实生活中：万物皆对象，对象是一个具体的事务，看的见摸得着
的实物。
	
	在js中，对象是一组无关属性和方法的集合，所有事物
都是对象。
	
	对象是由属性和方法组成的
			属性：事物的特性（例如：人的姓名年龄、名词）
			方法：事物的行为（例如：人可以跑、动词）

类是什么？

在es6中添加了类的概念，可以使用class关键字声明一个类，
之后以这个类来实例化（new）对象，类名一般大写。

类抽象了的对象的公共部分，它泛指莫一大类的对象的共有属
性和方法。

对象特指一个，通过实例化一个具体的对象。

声明类与创建对象

// 创建类语法：
		class Name {
			//属性、方法
		}
		
// 实例化对象
		const obj = new Name();

1、类里面有一个constructor函数，可以接收传递过来的参数，
同时返回实例对象。
2、当new对象时，constructor函数会被自动调用，就算我们不写，
系统也会为我们自动生成一个constructor函数并调用。
类里面的属性是通过constructor函数来声明的，方法是通过函数
来声明的（每个方法后面不用添加逗号、每个函数也不用写function）

给类添加属性和方法

// 声明一个计算器类
class Calculator {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }

    // 这种书写方式是有默认值的添加属性
    ConstantValue = "Calculator_Class"


    sum() {
        return this.x + this.y;
    }
}

const calculator = new Calculator(1, 2);
console.log(calculator.sum());
console.log(calculator);

类实现继承

		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);
		son.sum();
		
		// 当父类和子类有同名方法时，子类实例化的对象执行方法时，执行的是子类的方法（就近原则）

super关键字介绍

	/* super关键字用于访问和调用对象父类上的函数。可以调
	用父类的构造函数，也可以调用父类的普通函数。 */
	
	/* 在constructor构造函数中，super一定要在写在最前面*/
	class Father {
		constructor(x,y){
			this.x = x;
			this.y = y;
		}
	}
	
	class Son extends Father {
		constructor(x,y){
		/* 调用了父类的构造函数，将传给子类的参数又传给了父类，
		此时父类的方法（带参数的）才能获取到传给子类的参数，才
		能正常执行父类的方法。*/
			super(x,y);
			this.x = x;
			this.y = y;
		}
	}

在子类中拓展子类自己的方法

			 class Father {
				constructor(x, y) {
					this.x = x;
					this.y = y;
				}

				sum() {
					return this.x + this.y;
				}
			}
	
			class Son extends Father {
				constructor(x, y) {
					super(x, y);
					this.x = x;
					this.y = y;
				}
	
				sub() {
					return this.x - this.y;
				}
			}
	
			var son = new Son(2, 1);
			console.log(son.sub()); //1

getter和setter

class Person {
    constructor(name) {
            this.name = name;
        }
        // 给name属性绑定一个get,当请求这个属性时，会自动调用函数
    get name() {
        // 注意不要在get方法里面有读取name的操作，否则会循环调用，造成调用栈溢出
        return "name被读取了"
    }

    // 给name属性绑定一个set,当设置这个属性时，会自动调用函数
    set name(newName) {
        // 注意不要在set方法里面有设置name的操作，否则会循环调用，造成调用栈溢出
        console.log("name被修改成" + newName);
    }
}

const p = new Person("zhangsan");
console.log(p.name);
p.name = "lisi";

静态成员

// 直接添加在Person类身上的，就是静态成员
Person.a = 2;

Person.b = 3;
const person = new Person(1);
console.log(person.a); // 1
console.log(Person.a); // 2
/* 类实例化出来的对象无法访问到静态成员*/
console.log(person.b); // undefined
console.log(Person.b); // 3

es11新增类的私有属性

class Girl {
	name;
	// 私有属性
	#height;
	#weight;
	constructor(name, height, weight) {
	    this.name = name;
	    this.#height = height;
	    this.#weight = weight;
	}
	boyfirend() {
	    return `${this.name} ${this.#height} ${this.#weight}`;
	}
}

const g = new Girl('xiaohong', 160, 100);
console.log(g.name);
// console.log(g.#height); //不能直接得到女生的身高体重是秘密
// 成为她的男朋友就可以知道啦
console.log(g.boyfirend());

多态

class Father {
    // 跳高
    jump() {}
}

class Son1 extends Father {
    jump() {
        console.log("跳2米高");
    }
}

class Son2 extends Father {
    jump() {
        console.log("跳1米高");
    }
}

const zhangsan = new Son1();
const lisi = new Son2();
zhangsan.jump();
lisi.jump();

使用class的注意事项

1、在es6中类没有变量提升，所以必须先定义类，才能通过类实例化对象。

2、类里面共有的属性和方法，要加this关键字。

3、constructor函数里面的this指向实例对象，方法里面的this指向
这个方法的调用者。

4、typeof Class === Function，说明Class的类型是一个Function

5、Object.keys(Class)只能遍历到静态成员。