编程范式

itzyj
34 阅读10分钟

课程背景：

  1. 前端的主要编程语言为JavaScript.
  2. JavaScript做为一种融合了多种编程范式的语言，灵活性非常高。
  3. 前端开发人员需要根据场景在不同编程范式间自如切换。
  4. 进一步需要创造领域特定语言抽象业务问题。

课程收益：

  1. 了解不同编程范式的起源和适用场景。
  2. 掌握JavaScript在不同的编程范式特别是函数式编程范式的使用。
  3. 掌握创建领域特定语言的相关工具和模式。

PS:课程讲师的气泡音实在太难听清楚了，学习得花一半的心思去注意他讲了什么。学习很难进入沉浸状态

编程语言

机器语言

第一代计算机（1940年代末至1950年代初）：第一代计算机使用的是机器语言，这种语言是二进制的，非常难以阅读和编写

image.png

  • 甚至一开始他是通过线缆来控制的

image.png

汇编语言

汇编语言（1950年代中期）：为了使程序员能够更容易地编写代码，汇编语言被发明了出来。汇编语言是一种更高级别的机器语言，使用助记符来代替二进制代码，使程序员能够更容易地编写和阅读代码

image.png

中级语言

中级语言是介于机器语言和高级语言之间的一种语言。它通常是一种可移植的高级语言，但在执行时被转换成机器语言。中级语言具有比高级语言更接近机器语言的特点，因此它们通常比高级语言更快，但比机器语言和汇编语言更易读和编写。一些常见的中级语言包括C语言和C++语言

C:"中级语言"过程式语言代表

  • 可对位，字节，地址直接操作

    • 代码中的*(&x) = 20;语句可以直接修改变量x的值，说明C语言可以对位、字节、地址进行直接操作

  • 代码和数据分离倡导结构化编程

    • 代码中的#include <stdio.h>语句引入了标准输入输出库，说明C语言倡导代码和数据分离，支持结构化编程

  • 功能齐全：数据类型和控制逻辑多样化

    • 代码中声明了整型变量x和字符指针变量str，使用了printf函数进行输出，说明C语言的数据类型和控制逻辑非常多样化，功能齐全

  • 可移植能力强

    • 代码中使用了标准输入输出库，这使得代码可以在不同的平台上运行，说明C语言具有很强的可移植能力
#include <stdio.h> // 引入标准输入输出库
​
int main() // 主函数
{
    int x = 10; // 声明并初始化一个整型变量x
    char* str = "Hello, World!"; // 声明并初始化一个指向字符的指针变量str
​
    printf("x = %d\n", x); // 输出x的值
    printf("str = %s\n", str); // 输出str所指向的字符串
​
    *(&x) = 20; // 对x的值进行修改，说明C语言可以对位、字节、地址进行直接操作
    printf("x = %d\n", x); // 输出修改后的x的值
​
    return 0; // 返回0表示程序正常结束，说明C语言支持函数返回值
}
复制代码

C++:面向对象语言代表

  • C with Classes

    • C++最初是作为C语言的一种扩展，其基本语法与C语言相同，但增加了类、继承、多态等面向对象的特性，因此C++也被称为C with Classes

  • 继承

    • 代码中的class Student : public Person语句定义了一个Student类，它继承自Person类，这说明C++支持继承的特性

  • 权限控制

    • 代码中的public、protected和private关键字用来控制成员变量和成员函数的访问权限，这说明C++支持权限控制的特性

  • 虚函数

    • 代码中的virtual void sayHello()语句定义了一个虚函数，这说明C++支持虚函数的特性。虚函数可以实现多态，即在运行时根据对象的实际类型来调用相应的函数

  • 多态

    • 代码中的void sayHello() override语句实现了函数的重写，这说明C++支持多态的特性。在运行时，如果调用的函数是虚函数，那么实际调用的函数将根据对象的实际类型来确定
#include <iostream> // 引入输入输出库
​
// 定义一个类Person
class Person {
public: // 公有权限
    // 构造函数
    Person(std::string name, int age) : mName(name), mAge(age) {}
​
    // 成员函数
    virtual void sayHello() { // 定义虚函数，支持多态
        std::cout << "Hello, I'm " << mName << ", " << mAge << " years old." << std::endl;
    }
​
protected: // 保护权限
    std::string mName; // 姓名
    int mAge; // 年龄
};
​
// 定义一个类Student，继承自Person
class Student : public Person {
public: // 公有权限
    // 构造函数
    Student(std::string name, int age, std::string school) : Person(name, age), mSchool(school) {}
​
    // 重写父类的虚函数
    void sayHello() override { // 定义虚函数，支持多态
        std::cout << "Hello, I'm " << mName << ", " << mAge << " years old, and I'm studying at " << mSchool << "." << std::endl;
    }
​
private: // 私有权限
    std::string mSchool; // 学校
};
​
int main() {
    // 创建一个Person对象
    Person person("Tom", 20);
    person.sayHello(); // 调用Person的sayHello函数
​
    // 创建一个Student对象
    Student student("Jerry", 18, "ABC University");
    student.sayHello(); // 调用Student的sayHello函数，实现多态
​
    return 0; // 返回0表示程序正常结束
}
复制代码

