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>


相关文章
|
9月前
|
JavaScript 前端开发 安全
ES6的类 vs TypeScript的类:解密两种语言中的面向对象之争
ES6的类 vs TypeScript的类:解密两种语言中的面向对象之争
|
3月前
|
数据安全/隐私保护
类和继承特性是如何在ES6中简化面向对象编程的?
类和继承特性是如何在ES6中简化面向对象编程的?
ES6系列笔记-面向对象/继承
ES6系列笔记-面向对象/继承
41 1
|
Java
面试--什么是面向对象?面向对象三大特性?
面试--什么是面向对象?面向对象三大特性?
93 0
|
JavaScript 前端开发
【ES6】ES6编程规范 编程风格
【ES6】ES6编程规范 编程风格
108 0
|
JavaScript 前端开发 Java
ES6新特性实现面向对象编程,详解class语法定义类(上)
ES6中出现 class 语法,只是创建构造函数的一种语法糖,那为何要新增一种语法去实现同一个功能呢?其实目的还是为了跟上一些主流编程语言的脚步,例如 java 、C++ 、Python,他们内部都是用 class 语法来实现的面向对象编程,所以咱们的 JavaScript 也不能落后,不然很多学习过 java c++ python 的小伙伴跑来学习 js时,就很难理解构造函数这一概念了。
184 0