He leído en varios lugares que la diferencia clave es que this está vinculado léxicamente en funciones de flecha. Eso está muy bien, pero en realidad no sé lo que eso significa.
Sé que significa que es único dentro de los límites de las llaves que definen el cuerpo de la función, pero en realidad no podría decirte el resultado del siguiente código, porque no tengo idea de a qué this refiere, a menos que se refiera a la flecha gorda función en sí .... que no parece útil.
var testFunction = () => { console.log(this) }; testFunction();Las funciones de flecha capturan el valor this del contexto envolvente.
function Person(){ this.age = 0; setInterval(() => { this.age++; // |this| properly refers to the person object }, 1000); } var p = new Person(); Entonces, para responder directamente a su pregunta, this dentro de su función de flecha tendría el mismo valor que tenía justo antes de que se asignara la función de flecha.
Para proporcionar una imagen general, voy a explicar tanto la vinculación dinámica como la léxica.
this se refiere al objeto sobre el que se llama al método. Esta es una oración que se lee regularmente en SO. Pero sigue siendo sólo una frase, bastante abstracta. ¿Hay un patrón de código correspondiente a esta oración?
Sí hay:
const o = { m() { console.log(this) } } // the important patterns: applying methods om(); // logs o o["m"](); // logs o m es un método porque se basa en this . om() u o["m"]() significa que m se aplica a o . Estos patrones son la traducción Javascript de nuestra famosa frase.
Hay otro patrón de código importante al que debes prestar atención:
"use strict"; const o = { m() { console.log(this) } } // m is passed to f as a callback function f(m) { m() } // another important pattern: passing methods f(om); // logs undefined f(o["m"]); // logs undefined Es muy similar al patrón anterior, solo faltan los paréntesis. Pero las consecuencias son considerables: cuando pasa m a la función f , saca m de su objeto/contexto o . Está desarraigado ahora y this no se refiere a nada (se asume el modo estricto).
Las funciones de flecha no tienen su propio enlace this / super / arguments . Los heredan de su alcance léxico principal:
const toString = Object.prototype.toString; const o = { foo: () => console.log("window", toString.call(this)), bar() { const baz = () => console.log("o", toString.call(this)); baz(); } } o.foo() // logs window [object Window] o.bar() // logs o [object Object] Además del alcance global ( Window en los navegadores), solo las funciones pueden formar un alcance en Javascript (y {} bloques en ES2015). Cuando se llama a la función de flecha o.foo , no hay ninguna función circundante de la que baz pueda heredar su this . En consecuencia, captura el enlace this del ámbito global que está vinculado al objeto Window .
Cuando baz invoca a o.bar , la función de flecha está rodeada por o.bar ( o.bar forma su ámbito léxico principal) y puede heredar el enlace this de o.bar . o.bar se invocó en o y, por lo tanto, this está vinculado a o .
Espero que este programa de código pueda darle una idea más clara. Básicamente, 'esto' en la función de flecha es la versión de contexto actual de 'esto'. Ver el código:
// 'this' in normal function & arrow function var this1 = { number: 123, logFunction: function () { console.log(this); }, logArrow: () => console.log(this) }; this1.logFunction(); // Object { number: 123} this1.logArrow(); // Window