怎么让js函数自动执行一次

立即执行函数表达式（IIFE）、箭头函数、setTimeout

立即执行函数表达式（IIFE）是一种让JavaScript函数在声明之后立即执行的方法。IIFE通过将函数包裹在括号中并在末尾加上括号来实现立即执行，这确保了函数不会在全局命名空间中污染变量，同时也能立即执行。箭头函数可以简化IIFE的语法，而setTimeout也可以用于使函数在短暂延迟后自动执行。下面将详细介绍这几种方法。

一、立即执行函数表达式（IIFE）

1、什么是IIFE

立即执行函数表达式（IIFE）是一种设计模式，意在创建一个立即执行的函数，并且不会污染全局命名空间。它的语法如下：

(function() {
    // 代码
})();

2、IIFE的使用场景

IIFE最常用于需要创建一个新的作用域以避免变量污染的场景。例如，当你需要在一个单独的文件中使用大量变量且不希望这些变量影响其他文件时，IIFE是一个非常有用的工具。

(function() {
    var x = 10;
    console.log(x);  // 输出: 10
})();
console.log(typeof x);  // 输出: undefined

在上面的例子中，变量x是在IIFE的作用域内声明的，因此它在外部是不可访问的。

3、IIFE与传参

IIFE可以接受参数，这使得它更具灵活性。例如，我们可以传递全局对象或其他变量：

(function(global) {
    var message = "Hello, " + global.name;
    console.log(message);
})(window);

在这个例子中，我们将window对象传递给IIFE，使得它可以在函数内部使用全局对象。

二、箭头函数

1、什么是箭头函数

箭头函数是ES6引入的一种新型函数表达式，它具有更简洁的语法，并且不绑定自己的this，arguments，super或new.target。它的基本语法如下：

const func = () => {
    // 代码
};

2、使用箭头函数实现IIFE

我们可以使用箭头函数来创建一个IIFE：

(() => {
    console.log("This is an IIFE using an arrow function");
})();

这种方式不仅语法更简洁，而且更易于阅读和理解。

3、箭头函数的作用域

箭头函数不会创建自己的this，它会捕获其所在上下文的this值。这在处理回调函数或事件处理程序时非常有用：

function Person() {
    this.age = 0;
    setInterval(() => {
        this.age++;
        console.log(this.age);
    }, 1000);
}
var p = new Person();

在上面的例子中，箭头函数确保了this始终指向Person实例。

三、setTimeout

1、什么是setTimeout

setTimeout是一个用于在指定时间后执行代码片段的JavaScript函数。它的基本语法如下：

setTimeout(function, delay);

2、使用setTimeout自动执行函数

我们可以使用setTimeout来使一个函数在短暂延迟后自动执行：

setTimeout(() => {
    console.log("This function executes after 1 second");
}, 1000);

3、setTimeout的作用域与上下文

与IIFE和箭头函数不同，setTimeout并不会创建新的作用域，因此我们需要注意this的指向：

function Person() {
    this.age = 0;
    setTimeout(function() {
        this.age++;
        console.log(this.age);  // 输出: NaN
    }, 1000);
}
var p = new Person();

在上面的例子中，由于setTimeout的回调函数的this指向全局对象，我们可以使用箭头函数或bind方法来解决这个问题：

function Person() {
    this.age = 0;
    setTimeout(() => {
        this.age++;
        console.log(this.age);  // 输出: 1, 2, 3, ...
    }, 1000);
}
var p = new Person();

或者

function Person() {
    this.age = 0;
    setTimeout(function() {
        this.age++;
        console.log(this.age);  // 输出: 1, 2, 3, ...
    }.bind(this), 1000);
}
var p = new Person();

四、总结

通过本文，我们详细介绍了几种让JavaScript函数自动执行一次的方法，包括立即执行函数表达式（IIFE）、箭头函数和setTimeout。这些方法各有优缺点，适用于不同的场景。IIFE适用于需要创建新作用域的场景，箭头函数语法简洁且不会绑定自己的this，而setTimeout则可以在指定时间后执行代码。希望这些方法能帮助你在实际开发中更加灵活地处理函数的自动执行。