面向技术名词编程(一)

138 阅读8分钟

前言

在学习编程的过程中,我们会接触到许多概念。概念是一个技术最基本最本质的表达,只有掌握了概念,才能从本质上理解技术的核心。

而这些概念是一个个的英文单词,理解这些名词就显得十分重要。

这篇文章我会介绍一些自己学习过程中收集的名词理解,我不会具体讨论它们在技术上的作用、用法,如果真要介绍,那每一个花几篇文章都不够,这里只是讨论理解技术名词对于编程技术的帮助,希望有所启发。

JavaScript 中的 this:当前上下文

this 的意思是“这”、“这个”,用来指代某个明确的对象或情境。在日常生活中,我们会用 this 来强调当前的事物,比如 “This is my book”(这是我的书)。这种强调当前环境中具体对象的含义,也正是 this 在 JavaScript 中的本义。

在 JavaScript 中,this 是一个非常重要的关键词,然而,它并不像日常用语中那么直观。抛开 this 有哪几种指向的死记硬背,this 指代的是当前上下文,调用函数的对象。但是函数在调用执行时才有意义,所以 this 的指向取决于函数的调用方式,而不是函数定义的位置。

有一个说法认为这个关键词不应该叫 this 而是 parent,因为它不是指向你当前所在的上下文,而是创造你(使用时)的上下文。

或者应该叫 context,比如防抖的实现:

function debounce(fn, delay = 300) {
  let timer = null
  return function () {
    let context = this;
    let args = arguments;
    clearTimeout(timer)
    timer = setTimeout(() => {
      fn.apply(context, args)
    }, delay)
  }
}

就把 this 赋值给变量 context,所以 this 指向防抖函数真正要执行的环境。

callback:回调函数

callback 的意思是“回电”、“召回”,call back 的意思是回电话。

感觉 callback 这个单词并不常用。找了一个例句:If we can't speak today, tomorrow afternoon would be a good time for a callback.

但是 callback 在计算机中却非常重要,意思就是回调。callback function,回调函数。

Wikipedia Callback 中的解释:

a callback is a function that is stored as data (a reference) and designed to be called by another function – often back to the original abstraction layer.

即回调是一个作为数据(引用)存储的函数,并被设计为被另一个函数调用——通常返回给原始抽象层。

另外一个解释

a piece of code (= a computer instruction) that tells another piece of code to perform an action at a particular later time,

即它是一段代码、被另外一段代码在之后的特定时间执行。

MDN:一个回调函数是指一个函数作为参数传递给另外一个函数,这个函数在外部函数中调用以完成某种操作。

回调可以通过同步和异步的方式进行调用,同步回调在外部函数调用后立即调用;异步回调在某个稍后的时间点调用,通常是在一个异步操作完成后。

Stack Overflow 上有个回答 ,认为回调函数 called at the back,也许更应该叫它 call after function,因为它在之后调用。但 callback 应该更合适,因为 back 更说明本质,back 强调一个来回,相互之间的对应关系,强调另一个函数回向给调用者。

handler:句柄

实际上是 handle 被翻译为句柄,这个翻译很难理解。

A handle is the part of an object such as a tool, bag, or cup that you hold in order to be able to pick up and use the object.

A handler is someone whose job is to deal with a particular type of object.

handle 的意思是“把手”、“手柄”,在早期的编程环境,程序员需要用一个值(通常是整数或指针)来引用系统资源(如文件、窗口、内存等),这个值被称为 handle,意为“握柄”或“把手”,类似于我们握住一个门把手以控制门的开关。

handler 的意思是“处理器”、“操作者”,从字面理解,就是“处理某些事情的人或工具”。在日常英语中,它可以指负责处理特定事务的人,例如 “a dog handler”(训狗员) 或 “a baggage handler”(行李搬运员)。

在编程中,handler 通常用于描述一种负责处理事件、操作或请求的函数、方法或模块。它本质上是一个 “处理工具”,负责响应特定的输入或事件并采取相应的动作。

Handler, an asynchronous callback (computer programming) subroutine in computing

Wiki 上说 handler 就是 异步的 callback

在 JavaScript 中,event handler 是最常见的 handler 类型之一,用于响应用户的交互或其他事件,例如点击、悬停、滚动等。通常是一个回调函数,用来处理事件逻辑。

