前端 javaScript 函数封装的写法有哪些

前端JavaScript函数封装可以采用多种方式: 函数声明式、函数表达式、立即执行函数表达式 (IIFE)、模块化封装、对象方法声明、构造函数与类语法。封装的核心目的是提高代码复用性、减少冗余、保持代码的模块化和易于维护。

其中，IIFE 是一种有效的封装方式，它不会污染全局命名空间，适用于临时的功能代码块封装。IIFE 定义时就会执行，形如 (function() {…})();，括号内部定义的变量和函数在外部无法访问，从而避免了全局作用域的污染。

一、函数声明式

函数声明是最基本的封装方式。这种方法简单易用，适合定义单个功能明确的函数。

function helloWorld() {
    console.log('Hello World!');
}
helloWorld(); // 调用函数

这种方法的优点是清晰、直观，且由于函数声明会被 JavaScript 引擎提升，因此可以在定义函数之前调用它。缺点则在于，如果在不同的作用域中多次声明同名函数，后面的会覆盖前面的。

二、函数表达式

函数表达式将函数赋值给变量，这种方式能够控制函数名的可见性，并能创建匿名函数。

var greet = function(name) {
    console.log('Hello ' + name + '!');
};
greet('Alice'); // 调用函数

函数表达式的特点是函数名只在函数体内部可见，并且不会被提升。这样避免了函数声明的提升问题。

三、立即执行函数表达式 (IIFE)

IIFE 允许定义匿名函数，并且立即执行。IIFE 经常用于创建一个新的作用域，封装局部变量。

(function() {
    var localVar = 'I am local';
    console.log(localVar);
})();

IIFE的优点在于它不污染外部作用域，且执行完立即释放，适用于初始化操作。

四、模块化封装

模块化封装使用 IIFE 创造模块，并通过返回对象来暴露模块的公共接口。

var myModule = (function() {
    var privateVar = 'I am private';
    function privateFunction() {
        console.log(privateVar);
    }
    return {
        publicMethod: function() {
            privateFunction();
        }
    };
})();
myModule.publicMethod(); // 调用公共方法，访问私有成员

在这种模式下，私有变量和函数被封装在模块内部，只有通过返回的对象暴露的属性和方法是可访问的。这种封装方法适用于创建具有多个公共接口的复杂模块。

五、对象方法声明

一个对象可以包含多个方法，封装相关的功能。

var person = {
    name: 'Bob',
    greet: function() {
        console.log('Hello, my name is ' + this.name);
    }
};
person.greet(); // 调用对象的方法

这种封装方式让方法与其操作的数据保持在一起，易于理解和维护。

六、构造函数

通过构造函数可以创建特定类型的对象，并封装相关的属性和方法。

function Person(name) {
    this.name = name;
    this.greet = function() {
        console.log('Hello, my name is ' + this.name);
    };
}
var person1 = new Person('Alice');
person1.greet(); // 输出 'Hello, my name is Alice'

在这种方式中，每个实例都有自己的属性和方法副本。

七、类语法

ES6 引入的类语法提供了一种更清晰、更像传统面向对象编程语言的方式来封装和继承。

class Person {
    constructor(name) {
        this.name = name;
    }
    greet() {
        console.log(`Hello, my name is ${this.name}`);
    }
}
const person2 = new Person('Bob');
person2.greet(); // 输出 'Hello, my name is Bob'