前言：最近在看JS对象相关的东西，看到继承那，想继承到底有什么用，就搜了一下，搜到了下面这个故事，然后突发奇想，想着能不能用JS实现一下呢，然后就有了下面这篇文章，个人觉得这篇文章重在启发。
需求故事参考链接：什么是面向对象编程思想？
附注：文中面向对象的JS代码并不是基于面向对象编程，只是用了面向对象的思想。如果文中有错误或者写的不好的地方，还请各位大佬指正，代码写的并不完美，大佬们也可以做一次老过和阿对，再回过头来看看自己日常写代码是老过的角色还是阿对的角色还是另外其它的角色。
1.比赛背景
在一个软件村里
有一名资深「面向过程」程序员——老过
和一名「面向对象」信徒——阿对
同时受雇于一家挨踢店
有一天老板突发奇想
决定让这两名程序员进行一次比赛
获胜者将获得一个限量的
360 度全自动按摩椅
编程比赛开始了
2.使用JS开始比赛
1.第一回合（需求1）
预告：第一回合，小试牛刀。
老过
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
// 面向过程思想 JS老过
// 1.需求1
// 根据客人购买的商品单价和数量生成所购商品的价格
// 客人购买商品的数量
let goodsAmount = {
'方便面': 5,
'火腿肠': 10,
'牙刷': 2,
'纸巾': 10
}
// 客人购买商品的单价，假设所有商品单价都是存在的
let goodsPrice = {
'方便面': 3,
'火腿肠': 2,
'牙刷': 3,
'纸巾': 6
}
// 求客人购买商品总价的函数
function totalPrice() {
let totalPrice = Object.keys(goodsAmount).reduce((acc, cur) => {
return acc += goodsPrice[cur] * goodsAmount[cur]
}, 0);
return totalPrice;
}
|
阿对
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
// 面向对象思想 JS阿对
// 1.需求1
// 根据客人购买的商品单价和数量生成所购商品的价格
// 客人购买商品的数量
let goodsAmount = {
'方便面': 5,
'火腿肠': 10,
'牙刷': 2,
'纸巾': 10
}
// 客人购买商品的单价，所有商品单价都是存在的
let goodsPrice = {
'方便面': 3,
'火腿肠': 2,
'牙刷': 3,
'纸巾': 6
}
// 求客人购买商品总价的函数
function totalPrice() {
let totalPrice = Object.keys(goodsAmount).reduce((acc, cur) => {
return acc += goodsPrice[cur] * goodsAmount[cur]
}, 0);
return totalPrice;
}
|
第一回合老过和阿对竟然写出了一模一样的代码，看来是同一个培训班出身啊，师出同门啊。
2.第二回合（需求2）
预告：第二回合，看谁能更胜一筹。
老过
老过微微一笑，很快在之前的代码上加了一个判断，便完成了老板的需求，啪一下，很快啊。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
// 面向过程思想 JS老过
// 1.需求1
// 根据客人购买的商品单价和数量生成所购商品的价格
// 客人购买商品的数量
let goodsAmount = {
'方便面': 5,
'火腿肠': 10,
'牙刷': 2,
'纸巾': 10
}
// 客人购买商品的单价，假设所有商品单价都是存在的
let goodsPrice = {
'方便面': 3,
'火腿肠': 2,
'牙刷': 3,
'纸巾': 6
}
// 求客人购买商品总价的函数
function totalPrice() {
let totalPrice = Object.keys(goodsAmount).reduce((acc, cur) => {
return acc += goodsPrice[cur] * goodsAmount[cur]
}, 0);
// 假设七夕节是阳历的1月1日啊
// 因为农历不好算，这里重新定义一下七夕节
if (getCurrentDate() === '1/1') {
totalPrice = totalPrice * 0.77
}
return totalPrice;
}
// 以下均为辅助方法
// 获取当前日期方法
function getCurrentDate() {
let date = new Date();
return (date.getMonth() + 1) + '/' + date.getDate()
}
|
阿对
阿对眉头一皱发现问题并不简单，老板这老小子一向不讲武德，各种新需求，看来我得防着点。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
// 面向对象思想 JS阿对
// 1.需求1
// 根据客人购买的商品单价和数量生成所购商品的价格
// 客人购买商品的数量
let goodsAmount = {
'方便面': 5,
'火腿肠': 10,
'牙刷': 2,
'纸巾': 10
}
// 客人购买商品的单价，所有商品单价都是存在的
let goodsPrice = {
'方便面': 3,
'火腿肠': 2,
'牙刷': 3,
'纸巾': 6
}
// 求客人购买商品总价的函数
function totalPrice() {
let totalPrice = Object.keys(goodsAmount).reduce((acc, cur) => {
return acc += goodsPrice[cur] * goodsAmount[cur]
}, 0);
// 需求2：调用七夕打77折活动的函数
totalPrice = tanabata(totalPrice);
return totalPrice;
}
// 需求2：处理七夕打77折活动的函数
function tanabata(price) {
if (getCurrentDate() === '1/1') {
price = price * 0.77
}
return price;
}
// 以下均为辅助方法
// 获取当前日期方法
function getCurrentDate() {
let date = new Date();
return (date.getMonth() + 1) + '/' + date.getDate()
}
|
老过：
第二回合结束，老过小胜一筹，老过已经开始幻想自己将来，坐在按摩椅上的舒服日子了。然而此时老板的内心：这么简单就能让你们拿走自动按摩椅，那我这老板早就亏的坐公交车了，年轻人，too young too simple。
3.第三回合（需求3）
预告：第三回合，看阿对是否能扭转乾坤，一改颓势呢，让我们拭目以待。
老过
老过听到新需求后，眉头一皱，发现老板果然不简单，反手在群里吐槽起来。
吐槽归吐槽
为了按摩椅
只能继续干了
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
// 面向过程思想 JS老过
// 1.需求1
// 根据客人购买的商品单价和数量生成所购商品的价格
// 客人购买商品的数量
let goodsAmount = {
'方便面': 5,
'火腿肠': 10,
'牙刷': 2,
'纸巾': 10
}
// 客人购买商品的单价，假设所有商品单价都是存在的
let goodsPrice = {
'方便面': 3,
'火腿肠': 2,
'牙刷': 3,
'纸巾': 6
}
// 求客人购买商品总价的函数
function totalPrice() {
let totalPrice = Object.keys(goodsAmount).reduce((acc, cur) => {
return acc += goodsPrice[cur] * goodsAmount[cur]
}, 0);
// 假设七夕节是阳历的1月1日啊
// 因为农历不好算，这里重新定义一下七夕节
if (getCurrentDate() === '1/1') {
totalPrice = totalPrice * 0.77
} else if (getCurrentDate() === '1/2' && totalPrice >= 399) {
// 处理中秋节满减的判断
// 假设中秋节为阳历的1月2日啊
// 因为农历不好算，这里重新定义一下中秋节
totalPrice -= 100;
} else if (getCurrentDate() === '1/3' && totalPrice <= 100 && randomNum(0, 9) === 0) {
// 处理国庆节随机免单
// 假设国庆节为阳历的1月3日啊
// 因为农历不好算，这里重新定义一下国庆节
totalPrice = 0
}
return totalPrice;
}
// 以下均为辅助方法
// 获取当前日期方法
function getCurrentDate() {
let date = new Date();
return (date.getMonth() + 1) + '/' + date.getDate()
}
//生成从minNum到maxNum的随机数
function randomNum(minNum, maxNum) {
switch (arguments.length) {
case 1:
return parseInt(Math.random() * minNum + 1, 10);
break;
case 2:
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
break;
default:
return 0;
break;
}
}
|
看着越来越复杂的 totalPrice 函数
老过眉头紧锁他深知事情远没有结束
果然老板的按摩椅是白嫖不了的
中秋和国庆一过
天知道老板还会再提什么天马行空的需求，无论是新增或删除代码，在这个判断过多的函数里修改都是件不太愉快的事。为了在一个很长的函数中找到需要修改的位置，「面向过程」使得老过不得不浏览大量与修改无关的代码，小心翼翼地修改后，又要反复确认不会影响其他部分。
老过在心底里默默地祈祷这个函数不再需要修改
阿对
阿对看到老板的新需求，微微一笑，果然不出我所料，老板这老小子果然不讲武德，幸好我阿对也是有备而来。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
// 面向对象思想 JS阿对
// 1.需求1
// 根据客人购买的商品单价和数量生成所购商品的价格
// 客人购买商品的数量
let goodsAmount = {
'方便面': 5,
'火腿肠': 10,
'牙刷': 2,
'纸巾': 10
}
// 客人购买商品的单价，所有商品单价都是存在的
let goodsPrice = {
'方便面': 3,
'火腿肠': 2,
'牙刷': 3,
'纸巾': 6
}
// 求客人购买商品总价的函数
function totalPrice() {
let totalPrice = Object.keys(goodsAmount).reduce((acc, cur) => {
return acc += goodsPrice[cur] * goodsAmount[cur]
}, 0);
// 需求2：调用七夕打77折活动的函数
totalPrice = tanabata(totalPrice);
// 需求3：调用中秋节国庆节活动的函数
totalPrice = moonFestival(totalPrice);
totalPrice = nationalDay(totalPrice);
return totalPrice;
}
// 需求2：处理七夕打77折活动的函数
function tanabata(price) {
if (getCurrentDate() === '1/1') {
price = price * 0.77
}
return price;
}
// 需求3：处理中秋节满减的函数
function moonFestival(price) {
if (getCurrentDate() === '1/2' && price >= 399) {
price -= 100;
}
return price;
}
// 处理国庆节随机免单的函数
function nationalDay(price) {
if (getCurrentDate() === '1/3' && price <= 100 && randomNum(0, 9) === 0) {
price = 0;
}
return price;
}
// 以下均为辅助方法
// 获取当前日期方法
function getCurrentDate() {
let date = new Date();
return (date.getMonth() + 1) + '/' + date.getDate()
}
//生成从minNum到maxNum的随机数
function randomNum(minNum, maxNum) {
switch (arguments.length) {
case 1:
return parseInt(Math.random() * minNum + 1, 10);
break;
case 2:
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
break;
default:
return 0;
break;
}
}
|
「面向对象」让阿对最喜欢的一点是
第三回合结束，老过开始有点疲于应对新的需求了，而阿对却慢慢的开始胸有成竹了。
第四回合（需求4）
预告：第四回合，阿过与阿对开始决战紫荆之巅，看谁能登上按摩椅宝座，比赛进入白热化阶段。
老过
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
// 面向过程思想 JS老过
// 1.需求1
// 根据客人购买的商品单价和数量生成所购商品的价格
// 客人购买商品的数量
let goodsAmount = {
'方便面': 5,
'火腿肠': 10,
'牙刷': 2,
'纸巾': 10
}
// 客人购买商品的单价，假设所有商品单价都是存在的
let goodsPrice = {
'方便面': 3,
'火腿肠': 2,
'牙刷': 3,
'纸巾': 6
}
// 客人是否为情侣
let customerCouple = true;
// 客人获得的礼品
let gifts = ['鲜花', '巧克力', '9.9元抵扣券'];
let prize = '无礼品';
// 求客人购买商品总价的函数
function totalPrice() {
let totalPrice = Object.keys(goodsAmount).reduce((acc, cur) => {
return acc += goodsPrice[cur] * goodsAmount[cur]
}, 0);
// 假设七夕节是阳历的1月1日啊
// 因为农历不好算，这里重新定义一下七夕节
if (getCurrentDate() === '1/1' && customerCouple) {
if (totalPrice >= 99) {
prize = gifts[randomNum(0, 2)];
}
totalPrice = totalPrice * 0.77
} else if (getCurrentDate() === '1/2' && totalPrice >= 399) {
// 处理中秋节满减的判断
// 假设中秋节为阳历的1月2日啊
// 因为农历不好算，这里重新定义一下中秋节
totalPrice -= 100;
} else if (getCurrentDate() === '1/3' && totalPrice <= 100 && randomNum(0, 9) === 0) {
// 处理国庆节随机免单
// 假设国庆节为阳历的1月3日啊
// 因为农历不好算，这里重新定义一下国庆节
totalPrice = 0
}
return totalPrice;
}
// 以下均为辅助方法
// 获取当前日期方法
function getCurrentDate() {
let date = new Date();
return (date.getMonth() + 1) + '/' + date.getDate()
}
//生成从minNum到maxNum的随机数
function randomNum(minNum, maxNum) {
switch (arguments.length) {
case 1:
return parseInt(Math.random() * minNum + 1, 10);
break;
case 2:
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
break;
default:
return 0;
break;
}
}
|
老过又修改了一下七夕节判断相关的代码，完成了需求，但是这什么时候是个头啊，迟早写出好几百行的 totalPrice 函数。
阿对
活力满满，干就完了，按摩椅岂不是非我阿对莫属了。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
// 面向对象思想 JS阿对
// 1.需求1
// 根据客人购买的商品单价和数量生成所购商品的价格
// 客人购买商品的数量
let goodsAmount = {
'方便面': 5,
'火腿肠': 10,
'牙刷': 2,
'纸巾': 10
}
// 客人购买商品的单价，所有商品单价都是存在的
let goodsPrice = {
'方便面': 3,
'火腿肠': 2,
'牙刷': 3,
'纸巾': 6
}
// 客人是否为情侣
let customerCouple = true;
// 客人获得的礼品
let gifts = ['鲜花', '巧克力', '9.9元抵扣券'];
let prize = '无礼品';
// 求客人购买商品总价的函数
function totalPrice() {
let totalPrice = Object.keys(goodsAmount).reduce((acc, cur) => {
return acc += goodsPrice[cur] * goodsAmount[cur]
}, 0);
// 需求2：调用七夕打77折活动的函数
totalPrice = tanabata(totalPrice);
// 需求3：调用中秋节国庆节活动的函数
totalPrice = moonFestival(totalPrice);
totalPrice = nationalDay(totalPrice);
return totalPrice;
}
// 需求2：处理七夕打77折活动的函数
function tanabata(price) {
if (getCurrentDate() === '1/1') {
price = price * 0.77
}
return price;
}
// 需求3：处理中秋节满减的函数
function moonFestival(price) {
if (getCurrentDate() === '1/2' && price >= 399) {
price -= 100;
}
return price;
}
// 处理国庆节随机免单的函数
function nationalDay(price) {
if (getCurrentDate() === '1/3' && price <= 100 && randomNum(0, 9) === 0) {
price = 0;
}
return price;
}
// 需求4：七夕节活动更改
// 不动以前的代码，重写七夕节活动的函数
function tanabata(price) {
if (getCurrentDate() === '1/1' && customerCouple) {
if (price >= 99) {
prize = gifts[randomNum(0, 2)]
}
price = price * 0.77
}
return price;
}
// 以下均为辅助方法
// 获取当前日期方法
function getCurrentDate() {
let date = new Date();
return (date.getMonth() + 1) + '/' + date.getDate()
}
//生成从minNum到maxNum的随机数
function randomNum(minNum, maxNum) {
switch (arguments.length) {
case 1:
return parseInt(Math.random() * minNum + 1, 10);
break;
case 2:
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
break;
default:
return 0;
break;
}
}
|
当老板看完老过和阿对的代码后
再次兴奋地提出新需求时
老过顿时晕了过去……
比赛真是太焦灼了
3.大结局
一对敲代码的难兄难弟，还是干不过精于算计的老板啊，阿对嘀咕道：大意了，没有闪，被老板的傻儿子偷袭了，从此编程界也衍生出了面向CV编程的思想，阿对也创建了一个名为面向 CV 编程天下第一的群，交流日常CV心得。
最后赢得奖励的是？
第三个参赛者
老板的傻儿子
他完全不会写程序
但他使用 Ctrl+C，Ctrl+V
对阿对的代码做了一个深拷贝。
4.收获
平常年终总结都要说什么今年有什么收获，那看完这篇文章你有什么收获呢？日常敲代码的你是否就是老过和阿对呢？又或者说不会真有人是老板的傻儿子吧（手动滑稽）😂😂😂😂😂？有一说一，我平常敲代码基本上是老过+老板傻儿子的结合体，所以说还是当老板好，不用敲代码🤔🤔🤔🤔🤔，你们说呢？
完！