Preface: recently look at JS object related things, see inheritance that, want to inherit after all what use, search, search the following this story, and then sudden whim, thinking can use JS to achieve it, and then have the following this article, personally feel that this article is heavy in inspiration.

What is the idea of object-oriented Programming?

Note: the object – oriented JS code in this article is not based on object – oriented programming, but using object – oriented ideas. If there are mistakes in the article or write bad places, please correct the boss, the code is not perfect, the boss can also do an old and a right, and then look back at their daily writing code is the role of the old or a right or other roles.

1. Competition background

In a software village

There is a senior “process oriented” programmer — older

And an object oriented believer — Ah yes

He was also employed in a kick shop

One day the boss had an idea

It was decided to put the two programmers in a contest

The winner will receive a limited number of

360 degree automatic massage chair

The programming contest began

2. Start the race with JS

1. Round 1 (Requirement 1)

Preview: Round one: A trial run.

The old a

// Process oriented JS is too old

// 1
// Generate the price of the goods purchased according to the unit price and quantity of the goods purchased by the customer
// The number of items purchased by the guest
let goodsAmount = {
    'Instant noodles': 5.'火腿肠': 10.'toothbrush': 2.'paper': 10
}
// The unit price of the customer's purchase, assuming that all the unit prices exist
let goodsPrice = {
    'Instant noodles': 3.'火腿肠': 2.'toothbrush': 3.'paper': 6
}
// Ask the customer to buy the total price of the function
function totalPrice() {
    let totalPrice = Object.keys(goodsAmount).reduce((acc, cur) = > {
        return acc += goodsPrice[cur] * goodsAmount[cur]
    }, 0);
    return totalPrice;
}
Copy the code

To o

// Object oriented idea JS a pair

// 1
// Generate the price of the goods purchased according to the unit price and quantity of the goods purchased by the customer
// The number of items purchased by the guest
let goodsAmount = {
    'Instant noodles': 5.'火腿肠': 10.'toothbrush': 2.'paper': 10
}
// The unit price of all goods purchased by the customer is available
let goodsPrice = {
    'Instant noodles': 3.'火腿肠': 2.'toothbrush': 3.'paper': 6
}
// Ask the customer to buy the total price of the function
function totalPrice() {
    let totalPrice = Object.keys(goodsAmount).reduce((acc, cur) = > {
        return acc += goodsPrice[cur] * goodsAmount[cur]
    }, 0);
    return totalPrice;
}
Copy the code

The first round of the old and actually wrote the same code, it seems to be the same training class ah, the division out of the same door.

2. Round 2 (Demand 2)

Preview: Round two, to see who can win.

The old a

The old smile, quickly add a judgment in the previous code, then complete the boss’s demand, snap, soon ah.

// Process oriented JS is too old

// 1
// Generate the price of the goods purchased according to the unit price and quantity of the goods purchased by the customer
// The number of items purchased by the guest
let goodsAmount = {
    'Instant noodles': 5.'火腿肠': 10.'toothbrush': 2.'paper': 10
}
// The unit price of the customer's purchase, assuming that all the unit prices exist
let goodsPrice = {
    'Instant noodles': 3.'火腿肠': 2.'toothbrush': 3.'paper': 6
}
// Ask the customer to buy the total price of the function
function totalPrice() {
    let totalPrice = Object.keys(goodsAmount).reduce((acc, cur) = > {
        return acc += goodsPrice[cur] * goodsAmount[cur]
    }, 0);
    // Suppose qixi Festival falls on January 1 in the Gregorian calendar
    // Since the lunar calendar is difficult to calculate, here is a new definition of Qixi Festival
    if (getCurrentDate() === '1/1') {
        totalPrice = totalPrice * 0.77
    }
    return totalPrice;
}

// The following are auxiliary methods
// Get the current date method
function getCurrentDate() {
    let date = new Date(a);return (date.getMonth() + 1) + '/' + date.getDate()
}
Copy the code

To o

A frown to discover the problem is not simple, the boss this old boy always do not speak the martial arts, all kinds of new needs, it seems that I have to guard point.

// Object oriented idea JS a pair

