JavaScript定义函数的5种常用方法详解：从基础到ES6新特性-嘻道妙招

哎，同学！刚学JavaScript是不是总被各种函数绕晕了？今天咱们就来唠唠这个事——你可知道光是定义一个函数就有??5种常见姿势??？从最古老到最时髦的都有，保证你看完就能立刻上手！

一、最原始的函数声明：仪式感很重要

“为啥大家都说这个叫老祖宗级别的写法？”猜到你会有这个疑问。其实所谓的??函数声明??就是用function关键字打头阵的写法：

javascript复制function sayHello() {
  console.log('你好呀！');
}

特点是??会被提升到作用域顶部??，就算你在调用之后才定义也能跑通。注意了啊，这种写法像不像在说：“我要郑重其事声明一个函数”？

举个反常识的例子：

javascript复制greet(); // 居然能正常运行！
function greet() {
  console.log('蛤？还没定义呢？');
}

这就是??声明式函数的魔法??，跟变量提升完全不是一个level。明白这意思了吧？但千万注意别滥用这种特性，否则代码的逻辑会像打乱的魔方一样难懂。

二、灵活多变的函数表达式：任君调配

“等等，刚才那个和现在这个有啥区别？”别急，往下看。??函数表达式??就像个随叫随到的外卖小哥，必须等赋值完成才能用：

javascript复制const sayBye = function() {
  console.log('告辞！');
};

打眼一看是不是差不太多？但悄悄告诉你几个关键点：

??对比项??	函数声明	函数表达式
定义时机	任何位置	变量赋值后
典型应用场景	通用逻辑块	回调/条件定义
是否存在提升	?有	?无

比如现在玩个花活：

javascript复制const todayMenu = Math.random() > 0.5 ?
  function() { console.log('吃火锅') } :
  function() { console.log('嗦粉') };

看见没？这种??动态创建函数??的能力简直绝了！

三、箭头函数：新时代的宠儿

ES6这回真是搞了个大新闻，??箭头函数??直接掀起语法革命！先看个典型样例：

javascript复制const add = (a, b) => a + b;

完事，两行变一行！但有三点要特别提醒新手：

??没有自己的this??（自动继承外层）
??不能当构造函数??（new一下试试？当场翻车）
??超简洁语法??（省略return和花括号）

咱们重点聊聊this的问题。传统函数里碰到这样的情况：

javascript复制const obj = {
  name: '小明',
  showName: function() {
    setTimeout(function() {
      console.log(this.name); // 输出undefined！惊不惊喜？
    }, 100);
  }
};

要是用箭头函数改写：

javascript复制showName: function() {
  setTimeout(() => {
    console.log(this.name); // 稳了！正确输出'小明'
  }, 100);
}

这时候你就会发现，这功能简直是??救场小能手??啊！

四、构造函数：老派但值得尊敬

虽然说现在用的少了，但当年可是扛把子的存在！来见识下??Function构造函数??：

javascript复制const multiply = new Function('a', 'b', 'return a * b');

关键特性表：

??特色??	??说明??
动态解析	运行时把字符串当代码执行
安全隐患	容易遭XSS攻击
调试困难度	报错信息堪比天书
存在意义	特殊场景才会掏出来的杀手锏

打个比方，这就是函数领域的屠龙刀——非必要别轻易亮出来，但关键时刻还真缺不了它！

五、生成器函数：超前部署的黑科技

这个可能有点超纲，但咱们既然说"全面"，就得提一嘴??生成器函数??：

javascript复制function* countDown(num) {
  while(num > 0) {
    yield num--;
  }
}

看着是不是相当赛博朋克？那个yield关键字可以让函数中途暂停，下次接着跑。虽然现在用得少，但处理??异步操作??或者??大数据流??的时候简直是开挂神器！

不过新手阶段不用急着啃这块骨头，记住这三个特征就行：

定义时要在function后面加*
用next()方法逐步执行
拥有保存上下文状态的能力

你以为这就完了？来两个冷知识

??立即执行函数表达式（IIFE）??其实是个函数表达式的变种：

javascript复制(function() {
  console.log('自启动！');
})();

这小括号精妙不？既保证了立即执行，又不会污染全局作用域。

??异步函数??本质上也是语法糖：

javascript复制async function fetchData() {
  const res = await apiCall();
}

说到底，async/await背地里还是靠Promise在支撑，现在是不是觉得JavaScript的设计有点意思了？

现在已经深夜2点了，最后说点掏心窝子的话：当年我刚学的时候，觉得函数搞这么多花样纯属没事找事。后来才慢慢明白，??不同的写法其实都是在平衡这三个维度??：代码可读性、执行性能、应用场景。

个人最推荐的入门顺序是：

先把函数声明和表达式吃透
箭头函数必须熟练掌握
构造函数了解概念就好
生成器等实战遇到再深挖

千万别贪多嚼不烂，编程这玩意儿就像学做饭——先把西红柿炒鸡蛋做明白了，再来挑战佛跳墙。今晚说的这些，够你消化个三五天了，下次遇到函数相关的问题，可别再说"臣妾做不到"了！

本文由嘻道妙招独家原创，未经允许，严禁转载

JavaScript定义函数的5种常用方法详解：从基础到ES6新特性