什么时候不能使用箭头函数？
作者：互联网
## 箭头函数的缺点
没有 arguments
```js const fn1 = () => { console.log('this', arguments) // 报错，arguments is not defined } fn1(100, 200) ```
无法通过 call apply bind 等改变 this
```js const fn1 = () => { console.log('this', this) // window } fn1.call({ x: 100 }) ```
简写的函数会变得难以阅读
```js const multiply = (a, b) => b === undefined ? b => a * b : a * b ```
## 不适用箭头函数的场景
对象方法
```js const obj = { name: 'xx', getName: () => { return this.name } } console.log( obj.getName() ) ```
扩展对象原型（包括构造函数的原型）
```js const obj = { name: 'xx' } obj.__proto__.getName = () => { return this.name } console.log( obj.getName() ) ```
构造函数
```js const Foo = (name, age) => { this.name = name this.age = age } const f = new Foo('张三', 20) // 报错 Foo is not a constructor ```
动态上下文中的回调函数
```js const btn1 = document.getElementById('btn1') btn1.addEventListener('click', () => { // console.log(this === window) this.innerHTML = 'clicked' }) ```
Vue 生命周期和方法
```js { data() { return { name: 'xx' } }, methods: { getName: () => { // 报错 Cannot read properties of undefined (reading 'name') return this.name }, // getName() { // return this.name // 正常 // } }, mounted: () => { // 报错 Cannot read properties of undefined (reading 'name') console.log('msg', this.name) }, // mounted() { // console.log('msg', this.name) // 正常 // } } ```
【注意】class 中使用箭头函数则**没问题**
```js class Foo { constructor(name, age) { this.name = name this.age = age } getName = () => { return this.name } } const f = new Foo('张三', 20) console.log('getName', f.getName()) ```
所以，在 React 中可以使用箭头函数
```js export default class HelloWorld extends React.Component { constructor(props) { super(props) this.state = { name: '双越' } } render() { return <p onClick={this.printName}>hello world</p> } printName = () => { console.log(this.state.name) } } ```
## 答案
箭头函数的缺点 - arguments 参数 - 无法改变 this
不适用的场景 - 对象方法 - 对象原型 - 构造函数 - 动态上下文 - Vue 生命周期和方法
## 划重点
- Vue 组件是一个对象，而 React 组件是一个 class （如果不考虑 Composition API 和 Hooks）
没有 arguments
```js const fn1 = () => { console.log('this', arguments) // 报错，arguments is not defined } fn1(100, 200) ```
无法通过 call apply bind 等改变 this
```js const fn1 = () => { console.log('this', this) // window } fn1.call({ x: 100 }) ```
简写的函数会变得难以阅读
```js const multiply = (a, b) => b === undefined ? b => a * b : a * b ```
## 不适用箭头函数的场景
对象方法
```js const obj = { name: 'xx', getName: () => { return this.name } } console.log( obj.getName() ) ```
扩展对象原型（包括构造函数的原型）
```js const obj = { name: 'xx' } obj.__proto__.getName = () => { return this.name } console.log( obj.getName() ) ```
构造函数
```js const Foo = (name, age) => { this.name = name this.age = age } const f = new Foo('张三', 20) // 报错 Foo is not a constructor ```
动态上下文中的回调函数
```js const btn1 = document.getElementById('btn1') btn1.addEventListener('click', () => { // console.log(this === window) this.innerHTML = 'clicked' }) ```
Vue 生命周期和方法
```js { data() { return { name: 'xx' } }, methods: { getName: () => { // 报错 Cannot read properties of undefined (reading 'name') return this.name }, // getName() { // return this.name // 正常 // } }, mounted: () => { // 报错 Cannot read properties of undefined (reading 'name') console.log('msg', this.name) }, // mounted() { // console.log('msg', this.name) // 正常 // } } ```
【注意】class 中使用箭头函数则**没问题**
```js class Foo { constructor(name, age) { this.name = name this.age = age } getName = () => { return this.name } } const f = new Foo('张三', 20) console.log('getName', f.getName()) ```
所以，在 React 中可以使用箭头函数
```js export default class HelloWorld extends React.Component { constructor(props) { super(props) this.state = { name: '双越' } } render() { return <p onClick={this.printName}>hello world</p> } printName = () => { console.log(this.state.name) } } ```
## 答案
箭头函数的缺点 - arguments 参数 - 无法改变 this
不适用的场景 - 对象方法 - 对象原型 - 构造函数 - 动态上下文 - Vue 生命周期和方法
## 划重点
- Vue 组件是一个对象，而 React 组件是一个 class （如果不考虑 Composition API 和 Hooks）
标签：const,函数,getName,js,箭头,log,使用,console,name 来源： https://www.cnblogs.com/lxl0419/p/16260432.html