JS宏进阶：函数、对象和类（一）

一、函数的定义

在基础专栏中，介绍过简单函数的定义，它是通过关键字function来声明的。示例代码如下：

function add(a, b){
    return a + b;
}

定义一个名称是add的函数，接收两个参数，返回值是这两个参数的和。例如：add(1,3)——>返回4。

此外，JS中还存在一种函数表达式：

let add = function(a, b){
    return a + b;
};

在ES6中，JS引入箭头函数语法，使用这种方法声明函数更为简洁，示例如下：

let add = (a, b)=>{ return a + b; } //有花括号需要return语句，才会有返回值
let add1 = (a, b) => a + b; //箭头后面只有一个单独的表达式可以省略花括号和return语句

二、函数的调用

定义函数后，可以通过函数名加括号的方式调用：

console.log(add(2, 3)); // 输出: 5

//JS宏编辑器中
function main(){
    console.log(add(2, 3));
}

三、参数

函数可以接受参数，参数在函数定义时指定，在函数调用时传递：

function greet(name){
    return `Hello, ${name}!`;
}

console.log(greet('Alice')); // 输出: Hello, Alice!

默认传参——可以为参数指定默认值，当调用函数时未传递该参数，则使用默认值：

function greet(name = 'Alice'){
    return `Hello, ${name}!`;
}

console.log(greet()); // 输出: Hello, Alice!

四、返回值

函数通过  return  语句返回值：

function multiply(a, b){
    return a * b;
}

console.log(multiply(2, 3)); // 输出: 6

如果函数没有  return  语句，或  return  后没有值，则返回 undefined 。

五、函数作用域

1、局部变量

在函数内声明的变量是局部变量，只能在函数内部访问：

function test(){
    let x = 10;
    console.log(x); // 输出: 10
}

test();
console.log(x); // 报错: x is not defined

2、全局变量

在函数外声明的变量是全局变量，可以在任何地方访问：

let y = 20;

function test(){
    console.log(y); // 输出: 20
}

test();
console.log(y); // 输出: 20

注意：在wps中要使用全局变量和全局表达式需要取消默认的勾选框，如下图所示：

在工具菜单栏中，有一个选项按钮，点击出现弹窗：

编译下面的编译参数取消勾选状态即可使用全局变量和表达式。

六、闭包

闭包是指函数能够记住并访问它的词法作用域，即使函数在其词法作用域之外执行：

function createCounter(){
    let count = 0;
    return function() {
        count++;
        return count;
    };
}

let counter = createCounter();
console.log(counter()); // 输出: 1
console.log(counter()); // 输出: 2

上述就是一个简单的闭包示例，count一直保存在内存中，没有自动清除。所以每次调用counter时的值不一样。

七、高阶函数

高阶函数是指接受函数作为参数，或返回一个函数的函数：

作为参数

function processArray(arr, fn){
    return arr.map(fn);
}

const result = processArray([1, 2, 3], function(x){
    return x * 2;
});

console.log(result); // 输出: [2, 4, 6]

返回函数

function createAdder(x){
    return function(y){
        return x + y;
    };
}

const add5 = createAdder(5);
console.log(add5(2)); // 输出: 7

八、匿名函数与立即调用函数表达式

匿名函数是没有名称的函数，通常用于回调函数或 IIFE：

// 匿名函数作为回调函数，如map方法中的函数
let arr = [1,2,3].map(function(i){return i + 10});


// 立即调用函数表达式 (IIFE)
(function() {
    console.log('This is an IIFE');
})();

九、this关键字

在函数中，this 的值取决于函数的调用方式：

• 作为对象方法调用时，this 指向调用该方法的对象。
• 作为普通函数调用时，this 指向全局对象（在严格模式下为 undefined）。
• 在箭头函数中，this 由外围作用域决定。

function Person(name){
    this.name = name;
    
    this.greet = function(){
        console.log(`Hello, my name is ${this.name}`);
    };
}

const alice = new Person('Alice');
alice.greet(); // 输出: Hello, my name is Alice

十、总结

JavaScript 函数是一个功能强大的工具，支持多种定义和调用方式，以及高级特性如闭包和高阶函数。理解这些概念有助于编写更模块化、可维护和可重用的代码。