обращение к переменным объекта JavaScript

Question

скажите почему след код не выводит измененое имя и возраст?

 var person = (function (name, age) {
     var
         $name = name,
         $age = age;
     
     return {
         name: $name,
         age: $age,
         setName: function (name) { $name = name;},
         setAge: function (age) { $age = age;}
     };
       
})('Gregory', 42); 
     
person.setName('Miller');
person.setAge(30);
     
console.log(person.name);
console.log(person.age);

Выхлоп:

Gregory
42

score 4 · Accepted Answer · answered May 03 '17 at 18:20

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

Значения полей name и age устанавливаются один раз и затем не изменяются.

Для исправления, вместо полей можно использовать геттеры

var person = (function(name, age) {  
  var   $name = name,
        $age = age;   
  return {  
    get name() {
      return $name
    },
      get age() {
      return $age
    },
       setName: function(name) {
      $name = name;
    },
        setAge: function(age) {
      $age = age;
    }  
  }; 
})('Gregory', 42); 
person.setName('Miller');
person.setAge(30); 
console.log(person.name);
console.log(person.age);

Либо менять непосредственно поля объекта

var person = (function(name, age) {  
  return {  
    name: name,
    age: age,
    setName: function(name) {
      this.name = name;
    },
    setAge: function(age) {
      this.age = age;
    }  
  }; 
})('Gregory', 42); 
person.setName('Miller');
person.setAge(30); 
console.log(person.name);
console.log(person.age);

но в этом случае стоит следить за возможной потерей контекста вызова

т.е. как я понял то что возвращается в name и age это и есть поля person? а не $name, $age? — Cfon, May 03 '17 at 18:25
@Cfon, именно, твоя функция вернула объект, инициализировав его поля и, по сути, на этом все закончилось — Grundy, May 03 '17 at 18:26

score 1 · Answer 2 · answered May 03 '17 at 18:44

1

Решение через класс, на мой взгляд, нагляднее и большая возможность есть к расширению

class Person {
    constructor (name, age) {
        this.name = name;
        this.age = age;
    };
    setName (name) {
        this.name = name;
    };
    setAge (age) {
        this.age = age;
    };
}
let person = new Person ('Gregory', 42);
person.setName('Miller');
person.setAge(30);
console.log(person.name);
console.log(person.age);

answered May 03 '17 at 18:44

Aliaksandr Pitkevich

1,325

не уверен, что это в стиле JavaScript ;) и будет ли это работать везде? – Cfon May 03 '17 at 18:49
Это решение соответствует ES6 :) Все современные браузеры поддерживают этот стандарт) – Aliaksandr Pitkevich May 03 '17 at 18:49
я сам плюсовик, но недавно подсел на JavaScript, именно из-за не стандартного подхода в объектам ;) – Cfon May 03 '17 at 18:52
@Cfon мое решение выше демонстрирует ООП в прототипном стиле с использованием нового стандарта, но ведь согласитесь, решение выглядит проще?) – Aliaksandr Pitkevich May 03 '17 at 18:53
спасибо, просто я изучаю JavaScript по книжке "Разработка одностраничных веб-приложений. М.Миковски, Дж.Пауэлл, 2014" там про это не пишется :) – Cfon May 03 '17 at 18:56
@Cfon на момент написания этой книги про это и не знал никто, я полагаю) уверен там переменные еще через var обозначают) – Aliaksandr Pitkevich May 03 '17 at 18:57
всетаки пока буду придерживаться стиля var :) – Cfon May 03 '17 at 19:14
@Cfon as you wish) – Aliaksandr Pitkevich May 03 '17 at 19:15

score 1 · Answer 3 · answered May 03 '17 at 20:36

1

var person = (function (name, age) {
     var
         $name = name,
         $age = age;
 return {
     name: $name,
     age: $age,
     setName: function (name) { this.name = name;},
     setAge: function (age) { this.age = age;}
 };


})('Gregory', 42);
person.setName('Miller');
person.setAge(30);
console.log(person.name);
console.log(person.age);

answered May 03 '17 at 20:36

Вячеслав

101

оригинально ;)) – Cfon May 04 '17 at 10:57
моя ошибка была в том что я мыслил как С++ программист, как я потом понял оператор return возвращает объект со своими атрибутами и функциями, я же думал что в атрибутах передаются ссылки на переменные функции $name и $age. – Cfon May 04 '17 at 11:00

обращение к переменным объекта JavaScript

3 Answers3