// 1
// Generate the price of the goods purchased according to the unit price and quantity of the goods purchased by the customer
// The number of items purchased by the guest
let goodsAmount = {
    'Instant noodles': 5.'火腿肠': 10.'toothbrush': 2.'paper': 10
}
// The unit price of all goods purchased by the customer is available
let goodsPrice = {
    'Instant noodles': 3.'火腿肠': 2.'toothbrush': 3.'paper': 6
}
// Ask the customer to buy the total price of the function
function totalPrice() {
    let totalPrice = Object.keys(goodsAmount).reduce((acc, cur) = > {
        return acc += goodsPrice[cur] * goodsAmount[cur]
    }, 0);
    // Requirement 2: call the function of the activity with 77 percent off on Chinese Valentine's Day
    totalPrice = tanabata(totalPrice);
    return totalPrice;
}
// Demand 2: a function that deals with the activity of 77 percent off on Chinese Valentine's Day
function tanabata(price) {
    if (getCurrentDate() === '1/1') {
        price = price * 0.77
    }
    return price;
}
// The following are auxiliary methods
// Get the current date method
function getCurrentDate() {
    let date = new Date(a);return (date.getMonth() + 1) + '/' + date.getDate()
}
Copy the code

Old:

At the end of the second round, The old man was a little better, and the old man was already dreaming of a comfortable future in a massage chair. However, the boss thought: If you can take away the automatic massage chair so simply, then my boss would have lost the bus, too young too simple.

3. Round 3 (Demand 3)

Preview: the third round, to see if a can turn the tide, change the decline, let’s wait and see.

The old a

Old after hearing the new demand, frowning, found that the boss is not simple, backhand in the group to ridicule.

Ridicule to ridicule

For the massage chair

Just keep going

// Process oriented JS is too old

// 1
// Generate the price of the goods purchased according to the unit price and quantity of the goods purchased by the customer
// The number of items purchased by the guest
let goodsAmount = {
    'Instant noodles': 5.'火腿肠': 10.'toothbrush': 2.'paper': 10
}
// The unit price of the customer's purchase, assuming that all the unit prices exist
let goodsPrice = {
    'Instant noodles': 3.'火腿肠': 2.'toothbrush': 3.'paper': 6
}
// Ask the customer to buy the total price of the function
function totalPrice() {
    let totalPrice = Object.keys(goodsAmount).reduce((acc, cur) = > {
        return acc += goodsPrice[cur] * goodsAmount[cur]
    }, 0);
    // Suppose qixi Festival falls on January 1 in the Gregorian calendar
    // Since the lunar calendar is difficult to calculate, here is a new definition of Qixi Festival
    if (getCurrentDate() === '1/1') {
        totalPrice = totalPrice * 0.77
    } else if (getCurrentDate() === 'half' && totalPrice >= 399) {
        // Handle the mid - Autumn festival full decrease judgment
        // Suppose the Mid-Autumn Festival falls on January 2 in the Gregorian calendar
        // Since the lunar calendar is difficult to calculate, let's redefine the Mid-Autumn Festival
        totalPrice -= 100;
    } else if (getCurrentDate() === 'one third' && totalPrice <= 100 && randomNum(0.9) = = =0) {
        // Handling the National Day random free order
        // Suppose the National Day is January 3 in the Gregorian calendar
        // Since the lunar calendar is difficult to calculate, let's redefine National Day
        totalPrice = 0
    }
    return totalPrice;
}

// The following are auxiliary methods
// Get the current date method
function getCurrentDate() {
    let date = new Date(a);return (date.getMonth() + 1) + '/' + date.getDate()
}
// Generate random numbers from minNum to 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; }}Copy the code

Look at more and more complex totalPrice functions

He knew it was far from over

Sure enough, the boss’s massage chair is white whoring can’t

The Mid-Autumn Festival and National Day

Who knows what else the boss might want, whether it’s adding or removing code, it’s not very pleasant to make changes in this overly judgements function. To find a change in a very long function, being “procedure oriented” makes it easier than having to go through a lot of code that is irrelevant to the change, carefully making changes, and then repeatedly checking that they don’t affect the rest of the function.

