当前位置：首页 > JavaScript

js 经典实现

2026-04-07 03:06:01JavaScript

JavaScript 中有许多经典实现和设计模式，以下是常见的几种方法和技术：

闭包（Closure）

闭包是函数和声明该函数的词法环境的组合。它可以用来创建私有变量和方法。

function createCounter() {
    let count = 0;
    return function() {
        count++;
        return count;
    };
}
const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

原型链继承（Prototypal Inheritance）

JavaScript 使用原型链实现对象继承，而不是传统的类继承。

function Animal(name) {
    this.name = name;
}
Animal.prototype.speak = function() {
    console.log(`${this.name} makes a noise.`);
};

function Dog(name) {
    Animal.call(this, name);
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

const dog = new Dog('Rex');
dog.speak(); // Rex makes a noise.

模块模式（Module Pattern）

模块模式利用闭包封装私有变量和方法，暴露公共接口。

js 经典实现

const myModule = (function() {
    let privateVar = 'I am private';
    function privateMethod() {
        console.log(privateVar);
    }
    return {
        publicMethod: function() {
            privateMethod();
        }
    };
})();
myModule.publicMethod(); // I am private

回调函数（Callback）

回调函数是异步编程的基础，常用于处理异步操作。

function fetchData(callback) {
    setTimeout(() => {
        callback('Data fetched');
    }, 1000);
}
fetchData((data) => {
    console.log(data); // Data fetched
});

Promise

Promise 是处理异步操作的现代方式，避免了回调地狱。

function fetchData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('Data fetched');
        }, 1000);
    });
}
fetchData().then(data => {
    console.log(data); // Data fetched
});

防抖（Debounce）和节流（Throttle）

防抖和节流用于优化高频触发的事件（如滚动、输入）。

js 经典实现

function debounce(func, delay) {
    let timeout;
    return function() {
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(this, arguments), delay);
    };
}

function throttle(func, limit) {
    let inThrottle;
    return function() {
        if (!inThrottle) {
            func.apply(this, arguments);
            inThrottle = true;
            setTimeout(() => inThrottle = false, limit);
        }
    };
}

柯里化（Currying）

柯里化是将多参数函数转换为一系列单参数函数的技术。

function curry(fn) {
    return function curried(...args) {
        if (args.length >= fn.length) {
            return fn.apply(this, args);
        } else {
            return function(...moreArgs) {
                return curried.apply(this, args.concat(moreArgs));
            };
        }
    };
}
const sum = (a, b, c) => a + b + c;
const curriedSum = curry(sum);
console.log(curriedSum(1)(2)(3)); // 6

单例模式（Singleton）

单例模式确保一个类只有一个实例。

const Singleton = (function() {
    let instance;
    function createInstance() {
        return { name: 'Singleton' };
    }
    return {
        getInstance: function() {
            if (!instance) {
                instance = createInstance();
            }
            return instance;
        }
    };
})();
const instance1 = Singleton.getInstance();
const instance2 = Singleton.getInstance();
console.log(instance1 === instance2); // true

观察者模式（Observer Pattern）

观察者模式定义对象间的一对多依赖关系，当一个对象状态改变时，所有依赖它的对象都会得到通知。

class Subject {
    constructor() {
        this.observers = [];
    }
    subscribe(observer) {
        this.observers.push(observer);
    }
    unsubscribe(observer) {
        this.observers = this.observers.filter(obs => obs !== observer);
    }
    notify(data) {
        this.observers.forEach(observer => observer.update(data));
    }
}

class Observer {
    update(data) {
        console.log(`Received data: ${data}`);
    }
}
const subject = new Subject();
const observer = new Observer();
subject.subscribe(observer);
subject.notify('Hello!'); // Received data: Hello!

这些经典实现涵盖了 JavaScript 的核心概念，适用于多种开发场景。