La función bind

Clase 19 de 51 • Fundamentos de JavaScript 2017

Clase anteriorSiguiente clase

Resumen

El método bind devuelve otra función que asigna el this a lo que nosotros le pasamos como parametro

Jesús Rosas Ramírez

student•

Para más información recuerden consultar la documentación
documentación método bind()

Antonio Mesa Casares

student•

Me pierdo con el This, bind, etc… uuf.

Diego A de la Cruz Rojas

student•

Yo estoy igual amigo. Aparte que no me corre el codigo.

Paul Santaria

student•

https://medium.com/entendiendo-javascript/entendiendo-this-javascript-cba60c8cec8c

lee un poco

Filiberto Santillán

student•

Gente, si tienen problemas con this, les dejo el siguiente artículo para que lo entiendan un poco mejor: https://platzi.com/fundamentos-javascript/tutoriales/this-en-diferentes-situaciones-y-su-comportamiento/

Franklin Lucero

student•

Como he aprendido con esta clase! Siento que veo todo mas claro! Me siento mas poderoso! jajaja

Eden Gomez Gress

student•

aqui mi explicacion

class Toggable { // clase Toggable
    constructor(el) {
        // inicializar el estado interno
        this.el = el // hace referencia al elemento html (boton)
        this.el.innerHTML = 'Off' // pone por defaul el texto off dentro del boton
        this.activated = false// pone el el boton en un valor boolean false/off, true/on
    
    //  Hace referencia al metodo onClick del constructor usando la funcion 'bind'
    //  y pasando en esta por parametro la palabra 'this'
        this.onClick = this.onClick.bind(this)
    //esta linea agrega un evenListener al elemento (el), diciendo que al dar click
    //al boton, este regresara un 'call back' o una funcion de regreso que estara 
    //declarada como metodo dentro de la clase. se tiene que refererir con la
    //palabra reservada 'this' 
        this.el.addEventListener('click', this.onClick)
    }
//  Metodo que se ejecurara cuando el clic al boton se haiga ejecutado
    onClick(ev) {
//  Esta linea le cambia el valor a this.activate (ahora sera true)
        this.activated = !this.activated
        this.toggleText()// Ejecuta el metodo toggleText() declarado dentro 
//del constructor
    }
//  Este metodo va a cambiar el texto dentro del boton, eso seria de 'off' a
//  'on'  
    toggleText() {
        this.el.innerHTML = this.activated ? 'On' : 'Off'
    }
}

const button = document.getElementById('boton')

const miBoton = new Toggable(button)

José Ignacio Miranda

student•

Como tendría que hacer en el .bind si lo que quiero mandar predefinido es el 2do parámetro?

Carlos Raez

student•

Yo tambien quiero Saberlo!!!

Cristian Camilo Sosa Pinzon

student•

Se puede utilizar el bind para crear una función parecida a la clase de closure en el ejercicio de los prefijos:

makePrefixer=(pre,palabra)=>console.log(${pre}${palabra})

    const frase=makePrefixer.bind(null,"re")
	frase("bonito")
		rebonito

Andrés Felipe Eslava Zuluaga

student•

Sí!

Andrés Felipe Eslava Zuluaga

student•

PARA QUIENES LLEGUEN ACÁ Y SIGAN SIN COMPRENDER EL USO DE .bind()
Leer ----> https://medium.com/@dave_lunny/bind-for-dummies-5d1a750725b8

Andrés Madrigal

student•

que risa cuando se hace la retrospectiva del curso y te das cuenta que uno de los primeros videos se llama: “no existen clases en javascript”

Agustín Emanuel Soria

student•

hice todo el código igual, me carga el javascript, lo probe con distintos console log, pero no me cambia el texto del botón ¿Qué puede ser?

class Toggable{
  constructor(el){
    // inicializar estado interno
    this.el = el
    this.el.innetHTML = 'Off'
    this.activated = false
    this.onClick = this.onClick.bind(this)
    this.el.addEventListener('click', this.onClick)
  }

  onClick(ev){
    // cambiar estado interno y llamar a toggleText
    this.activated = !this.activated
    this.toggleText()
  }

