箭头函数和普通函数的区别

1. 写法不同

const arrayFn = (a, b) => a + b;
function add(a, b) => {
    return a + b;
}

2. 内部this的指向不同

window.a = 1;

// 箭头函数中的this在定义时就已经固定，不会因为调用对象的不同而改变
const loga = () => {
    const a = 2;
    return this.a;
}

// this在该函数被调用时，才知道this的指向
function fn() {
    const a = 3;
    return this.a;
}

// 例如：
loga(); // 1
fn(); // 1

const obj = {
    loga,
    fn,
    a: "obj"
}
obj.loga(); // 1
obj.fn(); // "obj"

// obj.loga依然返回window.a，也就是定义时this的指向
// 而obj.fn返回的则是obj.a，因为他的this指向了obj，也就是谁调用普通函数，普通函数的this就指向谁，默认指向window

// 根据这个特性，可以在react中使用箭头函数来减少bind的使用
import React, { Component } from "react";
class Header extends Component {
    constructor() {
        super();
        this.data = {
            a: 1
        }
    }
    log() {
        console.log(this.data)    
    }
    
    // 箭头函数在定义时就确认了内部this的指向
    _log = () => { console.log(this.data) }
    
    render() {
        return (
            <div>
                <button onClick={this.log.bind(this)}>normal</button>
                <button onClick={this._log}>array</button>
            </div>        
        )    
    }
}

3. 普通函数可以当作构造函数来实例化，而箭头函数不行，因为箭头函数没有constructor

4. 普通函数可以通过bind，call，apply来指定this的指向，而箭头函数不行

5. 在class中，定义普通函数和箭头函数的区别

class Father {
    constructor(state) {
        this.state = state
    }
    arrowMethod = () => {}
    generalMethod() {}
};

class Son extends Father {
    constructor(state) {
        super(state)
    }
};

const instance1 = new Father();
const instance2 = new Father();
const instance3 = new Son();

// 在实例化时，每个箭头函数都会生成一个新的方法，导致方法不能共享一个内存。
// instance1.arrowMethod === instance2.arrowMethod                     // false
// 只要是继承了父构造函数，他们的普通函数都会被继承，且指向同一个内存地址，可以减少内存开支。
// instance1.generalMethod === instance2.generalMethod === instance3.generalMethod          // true

6. 普通函数中可以使用arguments变量获取所有的参数，而箭头函数中没有该变量，所以需要配合es6的扩展运算符取到所有参数

function add() {
    let result = 0;
    // 这个arguments的东西也是个对象，而且是一个特殊的对象，
    // 它的属性名是按照传入参数的序列来的，第1个参数的属性名是’0’，第2个参数的属性名是’1’，以此类推，并且它还有length属性，存储的是当前传入函数参数的个数，
    // 很多时候我们把这种对象叫做类数组对象。
    // 类数组对象和数组都是对象这个妈生的，但是数组是大哥比类数组对象多了很多其他的玩具(方法)，类数组对象只是长得很像数组的弟弟而已。
    for(let i = 0; i < arguments.length; i++) {
        result += arguments[i]
    }
    return result;
}

const arrayAdd = (...args) => args.reduce((prev, curr) => prev + curr, 0);

add(1,2,3,4,5) // 15
arrayAdd(1,2,3,4,5) // 15