Funções de seta em JavaScript

1. Funções de seta

Uma nova função no ES6, a função de seta. Use uma seta para definir uma função.

let fn = ( ) => {  }

A função de seta acima é equivalente a

 let fn = function () { }

2. Declare a função de seta

 let fn = (形参) => {  函数体 }

3. Função de chamada

fn(实参)

4. Abreviatura para funções de seta

① Omitir parênteses, quando houver apenas um parâmetro formal

    let add = (n) => {
      return n + n
    }
    console.log(add(2))  //4

② Omitir chaves, quando o corpo do código tiver apenas uma instrução

    let pow = (n) => n * n
    console.log(pow(3))  //9

5. Características das funções de seta

①isso é estático e sempre aponta para isso na área onde a função é declarada

② Objetos não podem ser instanciados como construtores

    let Person = (name, age) => { this.name = name ， this.age = age }
    let p = new Person('zs', 18)
    console.log(p)//报错Person is not a constructor

③Argnments variáveis ​​não podem ser usadas (salvar parâmetros reais)

 Função normal

    function fun(a, b) { console.log(arguments) }
    fun(1, 2)  //Arguments(2) [1, 2, callee: ƒ, Symbol(Symbol.iterator): ƒ]

função de seta

    let fn = (a, b) => { console.log(arguments) }
    fn(1, 2)  //arguments is not defined

6. Cenários de aplicação

①Clique no div, a cor mudará após 2s

    let div = document.querySelector('div')
    div.addEventListener('click', function () {
      setTimeout(function () {
        this.style.backgroundColor = 'pink'
      }, 2000)
    })

Não é aceitável que usemos isso para alterar os atributos de estilo. Como isso aponta para um problema, um erro 'Não é possível definir propriedades de indefinido (configurando 'backgroundColor')' será relatado após clicar. O console imprime isso, que aponta para a janela, e a janela aqui não tem nenhum atributo de estilo, então style.backgroundColor relatará um erro.

Neste ponto, as funções de seta podem ser usadas para atender a esse requisito.

    let div = document.querySelector('div')
    div.addEventListener('click', function () {
      setTimeout(() => {
        // console.log(this)
        this.style.backgroundColor = 'pink'
      }, 2000)
    })

Neste ponto, nenhum erro aparecerá. Como a função de seta é usada, o this da função de seta é estático e aponta para o valor de this no escopo em que foi declarado. Ele é declarado no escopo externo, portanto, aponta para a chamada do evento de a função externa ou div, você pode encontrar o div e modificar seu valor style.backgroundColor.

② Retorna elementos pares do array

Quando usamos funções comuns:

    let str = [1, 22, 45, 76, 36, 47, 19]
    let result = str.filter(function (item) {
      if (item % 2 === 0) {
        return true
      } else {
        return false
      }
    })
    console.log(result)//[22, 76, 36]

 O uso de funções de seta simplifica a escrita do código:

    let str = [1, 22, 45, 76, 36, 47, 19]
    let result = str.filter(item => { item % 2 === 0 })
    console.log(result)//[22, 76, 36]

Resumo: As funções de seta são adequadas para retornos de chamada que não têm nada a ver com isso, retornos de chamada de método para temporizadores e arrays. Não é adequado para retornos de chamada relacionados a isso, retornos de chamada de evento e métodos de objeto.