Lisp:函数式语言代表

  • 与机器无关
  • 列表：代码即数据
  • 闭包
(setq nums `(1 2 3 4)); 数据列表
​
(setq add `+) ;加操作
​
(defun run(op exp) (eval (cons op exp)) ) ;将数据构建为代码列表   连接列表
​
(run add nums) ;运行
复制代码

JavaScript

  • 基于原型和头等函数的多范式语言

    • 过程式

      • JavaScript最初被设计为一种过程式的脚本语言，它可以在Web浏览器中嵌入HTML页面，实现动态交互效果

    • 面向对象

      • JavaScript是一种支持面向对象编程的语言，它支持类、对象、继承、封装等面向对象的特性。JavaScript中的对象是动态的，可以随时添加或删除属性和方法

    • 函数式

      • JavaScript是一种支持函数式编程的语言，它的函数可以作为一等公民，可以赋值给变量，可以作为参数传递给其他函数，可以作为返回值返回给其他函数

    • 响应式

      • JavaScript可以通过DOM操作实现响应式编程，可以实现页面元素的动态更新，与用户的交互效果等

除了上述视频中提到的这几点，还有额外的特点进行补充：

  • 弱类型：JavaScript是一种弱类型的语言，不需要事先声明变量的类型，变量的类型会在运行时自动推断(在TS中变成强类型)。
  • 解释性：JavaScript是一种解释性的语言，不需要编译成可执行文件，可以直接在浏览器中执行(经典的例如V8引擎会进行处理)。
  • 高阶函数：JavaScript中的函数可以作为参数传递给其他函数，也可以作为返回值返回给其他函数，这种函数称为高阶函数。
  • 闭包：JavaScript中的函数可以形成闭包，即在函数内部定义的变量可以在函数外部访问，这种特性可以实现私有变量和函数的封装。

高级语言

高级语言是一种人类易于理解和使用的计算机语言。它使用自然语言的形式来描述问题，而不是使用机器语言或汇编语言。高级语言通常具有较高的可读性和可维护性，使程序员能够更容易地编写和修改代码。一些常见的高级语言包括Java、Python和JavaScript等

image.png

思维导图总结

image.png

编程范式

程序语言特性

  1. 是否允许副作用
  2. 操作的执行顺序
  3. 代码组织
  4. 状态管理
  5. 语法和词法

编程范式

  • 命令式：命令式编程是一种以计算机执行的命令为中心的编程范式，它主要分为面向过程和面向对象两种形式

    1. 面向过程

      • 面向过程是一种以过程为中心的编程方式，它将问题分解为一系列步骤，通过函数的调用来实现程序的功能。面向过程的代码通常是一系列的命令，描述了计算机执行的具体步骤

    2. 面向对象

      • 面向对象是一种以对象为中心的编程方式，它将数据和函数封装在一起，通过对象的交互来实现程序的功能。面向对象的代码通常是一系列的对象，描述了程序中的实体和它们之间的关系

  • 声明式：声明式编程是一种以描述问题为中心的编程范式，它主要分为函数式和响应式两种形式

    1. 函数式

      • 函数式编程是一种以函数为中心的编程方式，它将计算视为函数的应用，通过函数的组合来实现程序的功能。函数式的代码通常是一系列的函数调用，描述了计算的过程

    2. 响应式

      • 响应式编程是一种以数据流为中心的编程方式，它将数据和函数封装在一起，通过数据的变化来触发函数的执行，实现程序的功能。响应式的代码通常是一系列的数据流，描述了数据的变化和处理

过程式

自顶向下

image.png

调用的过程

image.png

结构化编程

结构化编程是一种以结构为中心的编程范式，它主要关注程序的可读性、可维护性和可扩展性，通过一系列的结构化的控制流程来组织程序的逻辑。

结构化编程的主要特点是：

  1. 顺序结构：程序按照顺序执行，从上到下依次执行每一条语句。
  2. 选择结构：程序根据条件选择执行不同的语句，包括if语句、switch语句等。
  3. 循环结构：程序通过循环执行一组语句，包括for、while、do-while等循环语句。

