Vanilla Javascript - #45 Call, Apply e Bind

Neste tutorial iremos tratar dos métodos manipuladores do this, dentre eles veremos as funções: call, apply e bind.

Banco de Dados

Pra fazer nossos testes, vamos criar um banco de dados com uma tabela book no nosso PhpMyAdmin pra receber os dados do db e chamar através das funções manipuladoras do this.

CREATE DATABASE teste;
USE teste;
CREATE TABLE IF NOT EXISTS `book` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`title` varchar(90) COLLATE utf8mb4_unicode_ci NOT NULL,
`pages` int(11) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
INSERT INTO `book` (`id`, `title`, `pages`) VALUES
(1, 'E o vento levou', 100),
(2, 'A onda', 300),
(3, 'Carros', 40);
COMMIT;

Controller PHP

Vamos criar controller no PHP para buscar os dados vindos do banco de dados.

<?php
$pdo=new PDO("mysql:host=localhost;dbname=teste","root","");
$sql=$pdo->prepare("select * from book");
$sql->execute();
$data=$sql->fetchAll(PDO::FETCH_ASSOC);
echo json_encode($data);

Para testar as funções call, apply e bind, utilizaremos o javascript com ajax:

(function (win,doc) {
    'use strict';

    let result=doc.querySelector('.result');

    function data()
    {
        return "O livro é "+this.title+" e tem "+this.pages+" páginas.";
    }

    /*let book1={
        title:"E o vento levou",
        pages: 100
    };

    let book2={
        title: "A onda",
        pages: 50
    };
    result.innerHTML=data.call(book2);*/

    let ajax=new XMLHttpRequest();
    ajax.open('GET','controller.php');
    ajax.onreadystatechange=function(){
      if(ajax.status===200 && ajax.readyState === 4){
          let res=JSON.parse(ajax.responseText);
          res.map(function(elem,ind,obj){
              let child=doc.createElement('div');
              //child.innerHTML=data.call(elem,'thiago',18);
              //child.innerHTML=data.apply(elem,['Thiago',18]);
              let newFunction=data.bind(elem);
              child.innerHTML=newFunction();
              result.appendChild(child);
          });
      }
    };
    ajax.send();

})(window,document);

Call x Apply

O Call e o apply executam a mesma função, a diferença entre eles é a forma com que passamos os parâmetros, o call é passado através de vírgula e o apply através de um array:

child.innerHTML=data.call(elem,'thiago',18);
child.innerHTML=data.apply(elem,['Thiago',18]);

Sucesso nos códigos e na vida!