JSFiddle - React, Tailwind, and code Playground

by Rui Leite

JavaScript

/*
    IMPORTANTE:
    Não se esqueça de abrir o CONSOLE DO NAVEGADOR (F12) para visualizar os resultados! :D
    Minhas conclusões encontram-se no final!
*/

// INICIALIZAÇÃO: DECLARAÇÃO DO PROTÓTIPO DE "Pessoa":
var Person = function(firstName){
    if(!firstName) this.firstName = "Fulano";
    else this.firstName = firstName;
    this.dizerOla = function(){ console.log( "\t" + this.firstName + " diz: \"olá\"."); }
};

var a = new Person("Alberto");



// 1º EXPERIMENTO: DECLARAÇÃO SEM "prototype":
Person.sayHello = function() { console.log("\t" + "Hola, mi nombre es " + this.firstName); };

var b = new Person("Bruno");

console.log("----------------------------------------------\n" + "1ª bateria de testes:");
try { a.sayHello(); } catch(e) { console.log(" *  Falha: a.sayHello()"); }
try { b.sayHello(); } catch(e) { console.log(" *  Falha: b.sayHello()"); }



// 2º EXPERIMENTO: DECLARAÇÃO EM UMA INSTÂNCIA ESPECÍFICA:
b.sayHello = function() { console.log(" *  Oi, meu nome é " + this.firstName); };

console.log("----------------------------------------------\n" + "2ª bateria de testes:");
try { a.sayHello(); } catch(e) { console.log(" *  Falha: a.sayHello()"); }
try { b.sayHello(); } catch(e) { console.log(" *  Falha: b.sayHello()"); }



// 3º EXPERIMENTO: DECLARAÇÃO EFETIVA DA FUNÇÃO NO PROTÓTIPO:
Person.prototype.sayHello = function() { console.log("\t" + "Hello, I'm " + this.firstName); };

var c = new Person("Claudio");

console.log("----------------------------------------------\n" + "3ª bateria de testes:");
try { a.sayHello(); } catch(e) { console.log(" *  Falha: a.sayHello()"); }
try { b.sayHello(); } catch(e) { console.log(" *  Falha: b.sayHello()"); }
try { c.sayHello(); } catch(e) { console.log(" *  Falha: c.sayHello()"); }



// 4º EXPERIMENTO: SOBRESCREVER UMA FUNÇÃO COMPONENTE DA DECLARAÇÃO DO PROTÓTIPO:
Person.prototype.dizerOla = function() {
    console.log("\t" + this.firstName + " consegue dizer outra coisa... Ou não!");
}
b.dizerOla =...