O que “isto” se refere nas funções de seta no ES6?

Eu li em vários lugares que a principal diferença é que ” this é lexicalmente vinculado a funções de seta”. Isso é tudo muito bem, mas eu realmente não sei o que isso significa.

Eu sei que significa que é único dentro dos limites das chaves que definem o corpo da function, mas eu não poderia realmente dizer-lhe a saída do código a seguir, porque eu não tenho idéia do que this está se referindo, a menos que se refira à seta gorda function em si …. que não parece útil.

 var testFunction = () => { console.log(this) }; testFunction(); 

As funções de seta capturam o valor this contexto incluído

 function Person(){ this.age = 0; setInterval(() => { this.age++; // |this| properly refers to the person object }, 1000); } var p = new Person(); 

Então, para responder diretamente a sua pergunta, this dentro da sua function de seta teria o mesmo valor que antes da function de seta ter sido atribuída.

A fim de fornecer uma visão geral, vou explicar as ligações dinâmicas e lexicais.

Vinculação de nome dynamic

this se refere ao object em que o método é chamado. Esta é uma frase regularmente lida no SO. Mas ainda é apenas uma frase, bem abstrata. Existe um padrão de código correspondente a esta sentença?

Sim existe:

 const o = { m() { console.log(this) } } // the important patterns: applying methods om(); // logs o o["m"](); // logs o 

m é um método porque se baseia this . om() ou o["m"]() significa que m é aplicado ao o . Esses padrões são a tradução de Javascript para a nossa famosa frase.

Há outro padrão de código importante que você deve prestar atenção:

 "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 

É muito semelhante ao padrão anterior, apenas os parênteses estão faltando. Mas as conseqüências são consideráveis: Quando você passa m para a function f , você retira m de seu object / contexto o . É arrancado agora e this se refere a nada (modo estrito assumido).

Vinculação de nome léxico (ou estático)

As funções de seta não possuem sua própria binding / super / arguments . Eles os herdam de seu escopo léxico pai:

 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] 

Espero que este programa de código possa lhe dar uma ideia mais clara. Basicamente, ‘this’ na function de seta é a versão atual do contexto ‘this’. Veja o 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 

Você pode tentar entender seguindo o caminho abaixo

 // whatever here it is, function or fat arrow or literally object declare // in short, a pair of curly braces should be appeared here, eg: function f() { // the 'this' here is the 'this' in fat arrow function below, they are // bind together right here // if 'this' is meaningful here, eg. this === awesomeObject is true console.log(this) // [object awesomeObject] let a = (...param) => { // 'this is meaningful here too. console.log(this) // [object awesomeObject] } 

então ‘isso’ na function de seta de gordura não é vinculada, significa que você não pode fazer nada vincular a ‘isto’ aqui, .apontar não vai, .call não, .bind não. ‘this’ na function de seta de gordura é ligada quando você escreve o texto do código em seu editor de texto . ‘this’ na function de flecha gorda é literalmente significativo aqui. O que seu código escreve aqui no editor de texto é o que seu aplicativo executa lá no repl. O que ‘isso’ ligado na substituição de gordura nunca mudará, a menos que você o altere no editor de texto . Desculpe pela minha piscina Inglês …

A function de seta está apontando para o pai circundante em Es6, significa que ele não escapa como funções anônimas no ES5 …

É uma maneira muito útil de evitar a atribuição de var self a esta que é amplamente utilizada no ES5 …

Veja o exemplo abaixo, atribuindo uma function dentro de um object:

 var checkThis = { normalFunction: function () { console.log(this); }, arrowFunction: () => console.log(this) }; checkThis.normalFunction(); //Object {} checkThis.arrowFunction(); //Window {external: Object, chrome: Object, document: document, tmpDebug: "", j: 0…}