Функция Arrow this указывает на окружающий родительский элемент в Es6, означает, что он не имеет видимости как анонимные функции в ES5 ...

Это очень полезный способ избежать присвоения var self этому, что широко используется в ES5 ...

Посмотрите на пример ниже, назначив функцию внутри объекта:

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…}

Чтобы представить большую картину, я собираюсь объяснить как динамическое, так и лексическое связывание.

Связывание динамического имени

this относится к объекту, . Это регулярно читаемое предложение на SO. Но это все еще только фраза, довольно абстрактная. Есть ли соответствующий шаблон кода для этого предложения?

Да, есть:

const o = {
  m() { console.log(this) }
}

// the important patterns: applying methods

o.m(); // logs o
o["m"](); // logs o

m - это метод, потому что он полагается на this. o.m() или o["m"]() означает m применяется к o. Эти шаблоны - это перевод Javascript на нашу знаменитую фразу.

Существует еще один важный шаблон кода, на который вы должны обратить внимание:

"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(o.m); // logs undefined
f(o["m"]); // logs undefined

Он очень похож на предыдущий шаблон, только скобки отсутствуют. Но последствия значительны: когда вы передаете m функции f, вы вытаскиваете m своего объекта / контекста o.

Лексическая (или статическая) привязка имени

Функции стрелок не имеют собственных this / super / arguments. Они наследуют их от родительской лексической области:

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]

Помимо глобальной области (Window в браузерах) только функции способны сформировать область видимости в блоках Javascript (и {} в ES2015). Когда вызывается функция стрелки o.foo, нет никакой окружающей функции, из которой baz может наследовать ее this. Следовательно, он фиксирует привязку this глобальной области действия, привязанную к объекту Window.

Когда baz вызывается o.bar, функция стрелки окружена o.bar ( o.bar формирует родительскую лексическую область) и может наследовать привязку o.bar this. o.bar был вызван на o, и поэтому его this привязан к o.

Вы можете попытаться понять это, следуя ниже

// 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]
}

, поэтому «это» в функции толстой стрелки не связано, означает, что вы не можете заставить что-либо связываться с этим «здесь». применить не будет, .call не будет, .bind не будет. 'this' в функции fat arrow привязывается, когда вы записываете текст кода в текстовом редакторе. «Это» в функции толстой стрелки здесь буквально значимо. Что ваш код писать здесь, в текстовом редакторе, то, что ваше приложение работает там в repl. То, что «это» связано с жирным заключением, никогда не изменится, если вы не измените его в текстовом редакторе. Извините за мой пул English ...

Надеюсь, это показание кода может дать вам более четкую идею. В принципе, «это» в функции стрелок является текущей версией контекста «this». Смотрите код:

// '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