Todos posts

.bind(), Arrow functions e o this

Se você passou por algum código de javascript nos ultimos tempos, seja em livros, artigos ou tutoriais, existe grandes chances de ja ter deparado ou com um .bind(this) ou com uma arrow function. Se você não sabe a função deles, vamos lá.

Photo by Ben White on Unsplash

.bind()

O método bind está presente no javascript há bastante tempo (segundo o can i use, suportado desde o ECMAScript 5, até o IE9 tem suporte), ele tem como função principal , a grosso modo de dizer, “setar” o this da função que está sendo chamada, ou seja, ele é capaz de definir o contexto da função. Por exemplo:

function showName() {
  console.log(this.name);
}

let user1 = { name: 'João' };
let user2 = { name: 'Paulo' };

showName(); // undefined
showName.bind(user1).call(); // João
showName.bind(user2).call(); // Paulo

Arrow Functions

As arrow functions surgiram no ES2015, com elas é possível passar o contexto automaticamente sem o uso do .bind().

let arr = [1, 2, 3, 4, 5];
let arrDouble = arr.map((item) => item * 2);

// console.log(newDouble);
// [2, 4, 6, 8, 10]

O caos do this

Geralmente vemos o emprego do .bind() para repassar o contexto this do atual contexto.

Mas por que isso?

Simples, porque o contexto this se “perde”, principalmente, por meio de callbacks, pegando o exemplo:

let person = {
  firstName: 'João',
  lastName: 'Silva',

  fullName: function() {
    return `${this.firstName} ${this.lastName}`;
  },

  show: function() {
    window.setTimeout(function() {
      console.log(this.fullName());
    }, 100);
  },
};

person.show();

Note que ao tentar executar esse código, irá surgir um erro de execução: this.fullName is not a function

Quando o callback da função window.setTimeout precisar acessar o this, não será mais o mesmo contexto presente em show. Pra isso, podemos usar as duas formas para “resolver” esse detalhe:

  • Podemos repassar o contexto do show para o callback de window.setTimeout usando o .bind():
let person = {
  firstName: 'João',
  lastName: 'Silva',

  fullName: function() {
    return `${this.firstName} ${this.lastName}`;
  },

  show: function() {
    window.setTimeout(
      function() {
        console.log(this.fullName());
      }.bind(this),
      100,
    );
  },
};

person.show();
  • Ou podemos utilizar da propriedade das arrow functions de repassar o contexto, assim o contexto de show é repassado automaticamente:
let person = {
  firstName: 'João',
  lastName: 'Silva',

  fullName: function() {
    return `${this.firstName} ${this.lastName}`;
  },

  show: function() {
    window.setTimeout(() => {
      console.log(this.fullName());
    }, 100);
  },
};

person.show();

Photo by Anurag Harishchandrakar on Unsplash


Vlw e até a próxima!!