1、面向过程
- 设置一个内容管理系统:考虑各个功能,然后每个功能都编写成函数,最后依次调用函数就实现了整个系统。
2、面向对象
- 设置一个内容管理系统,把系统抽象成一个个类,完成类的编写之后,系统就随之完成了(比如像Java这种纯面向对象语言开发过程就是在写类)
3、ES6的面向对象语法
顺序 | |
1、创建类 | class User{} |
2、定义构造函数 | constructor() {} |
3、定义方法 | login(){} |
4、实例化对象 | new User() |
5、继承类 | class Admin extends User {} |
6、继承类属性 | super(username, password) |
<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的面向对象总结
大多数前端工程师,在工作过程中,都是用面向过程的方式去解决问题。因为面向过程的代码更简洁,解决问题的方式更直接。
面向对象的程序设计会大幅度提升代码量,但如果我们开发的系统经常会需要变量,功能扩展,或是修复BUG,那么面向对象的程序有很大的优势。
也就是说,如果问题规模上升,面向对象对于系统的可扩展性和可维护性优势是非常突出的。
总结:面对过程(小规模),面向对象(大规模)
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>