> For the complete documentation index, see [llms.txt](https://shimozurdo.gitbook.io/frontend/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shimozurdo.gitbook.io/frontend/html5/javascript/call-apply-y-bind.md).

# Call, Apply y Bind

## Call

Usando el método `call`, podemos invocar una función, pasando un valor que será tratado como `this` dentro de ella.<br>

```javascript
const obj = {
  myName: "khriztianmoreno",
  printName: function () {
    console.log(this.myName);
  },
};

obj.printName(); // khriztianmoreno

const newObj = {
  myName: "mafeserna",
};

obj.printName.call(newObj); //mafeserna
```

En el ejemplo anterior, estamos invocando el método `call` en la función `printName` al pasar `newObj` como parámetro, por lo que ahora `this` dentro de `printName` apunta a `newObj`, por lo tanto, `this.myName` imprime `mafeserna`.

### Argumentos

```javascript
function foo(param1, param2) {}
foo.call(thisObj, arg1, arg2);
```

dónde:

* `foo` es la función que estamos invocando al pasar el nuevo valor `this` que es `thisObj`
* `arg1`, `arg2`, son los argumentos adicionales que tomará la función `foo` ( `param1`= `arg1` , `param2` = `arg2` )

## Apply

La función `apply` es muy similar a la función `call`. La única diferencia entre `call` y `apply` es la diferencia en cómo se pasan los argumentos.

* `call` — pasamos argumentos como valores individuales, comenzando desde el segundo argumento
* `apply` — los argumentos adicionales se pasarán como un arreglo

```javascript
function sayHello(greet, msg) {
  console.log(`${greet} ${this.name} ! ${msg}`);
}

const obj = {
  name: "khriztianmoreno",
};

// Call
sayHello.call(obj, "Hello", "Good Morning"); 
// Hello khriztianmoreno ! Good Morning

// Apply
sayHello.apply(obj, ["Hello", "Good Morning"]); 
// Hello khriztianmoreno ! Good Morning
```

en el ejemplo anterior, tanto el método `call` como `apply` en la función `sayHello` están haciendo lo mismo, la única diferencia es cómo estamos pasando argumentos adicionales.

## Bind

A diferencia de los métodos `call` y `apply`, `bind` no invocará la función directamente, sino que cambiará el valor `this` dentro de la función y devolverá la instancia de la función modificada.

Podemos invocar la función devuelta más tarde.<br>

```javascript
function sayHello() {
  console.log(this.name);
}

const obj = { name: "khriztianmoreno" };

// it won't invoke, it just returns back the new function instance
const newFunc = sayHello.bind(obj); 

newFunc(); // khriztianmoreno
```

**pasando argumentos adicionales:**\
pasar argumentos adicionales en `bind` funciona de manera similar al método `call`, podemos pasar argumentos adicionales como valores individuales a partir del segundo argumento del método `bind`.<br>

```javascript
function sayHello(greet) {
  console.log(`${greet} ${this.name}`);
}

const obj = { name: "khriztianmoreno" };

const newFunc = sayHello.bind(obj, "Hello");
newFunc(); // Hello khriztianmoreno
```

En el caso del método `bind`, podemos pasar argumentos adicionales de dos formas:

* Al llamar al método `bind` en sí mismo, podemos pasar argumentos adicionales junto con el valor de `this` a esa función.
* Otra forma es que podemos pasar argumentos adicionales mientras invocamos la función de retorno del método `bind`.

Podemos seguir cualquiera de las formas anteriores y funciona de manera similar sin ninguna diferencia en la funcionalidad.<br>

```javascript
function sayHello(greet) {
  console.log(`${greet} ${this.name}`);
}

const obj = { name: "khriztianmoreno" };
const newFunc1 = sayHello.bind(obj, "Hello");
newFunc1(); // Hello khriztianmoreno

const newFunc2 = sayHello.bind(obj);
newFunc2("Hello"); // Hello khriztianmoreno
```

**NOTA**: *si no pasamos ningún valor o pasamos`null` mientras llamamos a los métodos `call`, `apply`, `bind`, entonces `esta` función interna de llamada apuntará al objeto `global`.*<br>

```javascript
function sayHello() {
  // executing in browser env
  console.log(this === window);
}

sayHello.call(null); // true
sayHello.apply(); // true
sayHello.bind()(); // true
```

**No podemos usar los métodos** `call`, `apply` y `bind` en las funciones flecha para cambiar el valor de `this`, porque **las funciones de flecha no tienen su propio contexto** `this`.

El `this` dentro de la función de flecha apuntará a la función externa/principal en la que está presente.

Por lo tanto, aplicar estos métodos en la función de flecha no tendrá ningún efecto.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://shimozurdo.gitbook.io/frontend/html5/javascript/call-apply-y-bind.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.