I pray in my heart that this function no longer needs to be modified

To o

To see the new needs of the boss, a smile, as expected not out of my expected, the boss this old boy did not speak of martial art, fortunately, I am also prepared.

// Object oriented idea JS a pair

// 1
// Generate the price of the goods purchased according to the unit price and quantity of the goods purchased by the customer
// The number of items purchased by the guest
let goodsAmount = {
    'Instant noodles': 5.'火腿肠': 10.'toothbrush': 2.'paper': 10
}
// The unit price of all goods purchased by the customer is available
let goodsPrice = {
    'Instant noodles': 3.'火腿肠': 2.'toothbrush': 3.'paper': 6
}
// Ask the customer to buy the total price of the function
function totalPrice() {
    let totalPrice = Object.keys(goodsAmount).reduce((acc, cur) = > {
        return acc += goodsPrice[cur] * goodsAmount[cur]
    }, 0);
    // Requirement 2: call the function of the activity with 77 percent off on Chinese Valentine's Day
    totalPrice = tanabata(totalPrice);
    // Requirement 3: call the function of Mid-Autumn Festival and National Day activities
    totalPrice = moonFestival(totalPrice);
    totalPrice = nationalDay(totalPrice);
    return totalPrice;
}
// Demand 2: a function that deals with the activity of 77 percent off on Chinese Valentine's Day
function tanabata(price) {
    if (getCurrentDate() === '1/1') {
        price = price * 0.77
    }
    return price;
}
// Requirement 3: a function to handle the Mid-Autumn festival
function moonFestival(price) {
    if (getCurrentDate() === 'half' && price >= 399) {
        price -= 100;
    }
    return price;
}
// The National Day random free order function
function nationalDay(price) {
    if (getCurrentDate() === 'one third' && price <= 100 && randomNum(0.9) = = =0) {
        price = 0;
    }
    return price;
}
// The following are auxiliary methods
// Get the current date method
function getCurrentDate() {
    let date = new Date(a);return (date.getMonth() + 1) + '/' + date.getDate()
}
// Generate random numbers from minNum to 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; }}Copy the code

One of my favorite things about object orientation is that

By the end of the third round, The old man was getting a little tired of dealing with the new demands, and a little bit more confident.

Round 4 (Demand 4)

Preview: in the fourth round, a and a began to fight the top of the Bauhinia, to see who can mount the massage chair throne, the game into the white-hot stage.

The old a

// Process oriented JS is too old

// 1
// Generate the price of the goods purchased according to the unit price and quantity of the goods purchased by the customer
// The number of items purchased by the guest
let goodsAmount = {
    'Instant noodles': 5.'火腿肠': 10.'toothbrush': 2.'paper': 10
}
// The unit price of the customer's purchase, assuming that all the unit prices exist
let goodsPrice = {
    'Instant noodles': 3.'火腿肠': 2.'toothbrush': 3.'paper': 6
}
// Whether the guest is a couple
let customerCouple = true;
// Guests receive gifts
let gifts = ['flowers'.'Chocolate'.'$9.9 Coupon'];
let prize = 'No gifts';
// Ask the customer to buy the total price of the function
function totalPrice() {
    let totalPrice = Object.keys(goodsAmount).reduce((acc, cur) = > {
        return acc += goodsPrice[cur] * goodsAmount[cur]
    }, 0);
    // Suppose qixi Festival falls on January 1 in the Gregorian calendar
    // Since the lunar calendar is difficult to calculate, here is a new definition of Qixi Festival
    if (getCurrentDate() === '1/1' && customerCouple) {
        if (totalPrice >= 99) {
            prize = gifts[randomNum(0.2)];
        }
        totalPrice = totalPrice * 0.77
    } else if (getCurrentDate() === 'half' && totalPrice >= 399) {
        // Handle the mid - Autumn festival full decrease judgment
        // Suppose the Mid-Autumn Festival falls on January 2 in the Gregorian calendar
        // Since the lunar calendar is difficult to calculate, let's redefine the Mid-Autumn Festival
        totalPrice -= 100;
    } else if (getCurrentDate() === 'one third' && totalPrice <= 100 && randomNum(0.9) = = =0) {
        // Handling the National Day random free order
        // Suppose the National Day is January 3 in the Gregorian calendar
        // Since the lunar calendar is difficult to calculate, let's redefine National Day
        totalPrice = 0
    }
    return totalPrice;
}

