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>


相关文章
|
6月前
|
JavaScript 前端开发 安全
ES6的类 vs TypeScript的类:解密两种语言中的面向对象之争
ES6的类 vs TypeScript的类:解密两种语言中的面向对象之争
|
6月前
|
C语言 iOS开发 MacOS
Objective-C是一种面向对象的编程语言,它扩展了C语言,添加了面向对象编程的特性
【5月更文挑战第9天】Objective-C是苹果公司的面向对象编程语言,用于iOS和macOS应用开发。它扩展了C语言,包含类定义(接口和实现)、对象创建、消息传递、属性、协议、块和类别等语法特性。例如,类通过`@interface`和`@implementation`定义,对象用`alloc`和`init`创建,方法通过消息传递调用。属性简化变量声明,协议定义可选方法集合,块支持代码块作为参数,类别用于扩展已有类。错误处理常使用NSError对象。要深入了解,建议查阅相关教程和文档。
56 0
|
12月前
ES6系列笔记-面向对象/继承
ES6系列笔记-面向对象/继承
32 1
|
JavaScript
ts(typescript)面向对象之类的继承
super当作属性使用的时候, super 指向的是父类的原型,因此super无法拿到父类的实例属性,只能拿到父类的public和protected的方法,super 如果当方法使用的话,只能在字类的构造函数中并且是第一行使用,需要使用super()来实例化父类里面的属性,确保字类可以获取父类的成员。
ts(typescript)面向对象之类的继承
|
JavaScript 前端开发
【ES6】ES6编程规范 编程风格
【ES6】ES6编程规范 编程风格
|
JavaScript 前端开发 Java
Typescript面向对象---上篇
Typescript面向对象---上篇
Typescript面向对象---上篇
|
JavaScript 前端开发 编译器
Typescript面向对象---下篇
Typescript面向对象---下篇
|
程序员 Python
Python - 面向对象编程 - 三大特性之多态
Python - 面向对象编程 - 三大特性之多态
142 0
Python - 面向对象编程 - 三大特性之多态