var a = 10;
 
function test(x) {
  var b = 20;
};
 
test(30);

Объект переменных в глобальном контексте

Глобальный объект (Global object) — объект, который создаётся до входа в любой из контекстов исполнения. Данный объект существует в единственном экземпляре, свойства его доступны из любого места программы, жизненный цикл объекта завершается с завершением программы.

При создании, глобальный объект инициализируется такими свойствами, как Math, String, Date, parseInt и т.д., а также, дополнительными объектами, среди которых может быть и ссылка на сам глобальный объект — например, в BOM, свойство window глобального объекта ссылается на сам глобальный объект (однако, не во всех реализациях):

global = {
  Math: <...>,
  String: <...>
  ...
  ...
  window: global
};

В глобальном контексте, объектом переменных является сам глобальный объект

VO(globalContext) === global

var a = new String('test');
 
alert(a); // напрямую, будет найдено в VO(globalContext): "test"
 
alert(window['a']); // косвенно через global === VO(globalContext): "test"
alert(a === this.a); // true
 
var aKey = 'a';
alert(window[aKey]); // косвенно, имя свойства сформировано налету: "test"

Объект переменных в контексте функции

Объект активации (Activation object, AO) — специальный объект, который создаётся при входе в контекст функции и инициализируется свойством arguments — Объект аргументов (Arguments object):

AO = {
  arguments: <ArgO>
};

Объект аргументов (Arguments object, ArgO) – объект, находящийся в объекте активации контекста функции и содержащий следующие свойства:

• callee – ссылка на выполняемую функцию;

• length – количество реально переданных параметров;

• свойства-индексы (числовые, приведённые к строке), значения которых – есть формальные параметры функции (слева направо в списке параметров). Количество этих свойств-индексов == arguments.length. Значения свойств-индексов объекта arguments и присутствующие формальные параметры – взаимозаменяемы:

function foo(x, y, z) {
  alert(foo.length); 

  alert(arguments.length); 

  alert(arguments.callee === foo); 
 
  alert(x === arguments[0]); 
  alert(x); // 10
 
  arguments[0] = 20;
  alert(x); // 20
 
  x = 30;
  alert(arguments[0]); 
   
  z = 40;
  alert(arguments[2]); 
 
  arguments[2] = 50;
  alert(z); // 40
 
}
  
foo(10, 20);

Что выведет

каждый alert?

Детализация обработки кода контекста

Обработка кода контекста исполнения делится на два основных этапа:

1. Вход в контекст исполнения;

2. Непосредственно, интерпретация кода.

 Обработка этих двух стадий является общей для всех контекстов.

Вход в контекст исполнения

При входе в контекст исполнения (но до построчного выполнения его кода), VO наполняется следующими свойствами:

 * для каждого формального параметра функции (если мы находимся в контексте исполнения функции)

  – создаётся свойство VO с именем и значением формального параметра; для непереданных параметров – создаётся свойство VO с именем формального параметра и значением undefined;

 * для каждой декларации функции (FunctionDeclaration, FD)

– создаётся свойство VO, с именем функции и значением, являющимся ссылкой на объект-функцию; если в VO уже присутствовало свойство с таким именем, оно его значение и атрибуты заменяются значением функции;

 * для каждой переменной (var)

– создаётся свойство VO с именем переменной, и значением undefined; если в VO уже присутствовало свойство с таким именем, оно остаётся нетронутым.

Чем будет наполнен АО?

function test(a, b) {
  var c = 10;
  function d() {}
  var e = function _e() {};
  (function x() {});
}
  
test(10); // вызов

Интерпретация кода

function test(a, b) {
  var c = 10;
  function d() {}
  var e = function _e() {};
  (function x() {});
}
  
test(10); // вызов

This

Является свойством контекста исполнения:

activeExecutionContext = {
  VO: {...},
  this: thisValue
};

где VO — это объект переменных (variable object). Значение this напрямую связанно с типом исполняемого кода контекста. Определяется оно при входе в контекст и на протяжении исполнения кода контекста, является неизменным.

This в глобальном контексте

В коде глобального контекста, значением this всегда является сам глобальный объект (global)

this.a = 10;
alert(a);
 
b = 20;
alert(this.b); 
 
var c = 30;
alert(this.c); 

This  в коде функции

Особенность значения this в этом типе кода заключается в том, что оно  не связано статично с функцией

This определяется при входе в контекст, и в случае с кодом функции, каждый раз может быть абсолютно разным.

!!! На протяжении исполнения кода контекста, значение this является неизменным, т.е. нельзя присвоить ему новое значение динамически в рантайме

Что выведет каждый alert?

var foo = {x: 10};
 
var bar = {
  x: 20,
  test: function () {
 
    alert(this === bar); 
    alert(this.x); 
     
    this = foo;
  
    alert(this.x);
 
  }
 
};

bar.test(); 
 
foo.test = bar.test;
 
foo.test(); 

От чего же зависит меняющееся значение this в коде функции?

При обычном вызове функции, this определяется вызывающей стороной, которая активирует код контекста функции, — так называемый, caller, т.е. родительский контекст, который вызывает функцию. Определение значения this происходит по форме выражения вызова (иными словами, как синтаксически вызвана функция).

Что выведет каждый alert?

var foo = {
  bar: function () {
    alert(this);
    alert(this === foo);
  }
};
 
foo.bar();
 
var exampleFunc = foo.bar;
 
alert(exampleFunc === foo.bar); 
 
exampleFunc(); 

This при вызове функции в качестве конструктора

function A() {
  alert(this); 
  this.x = 10;
}
 
var a = new A();
alert(a.x);

Явная установка значения this при вызове функций (apply и call)

Оба они принимают в качестве первого параметра значение this, которое будет использовано в контексте вызова. Разница между этими методами несущественная: для первого из них вторым параметром обязательно должен быть массив (либо массиво-подобный объект, например, arguments), в свою очередь, call может принимать любые параметры. Обязательным параметром для обоих методов является лишь первый — значение this

Что  выведет каждый alert?

var b = 10;
 
function a(c) {
  alert(this.b);
  alert(c);
}
 
a(20); 
 
a.call({b: 20}, 30); 
a.apply({b: 30}, [40]) 

Scope, Scope chain

var x = 10;
 
function foo() {   
  var y = 20;
   
  function bar() {
    alert(x + y);
  }
   
  return bar; 
}
 
foo()(); 

[[Scope]] – это иерархическая цепь объектов переменных (VO), стоящих выше контекста функции; цепь записывается свойством в функцию при её создании (раз, и навсегда (до уничтожения функции). Т.е. функция может быть ни разу не вызвана, но свойство [[Scope]] в неё уже записано)

Что выведет alert?

var x = 10;
 
function foo() {
  alert(x);
}
 
(function () {
  var x = 20;
  foo();
})();

Что выведет каждый alert?

function foo() {
  alert(x);
}
 
Object.prototype.x = 10;
 
foo();

Что выведет каждый alert?

var a = 10;
function testFn() {
  alert(a);
}
 
(function (funArg) {
  var a = 20; 
  funArg();
})(testFn);

var data = [];
for (var k = 0; k < 3; k++) {
  data[k] = function () {
    alert(k);
  };
}
 
data[0]();
data[1]();
data[2]();

Что выведет каждый alert?