JavaScript的魅力世界：从变量到代理模式

巨硬的Clippy
165 阅读4分钟

JavaScript是一门令人着迷的语言，它的弱类型、动态特性和灵活性使它成为前后端开发中不可或缺的一部分。今天，让我们一起探索JavaScript的奇妙世界，从基础概念到高级设计模式，用代码讲述故事！

用JavaScript介绍一个程序员

想象一下，如果我们要用JavaScript来描述一个程序员“小天”，我们该如何做呢？这正是面向对象思想的魅力所在！

// 创建一个程序员对象
const programmer = {
  name: "小天",
  age: 21,
  skills: ["JavaScript", "Node.js", "React"],
  coding: function() {
    return `${this.name}正在用${this.skills[0]}编写代码`;
  },
  learning: function(newSkill) {
    this.skills.push(newSkill);
    return `${this.name}学会了${newSkill}`;
  }
};

console.log(programmer.coding());  // 输出：小天正在用JavaScript编写代码
console.log(programmer.learning("TypeScript"));  // 输出：小天学会了TypeScript

这里，我们创建了一个包含属性（特征）和方法（行为）的对象，完美展示了面向对象的核心思想。

1747295675820.png

JavaScript的运行环境

JavaScript的魅力在于它的多面性，它可以在多种环境中运行：

// 保存为hello.js
console.log("Hello, Node.js!");

// 在命令行运行
// node hello.js

与传统的编译型语言不同，JavaScript是一种解释型语言，无需编译成二进制文件即可执行。

前端环境

在前端，JavaScript主要通过两种方式运行：

1.浏览器文件方式：

<html>
<head>
  <title>JavaScript示例</title>
  <script>
    function greet() {
      alert("你好，JavaScript!");
    }
  </script>
</head>
<body>
  <button onclick="greet()">点击我</button>
</body>
</html>

2.通过HTTP协议远程访问

<html>
<head>
  <title>远程JavaScript示例</title>
  <script src="https://example.com/script.js"></script>
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>

1747296043279.png

面向对象设计模式：代理模式

面向对象编程的高级应用是设计模式，让我们通过一个生活化的例子来理解"代理模式"：

想象一个甜蜜的场景：小明想送花给他喜欢的女孩小琪，但他太害羞了，于是决定找小琪的闺蜜小红帮忙。这就是一个典型的代理模式实现！

// 定义送花接口（方法）
class FlowerReceiver {
  receiveFlower() {
    // 抽象方法，需要被子类实现
  }
}

// 小琪对象
class Qiqi extends FlowerReceiver {
  receiveFlower(flower) {
    console.log(`小琪收到了${flower}，很开心！`);
    return true;
  }
}

// 小红对象（代理）
class Hongbao extends FlowerReceiver {
  constructor(target) {
    super();
    this.target = target; // 代理的真实接收者
  }
  
  receiveFlower(flower) {
    console.log(`小红收到了${flower}，准备帮忙转交...`);
    
    // 代理可以增加一些逻辑：比如判断小琪的心情
    const mood = this.checkTargetMood();
    
    if (mood === 'good') {
      return this.target.receiveFlower(flower);
    } else {
      console.log("小红觉得现在不是好时机，先把花收起来了");
      return false;
    }
  }
  
  checkTargetMood() {
    // 假设有50%的几率心情好
    return Math.random() > 0.5 ? 'good' : 'bad';
  }
}

// 小明对象
const Ming = {
  sendFlower: function(receiver, flower) {
    console.log(`小明准备送${flower}...`);
    return receiver.receiveFlower(flower);
  }
};

// 创建对象实例
const qiqi = new Qiqi();
const hongbao = new Hongbao(qiqi);

// 执行送花
const result = Ming.sendFlower(hongbao, "玫瑰花");
console.log(result ? "送花成功！" : "送花失败，下次再试...");

在这个例子中：

  1. 我们定义了一个共同的接口/方法 ，小琪和小红都实现了这个方法receiveFlower
  2. 小红作为代理，在转交花之前增加了额外的逻辑（检查小琪的心情）
  3. 小明并不直接与小琪交互，而是通过小红间接交互

这就是代理模式的核心：通过一个代理对象控制对原对象的访问，在访问过程中可以增加额外的逻辑处理。

微信截图_20250515160840.png

面向对象编程的魅力

面向对象编程的魅力在于它能将复杂的现实世界抽象为软件系统中的对象、属性和方法。在上面的例子中，我们看到：

  1. 对象：小明、小琪、小红都是独立的对象，各自有自己的特性和行为
  2. 属性：用于描述对象的特征（例如，小红有一个target属性指向小琪）
  3. 方法：用于描述对象的行为（例如，sendFlower、receiveFlower等）
  4. 接口：定义了对象应该实现的方法（例如，FlowerReceiver接口）

面向接口编程是面向对象思想的高级表现，通过共同的接口，不同的对象可以互相替换（如小红和小琪都实现了receiveFlower方法），这就是多态性的体现。

总结

JavaScript作为一门弱类型、动态、灵活的脚本语言，完美支持面向对象编程范式。通过本文的例子，我们看到了：

  1. 如何用JavaScript创建和描述对象
  2. JavaScript的不同运行环境（前端和后端）
  3. 面向对象的设计模式（代理模式）应用

JavaScript的世界就像一片广阔的海洋，我们今天只是踏上了旅程的第一步。下次我们将深入探讨更多JavaScript的设计模式和高级应用，敬请期待。

avatar
文章
阅读
粉丝