const btn = document.querySelector("button");

function greet(event) {
  console.log("greet:", event);
}

btn.onclick = greet;

在这个例子中,greet 就是一个事件处理器(event handler),用于处理按钮的点击事件。

Git 中的 stage:暂存区

将 stage 比作一个剧院中的舞台:

后台(工作区) 是演员准备和化妆的地方,所有的动作和对话都可以随意修改。

舞台(暂存区) 是演员上场前等待的位置,已经确定了哪些演员和道具会在这个场景中出现。

剧院的记录(版本库) 是整场表演的录像,一旦录像完成,任何内容都成为历史记录,无法轻易更改。

在 Git 中,每次执行 git add,相当于将文件从后台移到舞台,准备好下一个场景的表演。执行 git commit,则是正式开始录制,将舞台上的所有内容保存到历史记录中。

React:最流行的前端框架

React 的意思是“反应”、“响应”、“作出回应”,这个单词在日常英语中非常常见,比如我们会说 "react to a situation"(对情况作出反应)。从单词本身来看,React 的核心思想可以用 “对状态的变化作出响应” 来理解。

React 是用于构建用户界面的 JavaScript 库。它的名字正是体现了其设计哲学:当数据或状态发生变化时,React 会对这些变化作出反应,并更新界面。换句话说,React 提供了一种声明式的方式来描述 UI 的状态,让开发者专注于描述“当状态是某种情况时,界面应该是什么样的”。

React 通过虚拟 DOM 对比新旧状态的差异,进行响应式更新。

理解 React 这个名字有助于我们掌握它的核心理念:在数据驱动的编程中,自动响应是它底层设计的核心。

Vue3 的响应式变量也使用 reactive 关键字声明。

Hooks:钩子

Hooks 的意思是“钩子”、“挂钩”。钩子在日常生活中可以理解为一个预留的位置,用来挂东西,比如墙上的挂钩。当我们需要把某些东西固定到某个点时,就会想到用钩子。同样,在编程中,钩子表示程序中某个预留的位置,可以用来挂载自定义的逻辑。

例如,在前端框架中,生命周期钩子是常见的“钩子”形式,用于在组件的特定阶段执行逻辑。React 和 Vue 等框架都提供了生命周期钩子的支持。

另外举一个 useState 的例子:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

这里的 useState 就是一个钩子,它挂载了一个状态变量 count 和一个更新函数 setCount。我们通过 setCount 更新状态,React 会自动响应状态的变化,重新渲染组件。

理解 Hooks 这个名字可以帮助我们更好地把握它的作用:它像一个挂钩,提供了一个固定的位置,让我们可以在组件中挂载所需的逻辑,从而实现灵活的功能扩展。

Side Effect 副作用

Side Effect 的意思是“副作用”。在日常生活中,我们常用这个词来描述药物的非预期效果,比如 “This medicine has no side effects”(这种药没有副作用)。在编程中,Side Effect 这个术语则用来描述那些对函数或程序执行之外产生影响的操作。

从函数式编程的角度看,一个“纯函数”(pure function)必须满足两个条件:

  • 输出只依赖于输入:相同的输入永远会得到相同的输出。
  • 不产生副作用:函数的执行不会影响外部环境,也不会依赖外部状态。

而副作用,则是指函数在执行过程中,除了返回值以外,还对外部状态或环境产生了额外的影响。常见的副作用有:修改外部变量、和外部系统交互如进行了网络请求。

日常用语中副作用是绝对负面的概念,然而编程中副作用并非总是坏事,它在程序中不可避免,尤其是在需要与外部世界交互的场景中(如用户输入、网络请求等)。但是,副作用会让代码变得更复杂、更难以调试,因为它破坏了函数的可预测性和可复用性。

理解 Side Effect,对我们编写可维护的代码很有帮助:

  • 提升代码质量:减少副作用能让代码功能更直观、易于调试和测试。
  • 增强设计能力:理解副作用的概念有助于在设计系统时更清晰地划分纯逻辑和外部交互。
  • 掌握函数式编程:副作用的管理是函数式编程的核心思想之一,减少副作用的方法之一——使用不可变数据(immutable data)也是函数式编程的重要理念,理解它们有助于深入学习现代编程范式。