1

Esse script transforma a primeira letra de cada palavra em maiúsculas, exceto algumas palavras que fazem parte das matrizes nas variáveis wordContainAt, wordsToIgnore, wordUpperCase.

Estou tendo problemas para refatorar o código criado no jQuery para JavaScript Puro. Pretendo utilizar módulos de exportação ES6.

Eu sei que a exportação não tem nada haver com a função, mas neste contexto, acho que não entendi muito bem o conceito de uma função anônima, ou arrow function, porque não consego obter o objeto thisdentro do escopo da função, como acontece em jQuery.

Alguém pode me ajudar ?

jQuery

$(window).on('load', function() {
    $.fn.capitalize = function() {
        // words to ignore
        let wordContainAt = '@',
            wordsToIgnore = ['to', 'and', 'the', 'it', 'or', 'that', 'this'],
            wordUpperCase = ['S.A', 'SMS', 'USA'],
            minLength = 2;

        function getWords(str) {
            if (str == undefined) {
                str = 'abc def';
            } else {
                str = str;
            }
            return str.match(/\S+\s*/g);
        }
        this.each(function() {
            let words = getWords(this.value);
            console.log(words);
            $.each(words, function(i, word) {
                // only continues if the word is not in the ignore list or contains at '@'
                if (word.indexOf(wordContainAt) != -1) {
                    words[i] = words[i].toLowerCase();
                } else if (wordUpperCase.indexOf($.trim(word).toUpperCase()) != -1) {
                    words[i] = words[i].toUpperCase();
                } else if (wordsToIgnore.indexOf($.trim(word)) == -1 && $.trim(word).length > minLength) {
                    words[i] = words[i].charAt(0).toUpperCase() + words[i].slice(1).toLowerCase();
                } else {
                    words[i] = words[i].toLowerCase();
                }
            });
            if (this.value != '') {
                this.value = words.join('');
            }
        });
    };

    // field onblur with class .lower
    $(document).on('blur', '.lower', function() {
        $(this).capitalize();
    }).capitalize();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="lower" />

Exemplo Javascript

const capitalizeTheWord = () => {
    constole.log(this) // undefined

    const inputWordCapitalize = document.querySelector('input.lower');
    inputWordCapitalize.addEventListener('blur', (e) => {
        // capitalizeTheWord...
    });
};

export default capitalizeTheWord();

1 Resposta 1

2

Antes de tudo, vale deixar claro que no JavaScript, uma função anônima não é, necessariamente, uma arrow function. Funções anônimas são simplesmente aquelas que não recebem nome.

Veja, primeiramente, um exemplo de uma função nomeada:

function doStuff() { /* ... */ }
//       ↑↑↑↑↑↑↑
//    Nome da função

E alguns exemplos de funções anônimas:

const doStuff1 = function() {};

const doStuff2 = () => {};

Note que a função em si não possui nome. Como retornam uma expressão, serão atribuidas às variáveis doStuff1 e doStuff2, que irá armazenar a função — anônima. Note que você ainda poderá invocá-las normalmente, já que são funções.

Funções anônimas são geralmente usadas como callbacks. Se você irá criar uma função que você mesmo irá chamar, é sempre preferível declará-la usando um nome.


Agora no contexto de arrow functions, vale, em primeiro lugar, consultar a documentação. Em resumo, o this está undefined porque toda arrow function não cria um valor this para o seu próprio escopo. O this é herdado do escopo pai.

Desse modo, como o escopo pai da sua arrow function é o próprio módulo, this será undefined.

Veja um exemplo que ilustra o comportamento da arrow function de não criar um valor this para seu próprio escopo, herdando o escopo do pai:

class Class {
  constructor(foo) {
    this.foo = foo;
  }
  
  doStuff() {
    console.log(this.foo);
    
    // Note que estamos retornando uma arrow function:
    return () => {
      console.log(this.foo);
    };
  }
}

const instance = new Class('Given String');
const returnedFn = instance.doStuff(); // Irá imprimir no console: "Given String"
returnedFn(); // Irá imprimir no console: "Given String"

A título de comparação, veja o mesmo exemplo, mas alterando a arrow function por uma função anônima convencional:

class Class {
  constructor(foo) {
    this.foo = foo;
  }
  
  doStuff() {
    console.log(this.foo);
    
    // Note que estamos retornando uma função anônima convencional:
    return function() {
      console.log(this); // `this` é undefined. Se tentar acessar `foo`, um erro será lançado.
    };
  }
}

const instance = new Class('Given String');
const returnedFn = instance.doStuff(); // Irá imprimir no console: "Given String"
returnedFn(); // Irá imprimir no console: undefined


Visto isso, eu não sei nem porque você quer acessar o this dentro da função que você já está chamando ao exportá-la. Aliás, você não está nem exportando a função, mas sim o seu retorno, que me parece vir a ser undefined, porque não há return explícito.

Para saber mais:

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .