Isto, vincular, chamar e aplicar em JavaScript | Explicado

Vincular, chamar e aplicar são métodos realmente úteis e especiais que nos ajudam a obter empréstimos de recursos e métodos de um objeto para outro usando a referência “esse”. Este é um tópico um pouco avançado, é por isso que vamos levar as coisas devagar para você e explicar todos os detalhes minuciosos com exemplos.

JavaScript e muitas outras linguagens de programação usam a palavra -chave esse Para passar a referência do objeto/classe pai para suas funções e métodos dentro deles. Enquanto, a ligação, a chamada e aplique os métodos funcionam na aprovação da referência aos atributos de emprestado de um objeto para outro. O recurso Bind, Call and Apply foi adicionado no JavaScript na versão ECMA2015.

A referência "This"

A palavra -chave esse tem um significado muito específico em JavaScript, refere -se ao objeto que está chamando a função. Se estamos trabalhando com um método construtor, a palavra -chave esse se referiria à classe e suas propriedades, se estivermos trabalhando com alguns elementos DOM, então esse palavra -chave se referiria aos valores globais do DOM.

Para demonstrar isso, crie o seguinte objeto usando as seguintes linhas:

var pessoa =
Nome: "John Doe",
Idade: 25,
Designação: "Auditor",
PrintName: function ()
console.log (isso.nome);
,
;

Como você pode ver, dentro da pessoa do objeto, temos uma função PrintName que imprimirá o nome da pessoa e dentro do console.registro() Podemos ver que temos a linha:

esse.nome;

Esse A palavra -chave está criando uma referência ao objeto e diz ao compilador para buscar o "nome" deste objeto em particular.

Ligue e aplique métodos

Chamar e aplicar Ambos podem ser definidos simultaneamente porque têm quase exatamente a mesma mecânica de trabalho. Chamada e aplicação são usadas para empréstimos de função, empréstimos de função meios para usar a função de algum outro objeto e usar a referência de algum outro objeto.

Para entender melhor esse conceito, crie dois objetos diferentes usando as seguintes linhas de código:

var Person1 =
Nome: "John Doe",
Idade: 25,
Designação: "Auditor",
PrintName: function ()
console.log (isso.nome);
,
;
var pessoa2 =
Nome: "Baba Yaga",
Idade: 22,
Designação: "Desempregado",
;

Como você pode ver no trecho de código, temos quase a mesma estrutura dos objetos e dos mesmos pares de valor-chave, exceto pelo fato de que Person1 tem a função PrintName enquanto pessoa2 não. Mas se você quiser imprimir o "nome" do pessoa2 objeto, você pode fazer isso usando o método "PrintName" do Person1 objeto, e para o “esse”Referência, você passa na referência do objeto pessoa2.

Sintaxe de chamada e aplicar:

A sintaxe de ambos os métodos é quase idêntica:

Para o método de chamada, a sintaxe é como:

obj1.função.Call (referenceofobject2, arg1 arg2, arg3…);

Para aplicar o método, a sintaxe é como:

obj1.função.aplicar (referenceofobject2, [arg1, arg2, arg3,…]);

Observação: se a função que você está emprestando precisar de alguns argumentos adicionais, então no Método de chamada Você passa nos argumentos separados por uma vírgula ",, e no caso do método de aplicação, você passa argumentos adicionais como um Lista de matrizes.

Usando métodos de chamada e aplicação

Voltando ao nosso problema original, podemos usar o “PrintName”Função do“Person1”Objeta -se a imprimir o nome do pessoa2 Objeto usando a seguinte linha de código:

Person1.PrintName.Call (Person2);

Se você executar o comando acima, verá a seguinte saída:

Da mesma forma, você pode usar o aplicar() Método para o mesmo objetivo usando o código:

Person1.PrintName.aplicar (Person2);

Mas e se o printName () A função está apresentando alguns argumentos como:

PrintName: function (cidade, irmãos)
console.log ('$ this.nome de $ city possui $ irmãos irmãos ');
,

Para este caso, você usará a função de chamada com a seguinte linha de código:

Person1.PrintName.Call (Person2, "Nova York", 4);

O trecho de código completo é como:

var Person1 =
Nome: "John Doe",
Idade: 25,
Designação: "Auditor",
PrintName: function (cidade, irmãos)
console.log ('$ this.nome de $ city possui $ irmãos irmãos ');
,
;
var pessoa2 =
Nome: "Baba Yaga",
Idade: 22,
Designação: "Desempregado",
;
Person1.PrintName.Call (Person2, "Nova York", 4);

Se você executar o seguinte código, obterá a saída como:

Como você pode ver, você conseguiu passar os argumentos usando o método de chamada, você pode fazer isso usando o aplicar() Método também usando o seguinte snippet de código:

var Person1 =
Nome: "John Doe",
Idade: 25,
Designação: "Auditor",
PrintName: function (cidade, irmãos)
console.log ('$ this.nome de $ city possui $ irmãos irmãos ');
,
;
var pessoa2 =
Nome: "Baba Yaga",
Idade: 22,
Designação: "Desempregado",
;
Person1.PrintName.aplicar (Person2, ["Nova York", 4]);

Observação: para passar argumentos para a função emprestada através do aplicar() Método, estamos usando uma matriz contendo os argumentos.

Se você executar este código, obterá a mesma saída idêntica que:

Mas e se você não quiser emprestar uma função de algum objeto? É aqui que o Método de ligação entra em jogo.

O método bind ()

Ao contrário do chamar e aplicar métodos, vincular Os métodos são usados ​​para criar uma cópia de uma função e, em seguida, colocam a função como um atributo do objeto para que a função possa ser usada posteriormente.

Sintaxe do método de ligação

A sintaxe é como:

var newFunctionName = objeto1.função.bind (referencetoObject2);

Nota: O método de ligação retorna uma função que é replicada.

Para demonstrar isso, vamos alterar o código do exemplo acima dessa maneira:

var Person1 =
primeiro nome: "John",
LastName: "Doe",
Idade: 25,
PrintfullName: function ()
console.log (isso.primeiro nome + "" + este.sobrenome);
,
;
var pessoa2 =
primeiro nome: "Baba",
Nome do último: "Yaga",
Idade: 25,
;

Agora, se você quiser fazer uma cópia da função PrintfullName do objeto Person1 e faça disso um atributo do objeto pessoa2 Então você pode fazer isso usando a seguinte linha de código:

var printMyName = Person1.PrintfullName.bind (Person2);

Com esta linha, você tem “vinculado”Uma função de atributo PrintMyname com o objeto pessoa2, E você pode invocar usando o comando:

printMyname ()

Nota: você não está chamando com o pessoa2 objeto usando o operação do ponto porque a referência ao pessoa2 objeto já está “vinculado”Para a função.

O trecho de código completo é como:

var Person1 =
primeiro nome: "John",
LastName: "Doe",
Idade: 25,
PrintfullName: function ()
console.log (isso.primeiro nome + "" + este.sobrenome);
,
;
var pessoa2 =
primeiro nome: "Baba",
Nome do último: "Yaga",
Idade: 25,
;
var printMyName = Person1.PrintfullName.bind (Person2);
printMyname ();

Quando você executa este trecho de código, você obtém a seguinte saída:

Lá vai você, você duplicou uma função de Person1 objeto, passou a referência de pessoa2 objeto, e armazenou -o como uma função separada.

Conclusão

Ligue, vincule e aplicar Os métodos são métodos complicados que são usados ​​para jogar com a referência dos objetos e ajudá -lo a alcançar feitos como empréstimos de função e replicação de funções com uma referência diferente. Para entender os detalhes dessas funções, precisamos saber qual a palavra -chave esse significa em javascript e como a referência funciona em js. Você aprendeu sobre o funcionamento disso, ligue, aplica e vincule métodos junto com seus exemplos.