Tambien en esta clase se habla de los Bindings (minuto 5:15) de esto habla del contexto de ejecucion, de como la palabra this esta vinculada a una funcion **este tema es importante de repasar **
Binding en JavaScript se refiere a cómo la palabra clave this está vinculada o asociada en una función. Así que, entender los diferentes tipos de “binding” es esencial para comprender cómo se comporta this en diferentes situaciones. Veamos los cinco tipos principales de “binding”:
Implicit Binding:
Ocurre cuando se invoca un método de un objeto, y this se vincula al objeto que contiene el método.
Ejemplo:
const person = {
name: 'Adam',
greet: function() {
console.log(Hello, I'm ${this.name});
}
};
person.greet(); // Output: Hello, I'm Adam
Explicit Binding:
Ocurre cuando se usan métodos como call(), apply(), o bind() para establecer explícitamente el valor de this.
Ejemplo:
function greet() {
console.log(Hello, I'm ${this.name});
}
const adam = { name: 'Adam' };
greet.call(adam); // Output: Hello, I'm Adam
El término "enlace explícito" en JavaScript se refiere al proceso de establecer el valor de this de manera deliberada y explícita en una función, en lugar de depender del comportamiento de enlace implícito. En JavaScript, el valor de this dentro de una función puede cambiar dependiendo de cómo se llama esa función. El enlace implícito ocurre cuando el valor de this se establece automáticamente por el contexto de ejecución en el que se llama la función. Por otro lado, el enlace explícito te permite especificar manualmente el valor de this utilizando métodos como call(), apply(), o bind(). Otros tipos de binding
Ejemplo con call()
// call()
function newDogGreeting(owner,address){
console.log(Hi, im ${this.dogName} and u live with ${owner} in ${address});
}
const newHouse = {
dogName: 'Coconut'
}
const owner = 'lucy'
const address = 'Avenue 123'
newDogGreeting.call(newHouse,owner,address)
Ejemplo con apply()
function newDogGreeting(owner,address){
console.log(Hi, im ${this.dogName} and u live with ${owner} in ${address});
}
const newHouse = {
dogName: 'Coconut'
}
const owner = 'lucy'
const address = 'Avenue 123'
const necessaryValues = [owner,address]
newDogGreeting.apply(newHouse,necessaryValues)
Ejemplo con bind()
function newDogGreeting(owner,address){
console.log(Hi, im ${this.dogName} and u live with ${owner} in ${address});
}
const newHouse = {
dogName: 'Coconut'
}
const owner = 'lucy'
const address = 'Avenue 123'
const bindingWithBind = newDogGreeting.bind(newHouse,owner,address)
console.log(typeof bindingWithBind);
bindingWithBind()
New Binding:
Ocurre cuando una función se invoca con la palabra clave new, creando así un nuevo objeto y vinculando thisa ese objeto.
Ejemplo:
function Person(name) {
this.name = name;
}
const adam = new Person('Adam');
console.log(adam.name); // Output: Adam
Lexical Binding:
Ocurre cuando se utiliza thisen una función dentro de otra función. En este caso, this se vincula al contexto léxico de la función exterior.
Ejemplo:
const person = {
name: 'Adam',
greet: function() {
const innerFunction = () => {
console.log(Hello, I'm ${this.name});
};
innerFunction();
}
};
person.greet(); // Output: Hello, I'm Adam
Window Binding:
Ocurre cuando ninguna de las reglas anteriores se aplica y this se vincula al objeto global (por ejemplo, window en el navegador).
Ejemplo (ejecutar en el navegador):
function showName() {
console.log(this.name);
}
window.name = 'Adam';
showName(); // Output: Adam