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

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

1、面向过程


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


40b11833f0fb4e18a12c789251723602.png

2、面向对象


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

815f25781a5341b39c111c8fd92ecc7d.png

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的面向对象语法

image.png

  <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>


相关文章
|
4月前
|
JavaScript 前端开发 安全
ES6的类 vs TypeScript的类:解密两种语言中的面向对象之争
ES6的类 vs TypeScript的类:解密两种语言中的面向对象之争
|
4天前
|
C语言 iOS开发 MacOS
Objective-C是一种面向对象的编程语言,它扩展了C语言,添加了面向对象编程的特性
Objective-C是苹果公司的面向对象编程语言,用于iOS和macOS应用开发。它扩展了C语言,包含类定义(接口和实现)、对象创建、消息传递、属性、协议、块和类别等语法特性。例如,类通过`@interface`和`@implementation`定义,对象用`alloc`和`init`创建,方法通过消息传递调用。属性简化变量声明,协议定义可选方法集合,块支持代码块作为参数,类别用于扩展已有类。错误处理常使用NSError对象。要深入了解,建议查阅相关教程和文档。
20 0
|
6月前
ES6系列笔记-面向对象/继承
ES6系列笔记-面向对象/继承
21 1
|
6月前
|
Java
面试--什么是面向对象?面向对象三大特性?
面试--什么是面向对象?面向对象三大特性?
34 0
|
11月前
ES6 —— 类和对象
ES6 —— 类和对象
|
JavaScript 前端开发
【ES6】ES6编程规范 编程风格
【ES6】ES6编程规范 编程风格
|
Python
Python 面向对象1:面向对象基础 以及 类和对象
Python 面向对象1:面向对象基础 以及 类和对象
63 0
|
JavaScript 前端开发 Java
TypeScript 面向对象程序设计(OOP)
在 JavaScript 中 ES6 之前我们使用函数(构造器函数)和基于原型来创建一个自定义的类,但这种方式总会让人产生困惑,特别是习惯了 Java、PHP 等面向对象编程的同学来说更加难以理解。 抽象一个类 面向对象编程的基本单位是对象,但对象又是由类实例化的,所以我们第一步需要先知道怎么去声明一个类。 类的声明 类的声明使用 class 关键词,类名与变量、函数等命名规则类似,这里要首写字母大写,类名后跟上一对花括号可以理解为的类的主体,类的主体三部分组成:成员属性、构造函数、成员方法。
101 0