JS函数如何定义和调用

function greet(name) {
  console.log(`你好，${name}！`);
}

const sayHello = function(name) {
  console.log(`Hello, ${name}!`);
};

// 也可以是具名函数表达式，但外部调用仍需通过变量名
const factorial = function calculateFactorial(n) {
  if (n <= 1) return 1;
  return n * calculateFactorial(n - 1);
};

const add = (a, b) => a + b;
const logMessage = message => console.log(message); // 单个参数可以省略括号
const doSomething = () => console.log("执行了！"); // 没有参数需要空括号

super

new.target

()

greet("张三"); // 输出：你好，张三！
sayHello("李四"); // 输出：Hello, 李四!
console.log(add(5, 3)); // 输出：8
doSomething(); // 输出：执行了！

function calculateArea(width, height) {
  return width * height;
}
let area = calculateArea(10, 5); // 10 对应 width, 5 对应 height
console.log(area); // 输出：50

if (param === undefined) param = defaultValue;

function sendMessage(message, sender = "匿名用户") {
  console.log(`${sender} 说: ${message}`);
}
sendMessage("你好！"); // 输出：匿名用户 说: 你好！
sendMessage("你好！", "小明"); // 输出：小明 说: 你好！
sendMessage("这是个 undefined 的例子", undefined); // 依然使用默认值

...

function sum(...numbers) {
  // numbers 现在是一个数组，包含了所有传入的参数
  return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3)); // 输出：6
console.log(sum(10, 20, 30, 40)); // 输出：100

function displayUser({ name, age, city = "未知" }) {
  // name, age, city 直接从传入的对象中解构出来
  console.log(`姓名: ${name}, 年龄: ${age}, 城市: ${city}`);
}

const user1 = { name: "张三", age: 30 };
displayUser(user1); // 输出：姓名: 张三, 年龄: 30, 城市: 未知

const user2 = { name: "李四", age: 25, city: "北京" };
displayUser(user2); // 输出：姓名: 李四, 年龄: 25, 城市: 北京

window

global

function showThis() {
  console.log(this);
}
showThis(); // 浏览器中通常是 Window 对象，严格模式下是 undefined

const person = {
  name: "Alice",
  greet: function() {
    console.log(`你好，我是 ${this.name}`);
  }
};
person.greet(); // this 指向 person 对象

new

function Car(make, model) {
  this.make = make;
  this.model = model;
}
const myCar = new Car("Honda", "Civic");
console.log(myCar.make); // this 指向 myCar

document.getElementById('myButton').addEventListener('click', function() {
  console.log(this.id); // this 指向 myButton 元素
});

const user = {
  name: "Bob",
  tasks: ["吃饭", "睡觉", "打豆豆"],
  logTasks: function() {
    this.tasks.forEach(function(task) {
      // 这里的 this 默认指向全局对象（或 undefined），不是 user
      // console.log(`${this.name} 的任务: ${task}`); // 会出错
    });

    this.tasks.forEach((task) => {
      // 箭头函数中的 this 继承自外层的 logTasks 方法，即 user 对象
      console.log(`${this.name} 的任务: ${task}`);
    });
  }
};
user.logTasks();

bind

function createCounter() {
  let count = 0; // 这个 count 是 createCounter 的局部变量

  return function() { // 返回的这个匿名函数就是闭包
    count++;
    console.log(count);
  };
}

const counter1 = createCounter(); // counter1 是一个闭包
counter1(); // 输出：1
counter1(); // 输出：2

const counter2 = createCounter(); // counter2 是另一个独立的闭包
counter2(); // 输出：1
counter2(); // 输出：2

createCounter

counter1()

counter2

function createPerson(name) {
  let _age = 0; // 私有变量

  return {
    getName: function() {
      return name;
    },
    getAge: function() {
      return _age;
    },
    celebrateBirthday: function() {
      _age++;
      console.log(`${name} 现在 ${_age} 岁了！`);
    }
  };
}

const john = createPerson("John");
console.log(john.getName()); // John
console.log(john.getAge()); // 0
john.celebrateBirthday(); // John 现在 1 岁了！
// console.log(john._age); // 无法直接访问 _age

// 传统 for 循环中的常见陷阱（不使用 let 或闭包）
// const buttons = document.querySelectorAll('button');
// for (var i = 0; i < buttons.length; i++) {
//   buttons[i].onclick = function() {
//     console.log('点击了按钮 ' + i); // 永远输出 "点击了按钮 3" (如果3个按钮)
//   };
// }

// 使用闭包解决
// for (var i = 0; i < buttons.length; i++) {
//   (function(index) { // 立即执行函数创建闭包
//     buttons[index].onclick = function() {
//       console.log('点击了按钮 ' + index); // 正确输出 0, 1, 2
//     };
//   })(i);
// }

// 现代JS更推荐使用 let 或 forEach
// for (let i = 0; i < buttons.length; i++) {
//   buttons[i].onclick = function() {
//     console.log('点击了按钮 ' + i); // let 自身就创建了块级作用域，行为类似闭包
//   };
// }

function makeMultiplier(factor) {
  return function(number) {
    return number * factor;
  };
}

const multiplyBy5 = makeMultiplier(5);
const multiplyBy10 = makeMultiplier(10);

console.log(multiplyBy5(2)); // 输出：10
console.log(multiplyBy10(2)); // 输出：20

multiplyBy5

multiplyBy10

factor

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

const add10 = add(10);
const add10and20 = add10(20);
console.log(add10and20(30)); // 输出：60