零基础学JavaScript，简单学个设计模式吧

1.先来解释解释javascript是什么吧？

JavaScript 是一门极具表现力的脚本语言，尤其适合初学者入门编程。与 Java、C++ 等传统语言不同，JavaScript 不需要先定义类（class）才能创建对象。早在 class 关键字出现之前，开发者就已经能通过"对象字面量"轻松创建和操作对象。这种灵活的语法让 JavaScript 成为学习面向对象编程（OOP）的理想语言。

2.什么是面向对象？

面向对象编程的核心思想是：万物皆对象 。一个对象由属性和方法构成。属性描述对象的状态，方法定义对象的行为。比如，一个"学生"对象可以有姓名、年龄等属性，以及"学习""考试"等方法。

在 JavaScript 中，我们可以通过"对象字面量"快速创建对象：

javascript 复制代码

// 我们来建立一个叫饶世豪的人，他是一个来自南昌的年轻小伙子，他今年18岁，他是一个单生贵族，他喜欢摄影和打篮球。
 let rsh = {
            name: '饶世豪',//字符串
            hometowm: '南昌',
            age: 18,// number 不适合计算 数值类型
            sex: '男',
            hobbies: ['摄影', '篮球'],// 仍然是对象数组 array
            isSingle: true,// 布尔值
            job: null,
            sendFlower: function (target) {
           
            }
            //空值 null
        }

这行代码创建了一个叫饶世豪的对象，它有 name 属性和home属性等这些属于饶世豪的标签和 sendFlower 方法。简单直观，无需复杂语法。

JavaScript的5种数据类型

在学习过程中，别忘了 JavaScript 的基本数据类型：

字符串（String） ：如 "饶世豪"
数值（Number） ：如 18
布尔值（Boolean） ：如 true / false
对象（Object） ：如 { name: "饶世豪" }
空值（null） 和 未定义（undefined）

注意：

1.Number在javascript 并不适合计算，如果想要那种逆天的计算，python走起。

2.typeof null 返回 "object"，这是 JavaScript 的一个历史遗留 bug。

3.重点讲一下null与undefined的区别，null是我们开发者自己赋值，而undefined是系统自动给的，这点要区分明白。

javascript 复制代码

// null 和undefinrd
//变量声明了但没赋值，类型无法确定
//或对象属性/数组元素不存在时，JS自动
//JS 弱类型语言
//主动赋值给变量，表示这个值是空的
let a;
console.log(a);
console.log(a, typeof a);
let obj = {
    name: '彭于晏',
}
console.log(obj.grilFriend, '/////')
a = 1;//变量的类型由值决定
//null 表示一个空值 不是未定义
//有值
let b = '原来的值';
b == null;

以上代码我们看到我们声明了一变量名为a，但我们却没有主动赋值。他的结果会是怎么样的呢。

注意：那么很明显运行后，这些未声明的的变量分别报出undefined的信息，这就是我们未赋值造成的。！！！你会发现b却没有问题，这是因为b被赋予了null的值。

从简单到复杂：模拟人际关系

好了好了，回归正题。假设我们要模拟一个"送花"场景：rsh（饶世豪）想给 xm（小美）送花。我们可以这样写：

javascript 复制代码

 let rsh = {
            name: '饶世豪',
            hometowm: '南昌',
            age: 18,
            sex: '男',
            hobbies: ['摄影', '打篮球'],
            isSingle: true,
            job: null,
            sendFlower: function (target) {
                target.receiveFlower(zzp);
            }
            //空值 null
        }
   let xm ={
            name: '小美',
            hometowm: '赣州',
            receiveFlower: function (sender) {
                console.log('小美收到了' + sender.name + '花')
            }
        }

饶世豪害怕被拒绝很尴尬，这是有个小美的闺蜜，他想先通过讨好他闺蜜的方式来知道小美的心意。所以他向小红也送了一束花。

javascript 复制代码

let xh = {
            name: '小红',
            hometowm: '上饶',
            receiveFlower: function (sender) {
             
                 console.log('小红收到了' + sender.name + '花');
               
            }
        }

让我们看看效果：现在，rsh 既可以给 xm 送花，也可以给 xh 送花：

zzp.senderFlower(xm); // 小明收到了花！ zzp.senderFlower(xh); // 小红也收到了花！

设计模式：代理模式（Proxy Pattern）

这个场景体现了一种经典的设计模式------代理模式 。它的核心思想是：通过接口（interface）编程，让代码更灵活、更强大。

在这里，"收花"就是一个接口。xm 和 xh 都实现了 receiveFlower 方法。rsh 不关心谁收花，只要对方有 receiveFlower 方法，就能送花。这种"面向接口"的编程方式，让代码解耦、易于扩展。

未来如果增加小刚（xg）收花，只需让他也实现 receiveFlower 方法，无需修改 rsh 的代码：

javascript 复制代码

let xg = {
  name: "小刚",
  receiveFlower: function() {
    console.log(this.name + " 代 " + xm.name + " 收到了花！");
  }
};

zzp.senderFlower(xg); // 小刚  收到了花！

接下来重点来了，rsh通过xh的暗中帮忙，知道小美正处于开心状态，他觉得稳了，他要向xm约会。让我们看看代码：

javascript 复制代码

  let xm = {
            xq: '心情',
            name: '小美',
            hometowm: '赣州',
            receiveFlower: function (sender) {
                console.log('小美收到了' + sender.name + '花');
                //xm.receiveFlower(sender);
                //if (sender.name === '郑志鹏') {
                //  console.log('让我们在一起吧。。。。')
                //  }
               if (this.xq < 80) {
                    console.log('不约,我们不约')
                }
                else {
                    console.log('硕果走一波！！！')
                }
            }
        }
        let xh = {
            name: '小红',
            hometowm: '上饶',
            receiveFlower: function (sender) {
                 setTimeout(function () {
                 xm.xq = 90;
                   xm.receiveFlower(sender);
                 }, 3000)
              //  console.log('小红收到了' + sender.name + '花');
                // xh.receiveFlower(sender);
            }

经过这一次，饶世豪凭借他高超的情场技术，再次送出至臻玫瑰🌹🌹🌹俘获了小美的芳心。小美说：

码客饶世豪不在单身，幸福的和小美生活下去。

总结

通过一个简单的"送花"例子，我们不仅学会了 JavaScript 的对象字面量，还理解了"代理模式"这一设计模式。JavaScript 的灵活性让它成为学习编程的绝佳起点。无需复杂的语法，你就能快速构建出有逻辑、有结构的程序。从零基础出发，只要愿意动手实践，你也能写出优雅、可扩展的代码。现在，就从定义你的第一个对象开始吧！