  toggleText(){
    // cambiar texto del botón
    this.el.innetHTML = this.activated ? 'On' : 'Off'
  }
}

const button = document.getElementById('boton')

const miBoton = new Toggable(button)

Santiago Ricci

student•

Hola Agustin, está mal escrito el innerHTML en tu código.

Saludos

Jordy Rojas Aliaga

student•

¿Qué es un callback? lo menciona en el minuto 8:40 U_U

Mariandrea Cruz

student•

Un callback es una función que se ejecuta después de que otra función se haya terminado de ejecutar.

Carlos Francisco Betancourt Requena

student•

Hola, muy buena respuesta María, en caso de que no haya queda muy claro, encontré este vídeo: https://www.youtube.com/watch?v=O6YT-JJZ3P8

Saludos!

Ignacio Esteban Aredez Diaz

student•

Muy buenas explicaciones Sacha

Noé Muñoz

student•

Es interesante la función bind, ya que nos sirve mucho para “SETEAR” código, algo que veo es que tuvimos que escribir mucho código nada más para esto 😦

Platzi Team

student•

Por el momento no le veo mucha utilidad al declarar por defecto el primer parámetro de la función con Bind. Aparte que es algo raro pasar saludar.bind(null, "nombre")

Victor Cerriteño

student•

una utilidad que bind tiene es que si tienes una funcion la cual llamas desde setTimeOut() al agregar .bind() puedes asignar una variable x que para esa ejecucion permanecera con el valor al momento de definirlo y que ensegida puede cambiar de valor pero pasado el tiempo cuando se ejecute tu funcion mantendra el valor definido al principio muy util en realidad

Kevin Daniel Guzmán Delgadillo

student•

Perfectamente entendido, muy buena explicación

Javier Nava

student•

Falto decir que en las arrow function coloca el bind() por defecto porque se ejecutan segun el contexto donde se encuentren, esto es una diferencia de arrow function y funciones anonimas

Matias Oliva

student•

Lo dijo en el video anterior.

Roberto Requena

student•

Si no entendí mal en el ejemplo explicado, con el método “bind” al fijar un parámetro estaríamos haciendo o simulando el “closures”?

GEORGIE WLADIMIR DUARTE CADENAS

student•

What the “THIS”?? XD volver a ver en 3,2,1…

Alexis Antonio Moraga Gallardo

student•

Hola les comparto mi repositorio con el avance del curso.

Repositorio

en el están los ejercicios realizados en clase comentados adema de mis notas personales

<script>/*Funcion Bind*/</script>

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
  <button type="button" name="button" id="boton"></button>
  </body>
</html>

<script>
class Togable {//creamos la clase Togeable
  constructor(el) {//añadimos el constructor de la clase
    this.el = el//asignamos el valor de el
    this.el.innerHTML = 'Off'//establecemos un texto predeterminado
    this.activate = false//establecemos la propuedad activate como false
    this.el.addEventListener('click', this.onclick.bind(this))//ponemos el elemento a la eschucha del evento click
    //como primer parametro le pasamos el evento que espera, y como segundo parametro un callback que ejecuta una funcion
    //cuando el evento sea disparado. Usamos el bind, ya que la funcion addEventListener cambia el contexto del this
  }

  onclick(){//establecemos la funcion onClick
    //cambiar el estado ed on a of y viceversa
    this.activate = !this.activate//asignamos a activate el valor contrario al qe tenia
    this.toggleText()//llamamos a la funcion toggleText
  }

  toggleText(){//establecemos la funcion toggle text
    //cambiar el texto
    this.el.innerHTML= this.activate ? 'On' : 'Off'//usamos el operador ternario para cambiar el valor de nuestro objeto
    //dependiendo si el valor de activate es true, o false.
  }
}

const button = document.getElementById('boton')
//asignamos a la constante boton el valor del elemento html que seleccionamos mediante su id usando getElementById

const miBoton  = new Togable(button)
//creamos una nueva instancia de la clase Togeable usando el boton
</script>


<script>
  /*Otro uso de bind es guardar parametros */

function saludar(nombre,apellido){//creamos una funcion llamada saludar
  //esta funcion recive dos parametros, un nombre y un apellido, para rfetornar un saludo
  console.log(`Hola ${nombre} ${apellido}`)//retornamos el saludo incluyendo nombre y apellido
}