结构化编程的优点在于：

  1. 代码清晰：结构化编程通过一系列的结构化控制流程来组织程序的逻辑，使得代码更加清晰易懂。
  2. 可维护性高：结构化编程使得代码的逻辑更加清晰，易于维护和修改。
  3. 可扩展性强：结构化编程使得程序的逻辑更加清晰，易于扩展和添加新的功能。

结构化编程是现代编程语言的基础，几乎所有的编程语言都支持结构化编程。结构化编程的思想也是面向对象编程、函数式编程等其他编程范式的基础。

image.png

上图中左边是反面案例，右边是正确示例

JS中的面向过程

下方中结尾的;属于可加可不加的，但具体的规则如下：

  1. 行结束：当一行代码结束时，如果下一行代码不是有效的JavaScript代码（比如空行或注释），JavaScript解析器会自动插入分号。
  2. 语句块结束：当一段代码块结束时，如果下一行代码不是有效的JavaScript代码，JavaScript解析器会自动插入分号。
  3. return语句：在return语句后面的表达式如果不是一行代码的开头，JavaScript解析器会自动插入分号。
  4. break语句和continue语句：在break语句和continue语句后面如果不是一行代码的开头，JavaScript解析器会自动插入分号。
//进行导出
​
//数据
export let car = {
  meter:100,
  speed:10
};
​
//算法：函数可以看作面向过程中的算法
export function advanceCar(meter){
  while(car < meter){
    car.meter += car.speed;
  }
}
复制代码

//导入(命名导入)，除此之外还有默认导入的方案
import { car , advanceCar } from ".car"//导入上方模块内容
​
function main(){
  console.log('before',car);
  
  advanceCar(1000)
  
  console.log('after',car)
}
复制代码
  • 模块化的方案不止ES6中的import导入export导出方案。在ES6正式出来之前，社区也有自己根据需求编写了其他的方案，目前还在流行的有CommonJS方案
  • ES6的模块化方案和CommonJS都是JavaScript中常见的模块化方案，它们都支持导入和导出模块的功能，但是在具体的语法和使用方式上有所不同。ES6使用import和export关键字来导入和导出模块，而CommonJS使用require和module.exports来导入和导出模块。ES6的导入和导出是静态的，不能在运行时动态导入和导出，而CommonJS的导入和导出是动态的，可以在运行时动态地导入和导出模块
// 导出
module.exports = {
  a: 1,
  foo: function() {},
  MyClass: class {}
};
复制代码

// 导入
const { a, foo, MyClass } = require('./module.js');
复制代码

面向过程式编程有什么缺点？为什么后面会出现面向对象

  • 数据与算法关联弱

  • 不利于修改和扩充

    • 可维护性差：面向过程式编程缺乏封装性和抽象性，代码的耦合度高，修改代码时容易影响其他部分的代码，导致维护性差

  • 不利于代码重用

    • 可扩展性差：面向过程式编程很难对程序进行扩展，因为程序的逻辑分散在各个函数或过程中，很难进行整体性的扩展

面向对象的出现解决了这几个问题

  • 可读性好：面向对象编程将数据和函数封装在一起，代码的可读性好，易于理解整个程序的逻辑。
  • 可维护性好：面向对象编程具有封装性和抽象性，代码的耦合度低，修改代码时只需要修改对象的内部实现，不会影响其他部分的代码，导致维护性好。
  • 可扩展性好：面向对象编程将数据和函数封装在一起，对象之间通过接口进行交互，易于对程序进行扩展。

面向对象

  • 封装
  • 继承
  • 多态
  • 依赖注入

封装

  • 将数据和行为封装在一个对象中，通过访问控制来保护对象的数据和行为，防止外部对象直接访问和修改
  • 封装的目的是隐藏对象的实现细节，提供一个统一的接口来访问对象的数据和行为，增加对象的安全性和可靠性，同时也提高了程序的可维护性和可扩展性
class Person {
  // 姓名、年龄和性别都为private，外部对象无法直接访问和修改
  #name;
  #age;
  #gender;
​
  constructor(name, age, gender) {
    this.#name = name;
    this.#age = age;
    this.#gender = gender;
  }
​
  // 公共的getter方法，用于访问和获取私有的数据成员
  getName() {
    return this.#name;
  }
​
  getAge() {
    return this.#age;
  }
​
  getGender() {
    return this.#gender;
  }
​
  // 公共的setter方法，用于修改私有的数据成员
  setName(name) {
    this.#name = name;
  }
​
  setAge(age) {
    this.#age = age;
  }
​
  setGender(gender) {
    this.#gender = gender;
  }
}
​
// 创建一个Person对象，并访问和修改私有的数据成员
const person = new Person('小余', 20, '男');
console.log(person.getName()); // 输出：小余
person.setName('小满');
console.log(person.getName()); // 输出：小满
avatar
文章
阅读
粉丝