En la pestaña console de las herramientas para desarrolladores de Chrome, escribí this, y ha mostrado el objeto Window. ¿Cómo this se convierte en objeto de ventana aquí?

console.log(this);

Considere el siguiente fragmento

var firstname = "Javascript";
var lastname = "Lover - SKT";

function getName() {
  this.firstname = "Sivakumar";
  this.lastname = "Tadisetti";
}

console.log(firstname);
getName();
console.log(this.lastname); // How this.lastname is working here?

He leído las siguientes respuestas de StackOverflow

Qué significa esto

esto en javascript

Pero no entendí cómo funciona el fragmento anterior (La línea que comenté)

Actualización:

He intentado el fragmento de código anterior en jsfiddle donde genera this.firstname no está definido. Esa es la razón por la que hago esta pregunta. Pero en el fragmento de código stackoverflow está funcionando bien

-1
Sivakumar Tadisetti 10 sep. 2018 a las 16:16

5 respuestas

La mejor respuesta

En su función, this es lo mismo que window (o cualquiera que sea el contexto global en su tiempo de ejecución). Si fuera un Class method, this sería el Class instance.

Puede cambiar this usando bind, o especificándolo usando apply y call.

Ejemplo de función global

var that = {}

function getTest() {
  console.log(this === window ? "this is window" : "this is not window") 
}

getTest()
getTest.call(that)
getTest.apply(that)
getTest.bind(that)()

Ejemplo Lambda

Si usa la sintaxis lambda, this está vinculado a this en el momento de la llamada y no se puede cambiar.

let that = {}

let fn = () => {
  console.log(this === window ? "this is window" : "this is not window")
}

// this is always window.  You CANNOT this on a lambda.
fn()
fn.call(that)
fn.apply(that)
fn.bind(that)()

Ejemplo de clase

class Foo {
  fn() {
    console.log(this === window ? "this is window" : "this is not window")
  }
  
  // Static methods do not have a `this`, but it can be defined by call and apply, but not bind.
  static fnStatic() {
      console.log(this === window ? "this is window" : "this is not window")
  }
}

// this is Class instance, NOT window
new Foo().fn()
// Change this from class instance to window
new Foo().fn.call(window)
new Foo().fn.apply(window)
new Foo().fn.bind(window)()

// this is undefined in a static method, unless you apply or call.  YOU CANNOT BIND a static method
Foo.fnStatic()
Foo.fnStatic.call(window)
Foo.fnStatic.apply(window)
// YOU CANNOT BIND 
Foo.fnStatic.bind()(window)
6
Steven Spungin 10 sep. 2018 a las 13:41

Si se encuentra en un contexto global, entonces this se refiere a window object.

console.log(this);

this puede referirse al objeto de ventana en una función si el contexto permanece igual

const funcArrow = () => {console.log(this)}
const func = function(){console.log(this)};
//this has no difference
const func2 = function(){console.log(this)}.bind(this);
funcArrow(); func();

El contexto cambia si crea una instancia.

var Car = function(){
  this.name = "bmw";
  console.log(this);
};

class Person {
  constructor(){
    this.name = "john";
    console.log(this);
  }
}

new Car(); new Person();

Para mantener el contexto de la ventana en una instancia, vincúlelo.

class Person {
  constructor(){
    this.name = "john";
  }
  
  logWindow(){
    const someFunc = function(){console.log(this)}.bind(window);
    someFunc();
  };
}

(new Person()).logWindow();
0
kemicofa ghost 10 sep. 2018 a las 13:30

De acuerdo con MDN

En la mayoría de los casos, el valor de esto está determinado por cómo se llama una función. No se puede establecer mediante asignación durante la ejecución, y puede ser diferente cada vez que se llama a la función.

En su caso, comentó que esto se llama por el contexto de ejecución de JavaScript, el contexto que llamó a su programa para ser ejecutado. Dentro de esa variable de contexto vive el apellido y esto significa que es parte de este objeto. Lo está llamando después de su función getTest que cambió el valor de la variable de apellido y es por eso que lo ve en console.log () con su valor cambiado.

0
Lazar Nikolic 10 sep. 2018 a las 13:25

En el contexto de ejecución global (fuera de cualquier función), esto se refiere al objeto global ya sea en modo estricto o no.

Y console.log(this.lastname); tiene un alcance global, así que this se refiere al objeto de ventana.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

0
samee 10 sep. 2018 a las 13:24

En el ámbito global, this en realidad apunta al objeto window. Al invocar getName estás haciendo lo mismo que si:

window.firstname = "Sivakumar";
window.lastname = "Tadisetti";
2
streletss 10 sep. 2018 a las 13:20