React Native小课堂：箭头函数 vs 普通函数，为什么你的this总迷路？

大家好呀～今天我们来聊聊React Native开发中两个看似很像，实则性格迥异的"函数兄弟"------箭头函数和普通函数。它们在代码里都穿着function的马甲，但遇到this这个磨人的小妖精时，表现可大不一样哦！(๑•̀ㅂ•́)و✧

一、先看两兄弟的证件照

JavaScript 复制代码

// 普通函数（大哥）
function sayHello() {
  console.log('我是普通函数');
}

// 箭头函数（小弟）
const sayHi = () => {
  console.log('我是箭头函数');
}

看起来就像双胞胎？别急，马上见证它们的"性格分裂"时刻！

二、当this出现时，画风突变！

让我们用React Native的经典场景------按钮点击事件来测试：

JavaScript 复制代码

class MyComponent extends React.Component {
  state = { count: 0 }

  // 普通函数版本
  handlePressNormal() {
    this.setState({ count: this.state.count + 1 }) // 这里会！报！错！
  }

  // 箭头函数版本
  handlePressArrow = () => {
    this.setState({ count: this.state.count + 1 }) // 完美运行
  }

  render() {
    return (
      <View>
        <Button 
          title="普通函数按钮"
          onPress={this.handlePressNormal} // 点击后原地懵圈
        />
        
        <Button
          title="箭头函数按钮"
          onPress={this.handlePressArrow} // 开心地蹦跶
        />
      </View>
    )
  }
}

三、为什么this会闹脾气？

👨🏫 小剧场解释 ：当普通函数被调用时，就像突然失忆的快递员------它不知道要把this这个包裹送到哪去，最后只能随便扔在路边（指向undefined）。而箭头函数就像聪明的快递员，永远记得包裹应该送到哪个主人（继承定义时的上下文）。

🔍 技术解释：

箭头函数没有自己的this，会像吸血鬼继承宿主一样继承父级作用域的this
普通函数的this在调用时才确定，容易在事件回调等场景中丢失绑定

四、拯救this的三种魔法

如果非要用普通函数，试试这些咒语：

JavaScript 复制代码

// 魔法1：构造函数绑定（需要背咒语）
constructor() {
  super();
  this.handlePressNormal = this.handlePressNormal.bind(this);
}

// 魔法2：匿名函数包裹（临时符咒）
onPress={() => this.handlePressNormal()}

// 魔法3：箭头函数（终极奥义）⭐️
handlePressArrow = () => {...}

五、什么时候该召唤哪只神兽？

场景	推荐选手	举个栗子🌰
类方法/事件处理	箭头函数	`handlePress = () => {...}`
需要动态this	普通函数	需要`call/apply`改变this的场景
回调地狱	箭头函数	链式调用更清爽
构造函数	普通函数	类方法当然要用普通函数定义啦

六、划重点小贴士

箭头函数不能当构造函数（new操作会报错）
箭头函数没有自己的arguments对象
对象方法慎用箭头函数（会继承外层this导致意外）
生命周期函数本来就是绑定的，放心用普通函数

七、终极选择指南

新手村玩家建议全程箭头函数护体，等完全理解this的套路后，再根据场景灵活选择。就像学做菜先掌握基础款蛋炒饭，再研究花式摆盘一样～(๑´ڡ`๑)

记住：当你纠结this去哪了的时候，箭头函数就是你的防丢绳！

希望这篇小文能帮你解开函数绑定的困惑～下次在代码里遇到迷路的this时，记得给它一根箭头函数的牵引绳哦！🎈 如果有其他React Native问题，欢迎随时召唤我～(≧∇≦)ﾉ