saludar("alexis", "moraga")//llamamos a la funcion

const saludarAlexis = saludar.bind(null,"alexis")
//creamos una variable llamada saludarAlexis y le asignamos como valor la funcion saludar
//pero usamos la funcion bind, como primer parametro le pasamos null, ya que para este caso el contexto no es necesario
//y como segundo parametro le pasamos un parametro a recordar
saludarAlexis("moraga")
//llamamos  ala funcion saludarAlexis y solo pasamos como parametro el apllido, ya que la funcion recuerda el primer parametro mediante el Bind

</script>

/*
-> bind() esta funcion trae al scope local de una funcion el contexto externo del this, y nos permite usar ese contexto dentro de la funcion}
*/

Diego Alexander Guatibonza Bello

student•

Una pregunta en mi intento de comprender el this lo que esta haciendo sacha en la imagen lo entiendo yo como si estuviera creando una variable temporal el y le asigno "el " ,estoy muy equivocado?

Iván Toro

student•

La variable ‘el’ del this, es decir ‘this.el’ es un atributo que pertenecera al objeto que se cree cuando se invoque la instrucción:
var objeto = new Toggable('argumento')
Y esta tomara como valor el que se le ingrese como parámetro en la variable ‘el’ de la función constructor(el).

class Toggable {
  constructor(el){
    // Vemos quien es 'this' en este
    // punto de la ejecución
    console.log(this)
    // Asignamos el valor del parametro a un nuevo
    // atributo del objeto
    this.atributoEl = el
  }
}

var objeto = new Toggable('argumento') 
// Toggable {}

La función bind

Estamos renovando el Curso de Fundamentos de Javascript

¿Dónde aprender JS actualizado?

Bases del lenguaje

Bienvenido al curso

Calcula el área de un triángulo. Creando funciones

¿Quiénes pueden pasar a ver una película? Ejercicio con condicionales, expresiones y booleanos

Inventar un idioma manipulando strings

¿Cuántos kms corre una persona en promedio? Entendiendo el ciclo for

¿Quién gana en una pelea: Gokú o Superman? Resolviendo este problema con ciclos while

¿Cuánto tiempo pasó desde tu fecha de nacimiento?

Objetos en JavaScript

Calcular la distancia entre dos puntos - Objetos en JavaScript

Agrega métodos para mover los puntos - Objetos Avanzado en JavaScript

Definiendo la clase Punto - Prototipos en JavaScript

Definiendo la clase Punto - Object.create en JavaScript

Definiendo la clase Punto - Class en JavaScript

Conocimientos intermedios

Entiende el scope de las variables

Operaciones con arrays

Entiende los closures de JavaScript

Estructura del lenguaje

¿Quién es this?

This, _this y los arrow functions

La función bind

call y apply

ECMAScript 5, 2015, 2016, Babel y otros cuentos

ECMAScript: El estándar en el que se basa JavaScript

Babel al rescate: logrando la compatibilidad buscada

Distintas formas de escribir módulos en JavaScript

Procesos asíncronos

No generes un cuello de botella en el EventLoop

Los callbacks de JavaScript

Callback a un servidor externo

Promesas

Async-await

Implementación de set timeout en JavaScript

Implementación de set interval en JavaScript

Cancelando el Timeout y el Timeinterval

Qué son y cómo se implementan el callbacks en JavaScript

Eliminando el callback hell usando promesas en JavaScript

Estructuras de datos y funciones avanzadas

Funciones Recursivas

Memoizacion

Iteradores en JavaScript

Generadores en JavaScript

Estructuras de Datos Inmutables en JavaScript

Creando un paquete para NPM

Requisitos Técnicos

Creando nuestro paquete

Escribiendo el código de nuestro paquete

Testeando el paquete

Publicando el paquete en NPM

Juego de HTML

¿Qué vamos a construir?

Inicializando el juego

A una ronda le sigue otra ronda

Añadir una librería

Cierre del Curso

Desafíos

Crear un modulo para convertir medidas de peso

Crear un juego en HTML, tic tac toe

Crear un tutorial