O padrão ES6 adiciona uma nova função: Função de seta.
Um, o método de definição da função usual
var fn1 = function(a, b) {
return a + b
}
function fn2(a, b) {
return a + b
}
Em segundo lugar, o método de definição da função de seta
Use a sintaxe da função de seta ES6 para definir a função, exclua a palavra-chave "função" e o nome da função da função original e use "=>" para conectar a lista de parâmetros e o corpo da função.
var fn1 = (a, b) => {
return a + b
}
(a, b) => {
return a + b
}
Quando há apenas um parâmetro de função, os parênteses podem ser omitidos, mas quando não há parâmetros, os parênteses não podem ser omitidos.
// 无参
var fn1 = function() {
}
var fn1 = () => {
}
// 单个参数
var fn2 = function(a) {
}
var fn2 = a => {
}
// 多个参数
var fn3 = function(a, b) {
}
var fn3 = (a, b) => {
}
// 可变参数
var fn4 = function(a, b, ...args) {
}
var fn4 = (a, b, ...args) => {
}
A função de seta é equivalente a uma função anônima e simplifica a definição da função. Existem dois formatos para funções de seta:
- Um tipo contém apenas uma expressão, omitindo {…} e retorno.
() => return 'hello' (a, b) => a + b - Existe outro tipo que pode conter várias instruções, neste momento {…} e o retorno não pode ser omitido
(a) => { a = a + 1 return a }
Se você retornar um objeto, deverá prestar atenção especial. Se for uma única expressão para retornar um objeto personalizado, um erro será relatado se você não escrever parênteses, porque há um conflito de sintaxe com o {…} de o corpo de função. Observe que usar parênteses para colocar as chaves é a definição do objeto, não o corpo da função
x => {
key: x} // 报错
x => ({
key: x}) // 正确
Tres, este ponto
1. Funções não-seta
Em funções que não sejam setas, a direção desta não pode ser determinada quando a função é definida. Somente quando a função é executada, é possível determinar para quem ela aponta. Na verdade, o ponto final desta é o objeto que a chama.
var Person = {
firstName:'Tom',
lastName:'Lee',
getFullName:function(){
console.log('this01 = ')
console.log(this)
var first = this.firstName
var fn = function(){
console.log('this02 = ')
console.log(this)
return this.firstName + this.lastName
}
return fn()
}
}
Person.getFullName()
Resultado da impressão:
this01 = {
firstName: "Tom", lastName: "Lee", getFullName: ƒ}
this02 = Window {
0: global, window: Window, self: Window, document: document, name: "", location: Location, …}
NaN
2. Função de seta
A função de seta parece ser uma abreviatura para função anônima, mas, na verdade, há uma diferença óbvia entre a função de seta e a função anônima: esta função de seta interna é um escopo léxico, que é determinado pelo contexto . (O escopo lexical é o escopo definido no estágio lexical. Em outras palavras, o escopo lexical é determinado por onde você escreve a variável e o escopo do bloco ao escrever o código , portanto, quando o analisador léxico processar o código, ele manterá o o escopo permanece inalterado.)
Agora, a função de seta corrige completamente o apontamento disso, isso sempre aponta para o escopo léxico, que é o chamador externo Pessoa
var Person = {
firstName:'Tom',
lastName:'Lee',
getFullName:function(){
console.log('this01 = ')
console.log(this)
var first = this.firstName
var fn = () => {
console.log('this02 = ')
console.log(this)
return this.firstName + this.lastName
}
return fn()
}
}
Person.getFullName()
Resultado da impressão:
this01 = {
firstName: "Tom", lastName: "Lee", getFullName: ƒ}
this02 = {
firstName: "Tom", lastName: "Lee", getFullName: ƒ}
"TomLee"
Quarto, as desvantagens das funções de seta
Cada objeto Function em JavaScript tem um método apply () e um método call ()
- apply chama um método de um objeto e substitui o objeto atual por outro objeto. Por exemplo: B.apply (A, argumentos); ou seja, o objeto A chama o método do objeto B. func.apply (thisArg, [argsArray])
- call chama um método de um objeto, substituindo o objeto atual por outro objeto. Por exemplo: B.call (A, args1, args2); ou seja, o objeto A chama o método do objeto B. func.call (thisArg, arg1, arg2,…)
Uma vez que isso foi vinculado de acordo com o escopo léxico na função de seta, quando a função de seta é chamada com call () ou apply (), isso não pode ser vinculado, ou seja, o primeiro parâmetro passado é ignorado
1. Funções não-seta
var Person = {
firstName:'Tom',
lastName:'Lee',
getFullName:function(firstName){
console.log('this01 = ')
console.log(this)
var first = this.firstName
var fn = function(f){
console.log('this02 = ')
console.log(this)
return f + this.lastName
}
return fn.call({
firstName:'hh'},firstName)
}
}
Person.getFullName('hi')
Resultado da impressão:
this01 = {
firstName: "Tom", lastName: "Lee", getFullName: ƒ}
this02 = {
firstName: "hh"}
"hiundefined"
2. Função de seta
var Person = {
firstName:'Tom',
lastName:'Lee',
getFullName:function(firstName){
console.log('this01 = ')
console.log(this)
var first = this.firstName
var fn = (f) => {
console.log('this02 = ')
console.log(this)
return f + this.lastName
}
return fn.call({
firstName:'hh'},firstName)
}
}
Person.getFullName('hi')
Resultado da impressão:
this01 = {
firstName: "Tom", lastName: "Lee", getFullName: ƒ}
this02 = {
firstName: "Tom", lastName: "Lee", getFullName: ƒ}
"hiLee"
Depois de usar a função de seta, o hack anterior não é mais necessário, var that = this. Mas você não pode usar as funções de seta ES6 cegamente.
Cinco, resumo
- Semelhante a funções anônimas, usadas em alguns casos, podem reduzir a quantidade de código
- O código é conciso, isso é definido com antecedência
- O código é muito conciso, dificultando a leitura
- Isso é definido com antecedência, o que torna impossível usar js para realizar algumas operações que parecem muito normais no ES5 (se você usar funções de seta, não será possível obter o elemento clicado atualmente na função de retorno de chamada que escuta o evento de clique. Para obter detalhes , consulte "Use as setas corretamente" Funções - quando não deve usar as funções de seta ES6 "
- Em geral, a função de seta é apenas uma abreviatura de uma função. Ela tem seus prós e contras. Pode ser usada ou não. Depende do seu humor. Claro, você deve usá-la corretamente.
Materiais de referência:
Sintaxe da função de seta dos novos recursos do ES6, como usar as funções de seta corretamente