Почему новый созданный объект конструктора не меняет локальные переменные конструктора?

Question

[meltmestnt]

Здравствуйте. Беспокоит вопрос, на который не могу найти ответ :
Почему при создании собственного конструктора ( в данном случае User ) второй созданный объект этого конструктора не меняет локальную переменную var firstname? Используя замыкание метод setFirstName второго объекта изменяет локальную переменную конструктора firstname. Затем, когда мы обращаемся к первому объекту и выводим его firstname, то оно остается прежним.
Не могу понять как это работает.
JSFiddle: https://jsfiddle.net/zaue36h9/90/
Код :

function User() {
  var firstname, surname;
  this.setFirstName = function(name) {
  	if (name.replace) {
    	firstname = name;
    }
    else {
    	throw new Error('Введите имя');
    }
  }
  this.setSurname = function(name) {
  	if (name.search) {
    	surname = name;
    }
    else {
    	throw new Error('Введите фамилию');
    }
  }
  this.getFullName = function() {
  	return firstname + ' ' + surname;
  }
  
}

var user = new User();
user.setFirstName("Петя");
user.setSurname("Иванов");

alert( user.getFullName() ); // Петя Иванов
var user2 = new User();
user2.setFirstName('Фёдор');
user2.setSurname("Марков");
alert( user2.getFullName() );
alert( user.getFullName() ); // Петя Иванов

Опять же, если провести аналогию :

function hi() {
	var hz = 15;
  (function() {
  	hz = 20;
    alert(hz);
  })();
  alert(hz);
}
hi();

то внешняя функция меняет переменную внутренней. Почему же так не работает первый случай?

Answer 1

[Никита Егоров]

У вас два разных обьекта. Вы изменяете один и ожидаете изменение во втором? Я правильно понял?

Comments

[meltmestnt]

У конструктора есть две локальные переменные : var firstname, surname;. При создании первого объекта туда заносится Петя Иванов. При создании второго: Фёдр Марков. Почему затем при выводе имени первого объекта выводится Петя Иванов, а не Фёдр Марков, ведь функция вывода имени берет значения с локальных переменных конструктора

[Никита Егоров]

meltmestnt, почитайте как работает new и что такое функциональное программирование.

При создании объекта через new, создается экземпляр функции user.
Далее вы создаете второй объект опираясь на туже функцию user.

Это два разных объекта, изменяя один, второй меняться ну будет.

[meltmestnt]

Никита Егоров, То есть у каждого созданного объекта есть скрытые переменные firstname и surname и если бы бы у конструктора были локальные функции, они бы тоже передались каждому созданному с помощью этого конструктора объекту? Если это так, то возможно ли их увидеть или вызвать ( в случае с функциями )?

[Никита Егоров]

meltmestnt, их можно вызвать, если сделать их свойствами объекта.
То есть как то так ->

function User() {
  this.firstname = '';
  this.surname   = '';
  
  this.setFirstName = function(name) {
    	this.firstname = name
  }
  
  this.setSurname = function(name) {
  	this.surname = name
  }
  this.getFullName = function() {
  	return this.firstname + ' ' + this.surname;
  }
  
}

var user = new User();
user.setFirstName("Петя");
user.setSurname("Иванов");

alert(user.firstname) // Петя

var user2 = new User();
user2.setFirstName('Фёдор');
user2.setSurname("Марков");

alert(user2.firstname) // Федор

[meltmestnt]

Никита Егоров, А если не присваивать их как св-ва объекта? Пытался в консоли найти у объекта локальные переменные конструктора - безуспешно. Судя по всему получить к ним доступ можно только с помощью созданных в конструкторе методов. При создании нового метода у объекта получить к ним доступ тоже не выйдет:

user.getname = function() {
	return firstname;
}

[Никита Егоров]

meltmestnt, к локальным переменным обратится нельзя. Вот почитайте

Answer 2

[AngReload]

Вы наверное забыли, что при каждом запуске функции User всё что внутри её будет запущено заново, в том числе создание пустых переменных firstname и surname. Чтобы создать замыкание код должен быть такой:

код убрал под спойлер

var firstname, surname;
function User() {
  this.setFirstName = function(name) {
    if (name.replace) {
    	firstname = name;
    }
    else {
    	throw new Error('Введите имя');
    }
  }
  this.setSurname = function(name) {
    if (name.search) {
    	surname = name;
    }
    else {
    	throw new Error('Введите фамилию');
    }
  }
  this.getFullName = function() {
  	return firstname + ' ' + surname;
  }
  
}

var user = new User();
user.setFirstName("Петя");
user.setSurname("Иванов");

alert( user.getFullName() ); // Петя Иванов
var user2 = new User();
user2.setFirstName('Фёдор');
user2.setSurname("Марков");
alert( user2.getFullName() );
alert( user.getFullName() ); // Уже не Петя Иванов

То что раньше было это тоже замыкание, но каждый новый объект замыкал свои версии firstname и surname.

Comments

[meltmestnt]

Тогда весь скрипт ломается. Весь смысл то в том, что у конструктора есть локальные переменные, к которым у созданных объектов есть доступ. А так у всех есть доступ к имени и фамилии

[AngReload]

Ага, то есть нужны приватные свойства конструктора. Тогда с помощью iife:

опять спойлер

var User;
(function () {
  var firstname, surname;
  User = function () {
    this.setFirstName = function(name) {
      if (name.replace) {
        firstname = name;
      } else {
        throw new Error('Введите имя');
      }
    }
    this.setSurname = function(name) {
      if (name.search) {
        surname = name;
      } else {
        throw new Error('Введите фамилию');
      }
    }
    this.getFullName = function() {
      return firstname + ' ' + surname;
    }
  };
})();

var user = new User();
user.setFirstName("Петя");
user.setSurname("Иванов");

alert( user.getFullName() ); // Петя Иванов
var user2 = new User();
user2.setFirstName('Фёдор');
user2.setSurname("Марков");
alert( user2.getFullName() );
alert( user.getFullName() ); // Уже не Петя Иванов

Это замыкание для создание конструктора, firstname и surname теперь могут достать только созданные объекты.