5、面向过程与面向对象、ES6与ES5的面向对象语法

1、面向过程

• 设置一个内容管理系统：考虑各个功能，然后每个功能都编写成函数，最后依次调用函数就实现了整个系统。
  

2、面向对象

• 设置一个内容管理系统，把系统抽象成一个个类，完成类的编写之后，系统就随之完成了（比如像Java这种纯面向对象语言开发过程就是在写类）
  

3、ES6的面向对象语法

<script>
		// 1、创建类
		class User {
			// 2、构造函数
			constructor(username, password) {
				this.username = username;
				this.password = password;
			}
			// 3、方法
			login() {
				if (this.username === "jasmine" && this.password === "123456") {
					console.log("登陆成功");
				} else {
					console.log("登陆失败");
				}
			}
		}
		// 4、new：对象实例化
		let user = new User("jasmine", "123456");
		console.log(user);		// 输出结果：User {username: 'jasmine', password: '123456'}
		user.login();			// 输出结果：登陆成功

		// 5、extends:继承User的属性与方法
		class Admin extends User {
			// 构造函数
			constructor(username, password, id) {
				// 6、继承属性
				super(username, password);
				// admin独有
				this.id = id;
			}
			// 方法
			crudUser() {
				console.log("对用户进行操作");
			}
		}

		// 实例对象
		let admin = new Admin("jasmine_qiqi", "123456789");
		console.log(admin);		// 输出结果：Admin {username: 'jasmine_qiqi', password: '123456789'}
		admin.login();			// 输出结果：登陆失败
		admin.crudUser();		// 输出结果：对用户进行操作
	</script>

4、ES6的面向对象总结

1. 大多数前端工程师，在工作过程中，都是用面向过程的方式去解决问题。因为面向过程的代码更简洁，解决问题的方式更直接。
2. 面向对象的程序设计会大幅度提升代码量，但如果我们开发的系统经常会需要变量，功能扩展，或是修复BUG，那么面向对象的程序有很大的优势。
3. 也就是说，如果问题规模上升，面向对象对于系统的可扩展性和可维护性优势是非常突出的。
4. 总结：面对过程（小规模），面向对象（大规模）

5、ES5的面向对象语法

	<script>
		// 1、创建构造函数，相当于类
		function User(username, password) {
			this.username = username;
			this.password = password;
			// 2、创建方法
			this.login = function () {
				if (this.username === "jasmine" && this.password === "123456") {
					console.log("登陆成功");
				} else {
					console.log("登陆失败");
				}
			}
		}
		// 3、new:实例化对象
		var user = new User("jasmine", "123456");
		console.log(user);		// 输出结果：User {username: 'jasmine', password: '123456'}
		user.login();			// 输出结果：登陆成功


		function Admin(username, password) {
			this.username = username;
			this.password = password;
		}
		// 4、通过构造函数的prototype属性实现继承（函数所特有的）
		Admin.prototype = new User();
		// 5、通过对象的.__proto__属性实现继承（共有）
		// Admin.__proto__ = new User();
		var admin = new Admin("jasmine", "123456");
		console.log(admin);		// 输出结果：Admin {username: 'jasmine', password: '123456'}
		admin.login();			// 输出结果：登陆成功
	</script>