Лексическое окружение, контекст вызова. Почему это разные понятия?

Question

[aivazovski]

Добрый день.
Я читаю learn.javascript и пытаюсь понять темы лексического окружения и контекста вызова. И такая штука... вроде по отдельности я их понимаю. Но вот вместе, это не складывается в какую то целостную картину.

Почему эти 2е вещи разделены ? Ну т.е. в JS всё объекты, и даже функции. Но у функцию нельзя указать в this. Хотя, по идее, через this можно получить параметры объекта (они же аргументы функции), которые доступны через лексическое окружение. В чём разница, кроме того что лексическое окружение "для функций", а this "для объектов" ? Тут есть что то основополагающее, что я не могу уловить.

Answer 1

[AngReload]

// лексическое окружение это все переменные
// которые доступны в момент создания функции
const lexEnv = 42
const lexEnv2 = 32
const lexEnv3 = 16
const lexEnv4 = 4

// создаём функцию
function fn() {
  console.log([
    lexEnv, // эта переменная взята из окружения
    this,
    this.field + lexEnv
  ])
}

const obj1 = {
  field: 8,
  myFn: fn
}

obj1.myFn() // здесь this становится равен obj1, this.field === 8


// пример другого this
let obj2 = {
  field: 100
}
obj2.myFn2 = obj1.myFn
// если мы использовать функцию как метод другого объекта
obj2.myFn2() // здесь this становится равен obj2, this.field === 100

Comments

[aivazovski]

А я правильно понимаю, что у объекта нет лексического окружения ?
Т.е. когда функция вызывается по идее она забиндина на объект user и там есть параметр x, но функция его не замечает, а идёт в window сразу.

var x = 111;
  var user = {
    x: 222,
    sayHi: function() {
    alert( x );
  }
};
user.sayHi();  //выдаёт 111

[AngReload]

aivazovski, что бы вывести тот икс, который находится в объекте юзер нужно обращаться по другому - alet( user.x ). Иначе говоря, в лекс. окружении есть переменная user и из неё через точку можно получить x. Икс в юзер - это ведь свойство объекта, а не переменная.

Забиндина (привязана) к объекту user, значит this === user, чтобы получить икс из объекта, к которому привязана функция alert( this.x )

[aivazovski]

AngReload, я похоже понял. Объекты не имеют своего лексического окружения, которое можно записать в [[Scope]], а являются переменными в лексическом окружении той функции внутри которой находятся.

Когда sayHi объявляется, она получает лексическое окружение и [[Scope]] (как я читал неотделимый и неизменяемый) в который попадает глобальный объект window (забавно, но получается что window это одновременно и объект, и функция) и при вызове не найдя переменную внутри себя, обращается сразу в window.

Большое спасибо )

[AngReload]

aivazovski, ну почти.
Посмотрите на хороший пример в ответе Сергея Соколова, там переменная "a" отсутствует в window, но в функции она доступна.
Это потому что недостающие переменные функция берёт при создании. И берёт их из предыдущих { scope } - объемов функций по цепочке вверх, пока не дойдёт до scop'a window.

Думаю, вам нужна практика, чтобы по настоящему разобраться.

[aivazovski]

AngReload, про цепочку вызовов я понимаю. Я не мог понять почему объекты не имеют лексического окружения. Теперь понял )

Answer 2

[Сергей Соколов]

Лекс. окружение – это переменные, которые определены и "видны" функции.
Контекст – это this.

function outer() {
  var a = 1; // переменная в лексическом окружении ф-ии inner()
             // внутри inner() можно использовать значение a
  return function inner() {
    console.log("a == ", a, "this == ", this);
  }
}

var f1 = outer(); // f1 - функция
f1(); // a == 1, this == window или self

var f2 = f1.bind({title: "Ololo"}); // f2 - новая функция
f2(); // a == 1, this.title == "Ololo"

Comments

[aivazovski]

А я правильно понимаю, что у объекта нет лексического окружения ?
Т.е. когда функция вызывается по идее она забиндина на объект user и там есть параметр x, но функция его не замечает, а идёт в window сразу.

var x = 111;
  var user = {
    x: 222,
    sayHi: function() {
    alert( x );
  }
};
user.sayHi();  //выдаёт 111

Answer 3

[Андрей]

Лексическое окружение - это все локальные переменные функции, Определяется во время создания функции, есть еще понятие скоуп - это переменные которые доступны из другой функции и они берутся из замыкания.
Контекст вызова - это ссылка на объект из которого вызывается метод, это определяется во время вызова( кроме es6 arrow), то есть `a.b.c.call()` a.b.c будет контекстом вызова для метода call.