// The following are auxiliary methods
// Get the current date method
function getCurrentDate() {
    let date = new Date(a);return (date.getMonth() + 1) + '/' + date.getDate()
}
// Generate random numbers from minNum to 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; }}Copy the code

Old and modified the Tanabata to determine the relevant code, completed the requirements, but when this is a head ah, sooner or later write hundreds of lines of totalPrice function.

To o

Full of energy, dry over, massage chair is not my amright.

// Object oriented idea JS a pair

// 1
// Generate the price of the goods purchased according to the unit price and quantity of the goods purchased by the customer
// The number of items purchased by the guest
let goodsAmount = {
    'Instant noodles': 5.'火腿肠': 10.'toothbrush': 2.'paper': 10
}
// The unit price of all goods purchased by the customer is available
let goodsPrice = {
    'Instant noodles': 3.'火腿肠': 2.'toothbrush': 3.'paper': 6
}
// Whether the guest is a couple
let customerCouple = true;
// Guests receive gifts
let gifts = ['flowers'.'Chocolate'.'$9.9 Coupon'];
let prize = 'No gifts';
// Ask the customer to buy the total price of the function
function totalPrice() {
    let totalPrice = Object.keys(goodsAmount).reduce((acc, cur) = > {
        return acc += goodsPrice[cur] * goodsAmount[cur]
    }, 0);
    // Requirement 2: call the function of the activity with 77 percent off on Chinese Valentine's Day
    totalPrice = tanabata(totalPrice);
    // Requirement 3: call the function of Mid-Autumn Festival and National Day activities
    totalPrice = moonFestival(totalPrice);
    totalPrice = nationalDay(totalPrice);
    return totalPrice;
}
// Demand 2: a function that deals with the activity of 77 percent off on Chinese Valentine's Day
function tanabata(price) {
    if (getCurrentDate() === '1/1') {
        price = price * 0.77
    }
    return price;
}
// Requirement 3: a function to handle the Mid-Autumn festival
function moonFestival(price) {
    if (getCurrentDate() === 'half' && price >= 399) {
        price -= 100;
    }
    return price;
}
// The National Day random free order function
function nationalDay(price) {
    if (getCurrentDate() === 'one third' && price <= 100 && randomNum(0.9) = = =0) {
        price = 0;
    }
    return price;
}
// Demand 4: Chinese Valentine's Day activity change
// Rewrite the function of Tanabata activity without changing the previous code
function tanabata(price) {
    if (getCurrentDate() === '1/1' && customerCouple) {
        if (price >= 99) {
            prize = gifts[randomNum(0.2)]
        }
        price = price * 0.77
    }
    return price;
}
// The following are auxiliary methods
// Get the current date method
function getCurrentDate() {
    let date = new Date(a);return (date.getMonth() + 1) + '/' + date.getDate()
}
// Generate random numbers from minNum to 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; }}Copy the code

When the boss finished looking at the old and a pair of code

Excited to come up with new requirements again

Old pass fainted in the past…… immediately

The game was so intense

3. The finale

A pair of code, or do not do good at calculating boss ah, ah to mutter: careless, no flash, the boss’s silly son stole attack, from the programming industry has also derived the idea of CV programming, a also created a named for CV programming world first group, exchange daily CV experience.

Who won the prize?

Third contestant

The boss’s stupid son

He can’t program at all

But he uses Ctrl+C, Ctrl+V

I made a deep copy of a pair’s code.

4. The harvest

Usual year-end summary to say what this year what harvest, then read this article you have what harvest? Daily knock code are you old and a right? Or is anyone really the stupid son of the boss 😂😂😂😂😂? There is a saying that I usually type the code is basically a combination of older than + boss silly son, so IT is better to be the boss, do not type the code 🤔🤔🤔🤔🤔, what do you think?

Finished!