v0.2.5

Author: Zelechos

Vanilla JavaScript/Nuevos_Tipos/10_Call&Apply&Bind.js

@@ -2,6 +2,8 @@
 
 // Call , Apply , Bind
 // son metodos que nos ayudar a manejar el contexto de diferentes ambitos para llevar y traer datos de diferentes objetos.
+
+// sabemo que en estos momentos el this tendra el contexto de window por defecto
 console.log(this);
 
 this.lugar = "Global Context";
@@ -10,32 +12,38 @@ function greet(context){
     console.log(`${context}`);
 }
 
+// aqui estamos en el contexto global
+console.warn(`---------- Llamamos a nuestra funcion greet ---------------`);
+greet(this.lugar);
+
 function greetContext(greet, name){
     console.log(`${greet} ${name} desde el ${this.lugar}`);
 }
 
-greet(this.lugar);
-
-// Creamos un objeto para probar en contexto se encuentra
-
+// Creamos un objeto para probar el contexto donde se encuentra
 const object = {
     lugar : "Object Context",
 }
 
 // con el metodo call(); LLamamos al this de un objeto 
+console.warn(`---------- trayendo el contexto de un objeto con call() ---------------`);
 greetContext.call(object, "Hola", "Alex");
 
 // si le pasamo como parametro al metodo call(); this nos manda al contexto global
+console.warn(`---------- trayendo el contexto de window con call() ---------------`);
 greetContext.call(this, "Hola", "Alex");
 
 
 // tambien con el metodo apply(); llamamos tambien al this del objeto que metemos como parametros
+console.warn(`---------- trayendo el contexto de un objeto con apply() ---------------`);
 greetContext.apply(object, ["Adios", "Coder"]);
 
 // si mandamos como parametros this al metodo apply() pasa los mismo
+console.warn(`---------- trayendo el contexto de window con apply() ---------------`);
 greetContext.apply(this, ["Adios", "Coder"]);
 
 
+// Aprendiendo a usar bind()
 this.name= "Window";
 
 // Creamos otro objeto
@@ -54,3 +62,16 @@ const monster = {
 }
 
 monster.greet();
+
+// ahora creo otro objeto como repaso de lo anterior
+console.warn(`------------ usando el metodo bind()---------------`);
+const programmer = {
+    profession : "Programmer",
+    speciality : "Hacker",
+    greetPerson : person.greet.bind(person),
+    greetMonster : monster.greet.bind(monster)
+}
+
+// verificamos si pudimos traer los contexto de ambos objetos
+programmer.greetPerson();
+programmer.greetMonster();

Vanilla JavaScript/This/01_This.js

@@ -0,0 +1,60 @@
+'use strict'
+
+// This
+
+// muestra valores en base a su contexto
+
+// el contexto actual de this es el del objeto window por defecto
+console.log(this);
+console.log(window);
+console.warn(this === window);
+
+this.name = "Global";
+
+console.log(this.name);
+
+function print(){
+    console.log(this.name);
+}
+
+console.warn(`------------- Cambiamos en contexto de this con otros objetos-------------`);
+
+// creamos un objeto para cambiar el contexto de this
+const users = {
+    name : "My users context",
+    print
+    // Como se puede apreciar el valor de this cambia dependiendo al contexto que se encuentra
+}
+users.print();
+
+
+// creamos otro objeto para ver otro contexto
+const passwords = {
+    name : "123456siete",
+    print
+}
+passwords.print();
+
+
+const email = {
+    ether : "https://github.com/Zelechos",
+    printEmail : ()=>{
+        console.log(this.name);
+    }
+}
+
+// Aqui como se puede ver un arrow function rompe el contexto del this asignando ese contexto al padre en este caso a el objeto window
+email.printEmail();
+
+console.warn(`----------- Probando this con una constructor------------`);
+// Ahora probamos el this con una funcion constructora
+
+function Programmer(name){
+    this.name = name;
+
+    return ()=> console.log(this.name);
+    
+}
+
+const gusdtav = new Programmer("gustav");
+gusdtav();

Vanilla JavaScript/This/02_Call&Apply&Bind.js

@@ -0,0 +1,77 @@
+'use strict';
+
+// Call , Apply , Bind
+// son metodos que nos ayudar a manejar el contexto de diferentes ambitos para llevar y traer datos de diferentes objetos.
+
+// sabemo que en estos momentos el this tendra el contexto de window por defecto
+console.log(this);
+
+this.lugar = "Global Context";
+
+function greet(context){
+    console.log(`${context}`);
+}
+
+// aqui estamos en el contexto global
+console.warn(`---------- Llamamos a nuestra funcion greet ---------------`);
+greet(this.lugar);
+
+function greetContext(greet, name){
+    console.log(`${greet} ${name} desde el ${this.lugar}`);
+}
+
+// Creamos un objeto para probar el contexto donde se encuentra
+const object = {
+    lugar : "Object Context",
+}
+
+// con el metodo call(); LLamamos al this de un objeto 
+console.warn(`---------- trayendo el contexto de un objeto con call() ---------------`);
+greetContext.call(object, "Hola", "Alex");
+
+// si le pasamo como parametro al metodo call(); this nos manda al contexto global
+console.warn(`---------- trayendo el contexto de window con call() ---------------`);
+greetContext.call(this, "Hola", "Alex");
+
+
+// tambien con el metodo apply(); llamamos tambien al this del objeto que metemos como parametros
+console.warn(`---------- trayendo el contexto de un objeto con apply() ---------------`);
+greetContext.apply(object, ["Adios", "Coder"]);
+
+// si mandamos como parametros this al metodo apply() pasa los mismo
+console.warn(`---------- trayendo el contexto de window con apply() ---------------`);
+greetContext.apply(this, ["Adios", "Coder"]);
+
+
+// Aprendiendo a usar bind()
+this.name= "Window";
+
+// Creamos otro objeto
+const person = {
+    name: "Alex",
+    greet: function(){
+        console.log(`Hello ${this.name}`);
+    }
+}
+
+person.greet();
+
+// ahora vamos a crear otro objeto para enlazar el contexto con el metodo bind();
+const monster = {
+    greet: person.greet.bind(person)
+}
+
+monster.greet();
+
+// ahora creo otro objeto como repaso de lo anterior
+console.warn(`------------ usando el metodo bind()---------------`);
+const programmer = {
+    profession : "Programmer",
+    speciality : "Hacker",
+    greetPerson : person.greet.bind(person),
+    greetMonster : monster.greet.bind(monster)
+}
+
+// verificamos si pudimos traer los contexto de ambos objetos
+programmer.greetPerson();
+programmer.greetMonster();

Vanilla JavaScript/This/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>This en javascript</title>
+    <script type="text/javascript" src="02_Call&Apply&Bind.js"></script>
+</head>
+<body>
+    <style>
+        body{
+            background-color: #000;
+            color: white;
+        }
+    </style>
+    <h1>
+        Nuevos Tipos de datos en Js
+    </h1>
+</body>
+</html>