ejemplos - ¿Qué subyace a este lenguaje JavaScript: var self=this?

que es javascript

Question

Vi lo siguiente en la fuente de WebKit HTML 5 SQL Storage Notes Demo :

function Note() {
  var self = this;

  var note = document.createElement(''div'');
  note.className = ''note'';
  note.addEventListener(''mousedown'', function(e) { return self.onMouseDown(e) }, false);
  note.addEventListener(''click'', function() { return self.onNoteClick() }, false);
  this.note = note;
  // ...
}

El autor usa el yo en algunos lugares (el cuerpo de la función) y esto en otros lugares (los cuerpos de las funciones definidas en la lista de argumentos de los métodos). ¿Que esta pasando? Ahora que lo he notado una vez, ¿empezaré a verlo en todas partes?

Answer 1

Como otros han explicado, var self = this; permite que el código en un closure remita al ámbito principal.

Sin embargo, ahora es 2018 y ES6 es ampliamente compatible con todos los principales navegadores web. El var self = this; La expresión idiomática no es tan esencial como lo era antes.

Ahora es posible evitar var self = this; a través del uso de funciones de flecha .

En casos en los que hubiéramos usado var self = this :

function test() {
    var self = this;
    this.hello = "world";
    document.getElementById("test_btn").addEventListener("click", function() {
        console.log(self.hello); // logs "world"
    });
};

Ahora podemos usar una función de flecha sin var self = this :

function test() {
    this.hello = "world";
    document.getElementById("test_btn").addEventListener("click", () => {
        console.log(this.hello); // logs "world"
    });
};

Las funciones de flecha no tienen su propio this y simplemente asumen el alcance adjunto.

Answer 2

Como se mencionó varias veces anteriormente, ''self'' simplemente se usa para mantener una referencia a ''this'' antes de ingresar a la función. Una vez en la función ''esto'' se refiere a otra cosa.

Answer 3

Creo que el nombre de la variable ''self'' ya no debería usarse de esta manera, ya que los navegadores modernos proporcionan una variable global que apunta al objeto global de una ventana normal o un WebWorker.

Para evitar confusiones y posibles conflictos, puede escribir var thiz = this o var that = this en var that = this lugar.

Answer 4

En realidad, self es una referencia a window ( window.self ), por lo tanto, cuando dices var self = ''something'' , anulas una referencia de ventana a sí mismo, porque el self existe en el objeto window.

Esta es la razón por la que la mayoría de los desarrolladores prefieren var that = this sobre var self = this;

De todas formas; var that = this; no está en línea con la buena práctica ... suponiendo que su código será revisado / modificado más tarde por otros desarrolladores, debe usar los estándares de programación más comunes con respecto a la comunidad de desarrolladores

Por lo tanto, debe usar algo como var oldThis / var oThis / etc - para ser claro en su alcance // .. no es mucho, pero ahorrará unos segundos y pocos ciclos cerebrales

Answer 5

Es una peculiaridad de JavaScript. Cuando una función es una propiedad de un objeto, más acertadamente llamada un método, esto se refiere al objeto. En el ejemplo de un controlador de eventos, el objeto que contiene es el elemento que activó el evento. Cuando se invoca una función estándar, esto se referirá al objeto global. Cuando tiene funciones anidadas como en su ejemplo, esto no se relaciona en absoluto con el contexto de la función externa. Las funciones internas comparten el alcance con la función contenedora, por lo que los desarrolladores usarán variaciones de var that = this para preservar lo que necesitan en la función interna.

Answer 6

La variable es capturada por las funciones en línea definidas en el método. this en la función se referirá a otro objeto. De esta manera, puede hacer que la función mantenga una referencia a this en el ámbito externo.

Answer 7

Sí, lo verás en todas partes. Es a menudo that = this; .

¿Ves cómo se usa el self dentro de las funciones llamadas por eventos? Esos tendrían su propio contexto, por lo que el self se usa para mantener this que entró en la Note() .

La razón por self que todavía está disponible para las funciones, aunque solo pueden ejecutarse después de que la función Note() haya terminado de ejecutarse, es que las funciones internas obtienen el contexto de la función externa debido al cierre .

Answer 8

También se debe tener en cuenta que hay un patrón Proxy alternativo para mantener una referencia al original en una devolución de llamada si no le gusta el var self = this idioma.

Como se puede llamar a una función con un contexto dado usando function.apply o function.call , puede escribir un contenedor que devuelva una función que llame a su función con apply o call usando el contexto dado. Ver la función proxy de jQuery para una implementación de este patrón. Aquí hay un ejemplo de su uso:

var wrappedFunc = $.proxy(this.myFunc, this);

wrappedFunc puede llamarse y tendrá su versión de this como contexto.

Answer 9

Ver este artículo en alistapart.com

Se está utilizando self para mantener una referencia al original, incluso cuando el contexto está cambiando. Es una técnica que se usa a menudo en los manejadores de eventos (especialmente en cierres).

Answer 10

function Person(firstname, lastname) {
  this.firstname = firstname;

  this.lastname = lastname;
  this.getfullname = function () {
    return `${this.firstname}   ${this.lastname}`;
  };

  let that = this;
  this.sayHi = function() {
    console.log(`i am this , ${this.firstname}`);
    console.log(`i am that , ${that.firstname}`);
  };
}

let thisss = new Person(''thatbetty'', ''thatzhao'');

let thatt = {firstname: ''thisbetty'', lastname: ''thiszhao''};

thisss.sayHi.call (thatt);