Evolution of JavaScript: From Prototype Methods to Async/Await and Modern Features

JavaScript has undergone significant evolution, adding many features that transform it from a simple scripting language into a robust platform for modern web development.

Early extensions like Prototype.js enriched prototype methods, and later ES6 introduced class syntax and standardized modules, while the ecosystem also adopted various module loaders such as AMD, CMD, CommonJS, UMD, and native ES6 modules.

Asynchronous programming progressed from plain callbacks to Promise, async/await, and generator functions, enabling code that looks synchronous while handling asynchronous operations. The article provides examples of Promise creation, chaining, error handling, and converting generator functions into async flows.

Modern JavaScript also added block‑scoped declarations (let, const), new primitive types (Symbol, BigInt), reflection APIs (Reflect, Proxy), and a host of syntactic sugar such as object shorthand, spread operator, arrow functions, for…of loops, numeric separators, template literals, exponentiation (**), optional chaining (?.), nullish coalescing (??), and default parameters.

Key code examples:

var p = new Promise(function(resolve, reject) {
    console.log("========");
    setTimeout(function() {
        resolve(1);
    }, 300);
    setTimeout(function() {
        reject(1);
    }, 400);
});
console.log("这个先执行");
p.then(function(result) {
    console.log("成功：" + result);
}).catch(function(reason) {
    console.log("失败：" + reason);
}).finally(function() {
    console.log("总会执行");
});

async function addTask() {
    await new Promise(function(resolve) {
        setTimeout(function() {
            console.log("111");
            resolve();
        }, 200);
    });
    console.log('222');
    await new Promise(function(resolve) {
        setTimeout(function() {
            console.log("333");
            resolve();
        }, 200);
    });
    console.log('444');
}
var p = addTask();
console.log(p);

function Person(name) {
    this.name = name;
}
Person.prototype.sayName = function() {
    return this.name;
};
var p = new Person('ruby');
console.log(p.sayName()); // ruby

class Person {
    constructor(name) {
        this.name = name;
    }
    sayName() {
        return this.name;
    }
}
var p2 = new Person('ruby');
console.log(p2.sayName()); // ruby

define(['jquery'], function($) {
    // some code
    var mod = require("./relative/name");
    return {
        // some code
    };
});

const COLOR_GREEN = Symbol('1');
const COLOR_RED = Symbol('2');
function isSafe(arg) {
    if (arg === COLOR_RED) return false;
    if (arg === COLOR_GREEN) return true;
    throw new Error(`非法的传参: ${arg}`);
}
console.log(isSafe(COLOR_GREEN)); // true

const theBiggestInt = 9007199254740991n;
const alsoHuge = BigInt(9007199254740991);
const hugeString = BigInt("9007199254740991");
console.log(typeof hugeString); // bigint

let p = new Proxy({a: 11}, {
    deleteProperty(target, name) {
        console.log(arguments);
        return Reflect.deleteProperty(target, name);
    }
});
delete p.a;

These features collectively make JavaScript a powerful language for frontend development, enabling developers to write cleaner, more maintainable, and highly asynchronous code.