El contexto de invocación (este) de la llamada a la función forEach

Me preguntaba lo que el ‘este’ valor (o contexto de invocación) es de la forEach función de devolución de llamada. Este código no parece funcionar:

var jow = [5, 10, 45, 67];

jow.forEach(function(v, i, a){

    this[i] = v + 1;

});

alert(jow);

Thx para explicar a mí.

InformationsquelleAutor kevinius | 2013-10-31

5 Kommentare

  1. 43

    MDN estados:

    matriz.forEach(devolución de llamada[, thisArg])

    Si un thisArg parámetro se proporciona a forEach, que será utilizado como el
    este valor de devolución de llamada para cada invocación, como si de devolución de llamada.llame al(thisArg,
    elemento, el índice de la matriz) fue llamado. Si thisArg es indefinido o nula,
    este valor dentro de la función depende de si la función es
    en modo estricto o no (valor pasado si en modo estricto, objeto global
    si no de modo estricto).

    Así que en resumen, si sólo proporcionar la devolución de llamada y usted está en la no-modo estricto (el caso presentado), será el objeto global (ventana).

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

    • +1 Se me pegaba a él 😛
    • Que extraño. Si puedo crear un método en un objeto, que el ‘este’ valor de ese objeto. ¿Por qué es esto diferente?
    • this en el interior del cuerpo de un forEach de hecho será su matriz en particular, pero no hay ninguna conexión entre ese y el de devolución de llamada que usted proporcione. La devolución de llamada se invoca sin embargo la implementación de un forEach quiere, específicamente con thisArg, ventana o elemento como este.
    • Thx, estoy consiguiendo… he utilizado el jow matriz como la thisArg, pero me da malos resultados: jsfiddle.net/39LSg . ¿Por qué es eso? El valor de -este – parece saltar con cada iteración entre el objeto de la ventana y la matriz jow
    • Estás usando el valor de la matriz como el índice del elemento que desea cambiar. Primera iteración cambios jow[1] a 5 (sustituye a 2 con 5), el segundo de los cambios jow[5] a 5 (se añade otro de 5 al final), tercer cambios jow[3] a 5 (sustituye a 4 con 5), cada iteración cambios jow[5] a 5.
    • ow, tienes razón, ahora funciona… lo siento por eso : jsfiddle.net/39LSg/1
    • MDN dice, En modo estricto, sin embargo, el valor de esto permanece en lo que se establece en cuando entrando en la ejecución contexto. En el contexto de un método de la clase anidada clásico de la función que se pasa como un argumento de un forEach mantendrá el original de la clase y de instancia como la de este valor (dado que la función no está obligado de otra manera), suena como la flecha de las funciones de comportamiento no es !?
    • No estoy seguro de entender lo que quieres decir. Si usted [1,2,3].forEach(fn, obj), fn será llamado 3 veces equivalente a esto: fn.call(obj, 1); fn.call(obj,2); fn.call(obj, 3);. Si obj es que no siempre, this dentro de fn se resuelve en el objeto global (no estricto) o indefinido (modo estricto). Por favor, tenga en cuenta que llamar fn crea un nuevo contexto de ejecución que no tiene nada que ver con el contexto de ejecución en el que [...].forEach(...) fue llamado.
    • tienes razón, por lo que hago, pero recientemente algunos colega el código de la función clásica como único argumento a la Matriz método forEach, el registro de esto valor dentro de ella en tiempo de ejecución muestra se apunta a que el contexto que lo rodea instancia de la clase (lugar de espera undefined). Esto me llevó a preguntarme qué estaba pasando. Al final, sospecho que algunos de Transcripción transpiling cosas o webpack cargador de magia sucediendo bajo el capó de inflexión de la fn en la grasa de flecha fn. El MDN cito en mi anterior comentario «el valor de «este» permanece en lo que se» es confuso.

  2. 10

    He terminado la construcción del método forEach y quería compartir este diagrama con todos, espero que ayude a alguien más tratando de entender su funcionamiento interno.

    El contexto de invocación (este) de la llamada a la función forEach

    • lol el espaciado en este diagrama en realidad no significa nada
    • ¿a qué te refieres con el espacio? thx…
    • Me refiero a que el diseño en general, este diagrama es completamente ilegible
    • thx, ¿cómo puedo mejorar?
  3. 4

    Dentro de un forEach, this se refiere a la global window objeto. Este es el caso incluso si se llama desde un objeto diferente (es decir, uno que hayas creado)

    window.foo = 'window';
    
    var MyObj = function(){
      this.foo = 'object';
    };
    
    MyObj.prototype.itirate = function () {
      var _this = this;
    
      [''].forEach(function(val, index, arr){
        console.log('this: ' + this.foo); //logs 'window'
        console.log('_this: ' + _this.foo); //logs 'object'
      });
    };
    
    var newObj = new MyObj();
    
    newObj.itirate();
    //this: window
    //_this: object
    • Esto es sobre todo cierto. Pero puede pasar a un thisArg después de la devolución de llamada para definir lo que this se refiere. En tu ejemplo, usted podría llamar a [''].forEach(function (…) {…}, myObj), por lo que this.foo regresaba 'object' en lugar de 'window'.
    • Y es interesante notar que por defecto, el thisArg se refiere a la global window objeto (lo he probado en mi navegador), mientras que en las especificaciones dice que si no thisArg se proporciona, debe ser undefined por defecto. MDN: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… . Especificaciones: ecma-international.org/ecma-262/5.1/#sec-15.4.4.18
  4. 3

    Si usted no pasa el segundo parámetro a forEach, this apuntará al objeto global. Para lograr lo que estaban tratando de hacer

    var jow = [5, 10, 45, 67];
    
    jow.forEach(function(v, i, a) {
        a[i] = v + 1;
    });
    
    console.log(jow);

    Salida

    [ 6, 11, 46, 68 ]
  5. 0

    Tengo un enfoque muy simple para el ‘este’ contexto de la pregunta y es la siguiente:
    cada vez que usted quiere saber lo que es el contexto de ‘este’, compruebe que está a la izquierda de la persona que llama si no hay ninguna llamada a la izquierda que es la otra cosa es que la instancia de objeto:

    Ejemplos:

    JS:

    let obj = { name:"test", fun:printName }
    
    function printName(){
      console.log(this.name)
    }
    
    //who is left to the caller? obj! so obj will be 'this'
    obj.fun() //test
    
    //who is left to the caller? global! so global will be 'this'
    printName() //undefined (global has no name property)

    Así, para el ‘foreach’ caso a la hora de dar una función de devolución de lo que en realidad sucede en foreach aplicación es algo así como:

    –> usted, llame a [1,2,3].foreach(devolución de llamada, «opcionales Esto’)

    JS:

     foreach(arr,cb)
     {
      for(i=0; i<arr.len;i++)
      {
       //who is left to the caller? global! so it will be 'this'
       cb(arr[i])
      }
     }

    Menos – que le den la opción ‘esto’ o enlazar la devolución de llamada con este (por ejemplo, función de flecha)
    si eso sucede que el llamado de devolución de llamada ya tiene un ‘esto’ obj qué clase de ‘bloques’ el cambio es determinado contexto
    más en el enlace puede encontrarse aquí escriba aquí la descripción del enlace
    Pero, básicamente, la implementación bind como sigue:

    JS:

    Function.prototype.bind = function (scope) {
        var fn = this;
        return function () {
            return fn.apply(scope);
        };
    }

    Así que usted puede ver la fn (su devolución de llamada) siempre será llamado con su ‘este’ (ámbito de aplicación)

    Espero que ayude…

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea