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

Question

[djok2142]

Часто встречал такую конструкцию.

var fun1 = function() {
  
  this.init = function() {
  	console.log('Функция 1');
  }
  
  return this;
}();

<button onclick="fun1.init();">Какое ни будь действие</button>

Не совсем понимаю зачем вложенная функция init() присваивается обьекту this, а так же зачем в конце возвращается this.
В общем создал вторую такую функцию.

var fun2 = function() {
  
	this.init = function() {
  	console.log('Функция 2');
  }
  
  return this;
}();

Но теперь при вызове fun1.init(); в консоль выводится текст "Функция 2", то есть функция init() была переопределена из функции 2, почему так происходит? И как сделать что бы fun1.init(); и fun2.init(); выполняли разный код?

Comments

[Ярослав Иванов]

Я тоже как и вы не понимаю. Перестаньте смотреть уроки сомнительного качества.
https://learn.javascript.ru/

Answer 1

[G F]

Во внешней функции this - глобальный объект, в него добавляется метод init, затем этот объект возвращается и присваивается в переменную.
func1 === func2, хранят ссылку на один объект.
Чтобы они выполняли разный код можно сделать кучей других нормальных способов. На главный вопрос "зачем так писать" вам никто не ответит.)

Comments

[djok2142]

Благодарю за ответ!

Другие нормальные способы, это например через new?

var fun1 =  new function() {
  
  this.init = function() {
  	console.log('Функция 1');
  }

}

Или через классы?

[G F]

djok2142,
Вообще без вложенности. Через что писать, тебе решать, зависит от того что ты хочешь получить в итоге от создаваемых объектов. Вот самый простой пример через класс.

class myClass {
	init() {
		console.log("bla-bla")
	}
}

const myObject = new myClass()

myObject.init()