Funções de seta JavaScript vs funções normais

As funções de seta não têm seu próprio this, o que é consistente com a função externa

Quando todas as funções forem executadas, será criado um contexto de execução da função. Haverá uma variável this no contexto de execução das funções comuns, mas as funções de seta não.

Se isso aparecer na função de seta, sempre levará o this no momento da definição, na cadeia de escopo, e o mais próximo. Por exemplo, na demonstração abaixo, é tomado o this no ambiente de execução global, apontando para o objeto global.

<script>
var id = 'wgchen'

// 箭头函数定义在全局作用域
let fun1 = () => {
    
    
  console.log(this.id)
}

fun1(); // 'wgchen'

// this的指向不会改变，永远指向Window对象
fun1.call({
    
     id: 'Obj' }) // 'wgchen'
</script>

Pergunta para reflexão: Qual será a saída do código a seguir?

<script>
var id = 'wgchen'

function fun1() {
    
    
  // setTimeout中使用普通函数
  setTimeout(function fun3() {
    
    
    console.log(this.id)
  }, 2000);
}

function fun2() {
    
    
  // setTimeout中使用箭头函数
  setTimeout(() => {
    
    
    console.log(this.id)
  }, 2000);
}

fun1(); // 'wgchen'
fun2(); // 'wgchen'

fun1.call({
    
     id: 'Obj' }) // 'wgchen'
fun2.call({
    
     id: 'Obj' }) // 'Obj'
</script>

1. O próprio Fun3 tem isso, porque setTimout faz fun3 executar no contexto global, e isso aponta para o ambiente de execução global;

2. Da mesma forma, setTimout faz com que a função arrow seja executada no contexto global, mas a função arrow em si não tem isso, ela vai procurar ao longo da cadeia de escopo para encontrar isso criado em fun2, que também aponta para o ambiente de execução global;

3. Durante o processo de chamada de fun1.call, o apontamento this de fun1 é modificado, mas o próprio fun3 também cria isso, e setTimeout faz este apontar para o ambiente de execução global;

4. Durante o processo de chamada de fun1.call, o this apontando de fun1 é modificado, a função de seta não tem isso, e o this de fun1 é encontrado de acordo com a cadeia de escopo, então ele finalmente aponta para {id: 'Obj '}.

As funções de seta não podem ser usadas como construtores

Como a função arrow não possui esta variável própria, não temos como modificar o ponteiro desta, portanto não podemos usá-la como construtora, nem possui um objeto protótipo.

let Fun = (name, age) => {
    
    
  this.name = name
  this.age = age
}

// 报错
let p = new Fun('mybj', 4)

As funções de seta não têm objeto de argumentos

Provavelmente muita gente não usa o objeto arguments, é uma variável local disponível em todas as funções normais.

Representa os parâmetros passados ​​quando a função é chamada.O objeto arguments não é um array, mas sim um array tipo array.

Ele não possui nenhuma propriedade de matriz, como slice e outros métodos, exceto a propriedade length e o índice.

Portanto, geralmente é usado Array.prototype.slice.call(arguments)/[...arguments] para convertê-lo em uma matriz.

<script>
let showArguments = function () {
    
    
  // Arguments(2) ['params1', 'params2', callee: ƒ, Symbol(Symbol.iterator): ƒ]
  console.log(arguments)
  
  //  ['params1', 'params2']
  console.log(Array.prototype.slice.call(arguments)) 
}

showArguments('params1', 'params2')

</script>

propriedade length comum a funções de seta e funções normais

Esta parte não pertence à distinção, mas quero adicioná-la aqui. Este também é um atributo incomum, e qualquer pessoa que tenha feito alguns problemas de puxar com a mão deveria tê-lo usado.

O lengthatributo refere-se ao número de parâmetros formais.
Para ser mais preciso:
o número de parâmetros antes do primeiro tem o valor padrão, e não inclui o número de parâmetros restantes.

Correspondentemente, arguments.lengthrefere-se ao número de parâmetros reais.

<script>
const showLength = function(a, b, c, d){
    
    
  console.log(`实际参数的个数：${
      
      arguments.length}`)
}

console.log(`形参的个数：${
      
      showLength.length}`) //形参的个数：4

//形参的个数：3
console.log(`形参的个数：${
      
      showLength.bind(this, '3').length}`)

showLength('1','2');// 实际参数的个数：2
showLength.call(this, '3') // 实际参数的个数：1

</script>