Откуда взялись f и g, что это такое и как работает?

182

02 ноября 2018, 20:20

На странице учебника JavaScript я увидел такой пример:

var user = { firstName: "Вася" }; 
var admin = { firstName: "Админ" }; 
 
function func() { 
  alert( this.firstName ); 
} 
 
user.f = func; 
admin.g = func; 
 
// this равен объекту перед точкой: 
user.f(); // Вася 
admin.g(); // Админ 
admin['g'](); // Админ (не важно, доступ к объекту через точку или квадратные скобки)

Никак не пойму откуда взялись f и g в объектах user и admin. Как это называется и как работает?

user.f = func; 
admin.g = func;

Answer 1

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

Поэтому при присваивании значения, в случае отсутствия, соответствующее поле будет добавлено непосредственно в объект.

var user = {}; 
console.log(user.hasOwnProperty('f')); 
user.f = "a"; 
console.log(user.hasOwnProperty('f'));

Однако автоматическое добавление не сработает в случае

примитивных значений: строк, чисел и т.д.,
объектов к котором применен метод Object.preventExtensions
объектов к котором применен метод Object.seal
объектов к котором применен метод Object.freeze

var user1 = {}, 
  user2 = {}, 
  user3 = {}, 
  user4 = {}; 
 
console.log(user1.hasOwnProperty('a'), user2.hasOwnProperty('a'), user3.hasOwnProperty('a'), user4.hasOwnProperty('a')); 
 
Object.preventExtensions(user2); 
Object.seal(user3); 
Object.freeze(user4); 
 
user1.a = user2.a = user3.a = user4.a = 10; 
 
console.log(user1.hasOwnProperty('a'), user2.hasOwnProperty('a'), user3.hasOwnProperty('a'), user4.hasOwnProperty('a'));

Answer 2

Всё довольно просто, стоит только вывести объект в консоль:

var user = { firstName: "Вася" }; 
var admin = { firstName: "Админ" }; 
 
function func() { 
  alert( this.firstName ); 
} 
 
user.f = func; 
admin.g = func; 
 
console.log(user);

Здесь мы видим что у объекта появилось новое свойство-функция, которая была присвоена кодом user.f = func;. Вы можете также присвоить и обычное свойство объекту:

var user = { firstName: "Вася" }; 
var admin = { firstName: "Админ" }; 
 
user.f = "a"; 
admin.g = 123; 
 
console.log(user); 
console.log(admin);

Answer 3

Так Вы же сами добавляете свойства f и g объектам. Их значениями является ссылка на функцию func - при вызове this берёт свойства у объекта на который ссылается, следовательно в первом случае this.firstName будет равно "Вася", а во втором - "Админ".