前言

故事开始于一个安静的小镇，名叫南康。在这个小镇上，有一个年轻的男孩，名叫小王。他是镇上的一个引人注目的人物，不仅因为他的帅气，还因为他对每个人都友好。小王是个心地善良、热爱生活的年轻人，他在江财读书，同时也是一个对生活充满憧憬的青年。

javascript
复制代码

// 定义了一个名为 xw 的对象，代表小王
const xw = {
  name: '小王', // 小王的姓名
  age: 20, // 小王的年龄，数值类型，简单数据类型
  school: '江财', // 小王就读的学校
  hometown: '南康', // 小王的家乡
  isSingle: false, // 小王的感情状态，布尔值，表示是否单身
  // 定义了一个名为 sendFlower 的函数，用于送花
  sendFlower: function (receiver) {
    receiver && receiver.receiverFlower(xw); // 若存在接收者，则调用接收者的 receiverFlower 方法，并传入小王对象
  },
  hobbies: ['刷剧', '看小说'], // 小王的爱好，是一个数组，引用数据类型
  girlFriend: null, // 小王的女朋友，初始值为 null
  city: undefined // 小王所在城市，未赋值，值为 undefined
};

• 首先我们通过小王对象可以学到哪些东西呢，我们可以了解到js的基本数据类型，字符串型，数值型，布尔型，空类型(表明已定义已赋值但是为空)，未定义型（表示已定义未赋值）。
• 还有复杂数据类型，也叫引用数据类型，对象本身，数组，方法都是此类。

小王的暗恋对象

在他的朋友圈中，有一个特别要好的女孩，名叫小美。小美是一个温柔而又机智的女孩，她和小王一样，对生活充满了热情。他们两个常常一起刷剧、看小说，分享彼此的生活点滴。

javascript
复制代码

// 定义了一个名为 xm 的对象，代表小美
const xm = {
  name: '小美', // 小美的姓名
  xq: 20, // 小美的心情指数，数值类型，表示她的心情状态
  hometown: '南康', // 小美的家乡
  // 定义了一个名为 receiverFlower 的函数，用于接收鲜花并作出相应的反应
  receiverFlower: function (sender) {
    // 打印小美收到鲜花的消息，包括发送者的姓名
    console.log(`${this.name}收到${sender.name}鲜花`);
    // 判断小美的心情指数是否小于 80
    if (this.xq < 80) {
      console.log('我想你还是算了吧'); // 若小美的心情指数小于 80，则打印一条消息
    } else {
      console.log('万达走一波'); // 若小美的心情指数大于等于 80，则打印一条消息
    }
  }
};

• 小美是小王同学的暗恋对象，除了和小王同学相同的基本类型之外，最复杂的就是在小红对象里的方法，是收到花儿的方法，我们在这里把小王同学的送花和这个收花动作一起讲，首先作为送花者的小王，肯定怕传入一个空的参数，为了防止报错，特地用js里的 && 符号 来保证（只要前面为空后面就不进行），收花者将收不到花。
• 关于小美同学的收花函数，一样首先接受一个送花者参数，然后打印收到了谁送的花，这里用的是this，在对象里的函数里的this指向对象本身。此外我们还设置了小美的心情属性，根据心情的不同来做出不同的反应。这里我们可以看得出小美的心情还是不太好的。那就得引出她的好朋友，中间者小红了。

中间者小红

小红的过渡作用是在代码中充当了一个接收鲜花并作出相应反应的角色。她拥有一个名为 receiverFlower 的函数，当收到鲜花时会执行该函数，并将送花者对象作为参数传入。在函数内部，她调用了小美对象 xm 的 receiverFlower 方法，并将送花者对象作为参数传入，以模拟小美收到鲜花后的反应。

javascript
复制代码

// 定义了一个名为 xh 的对象，代表小红
const xh = {
  name: '小红', // 小红的姓名
  hometown: '南康', // 小红的家乡
  // 实现了和小美一样的接口，用于接收鲜花并作出相应的反应
  receiverFlower: function (sender) {
    // 打印收到鲜花的消息，包括发送者的姓名
    console.log(`${this.name}收到${sender.name}鲜花`);
    // 调用小美对象的 receiverFlower 方法，并传入发送者对象作为参数
    xm.receiverFlower(sender);
  }
};

• 小美送花，收到鲜花后，再送给小红，大大增加了小王同学成功的概率。

执行送花

在
复制代码

setTimeout(function () {
  // 将小美的心情指数设为 99
  xm.xq = 99;
  // 调用小王对象的 sendFlower 方法，传入小红对象作为接收者
  xw.sendFlower(xh);
}, 2000);

• 这段代码是最后送花的代码，我们首先设置一个定时器，然后小美和小红做了很多的开导和思想工作（2秒钟），将小美心情变好（90）,最后告诉小王同学，可以送花啦！这个时候我们注意看三个对象的送花收花函数之间的函数参数传递，首先小王送花给小红，小红收到小王的花，然后给小美，最终小美收到，心情也很好，开开心心地和小王出去玩啦。

代码运行结果

总结

• 这是一个小王同学的励志爱情故事，了解了这个故事，我们可以从中学到很多js的基础语法，
  1. 基本数据类型，引用数据类型
  2. 函数里的this指针指向
  3. 定时器的基本用法
  4. 逻辑运算符的妙用
• 此外，除了基础编程知识外，还可以发现良好代码必须具有的风格
  1. js每行末尾要么都加分号，要么都不加
  2. 勤写注释，方便自己和他人理解
  3. 考虑情况周全，增强程序的健壮性（如考虑函数中可能传入空参）

那么，带上好习惯一起踏上js的学习之旅吧！

我不是一个伟大的程序员，我只是一个具有良好习惯的优秀程序员。 ---Kent Beck(极限编程创始者之一)

源文：蕴藏在JS里的爱意，通过爱情故事轻松学会JS基础

如有侵权请联系站点删除！