Зачем сохранять контекст вызова в переменную?

Question

[reinmaker90]

Не понимаю, зачем используется var self = this, как и вообще this присваивается, читал, что это используется, чтобы во вложенных функция использовать основной контекст функции, но почему-то в простом примере

function a() {
    let self = this; // widnow
    console.log(this); 
    var fn = function () {
      console.log(this); //widnow
      console.log(self); // function a
    };
    fn();
  }
  a();

получается, что все console.log выводят window.

Comments

[0xD34F]

хоть об стену расшибись

Меньше слов, больше дела.

[Сергей delphinpro]

У вас плохой пример. Может поэтому не понимаете.

[reinmaker90]

0xD34F, сарказм это отлично, а если помочь объяснить или ссылку дать на статью, смысла писать такой комментарий?

[Сергей delphinpro]

Может, если в последней строчке вы добавите new (используете функцию как конструктор), будет понятнее.

new a();

[reinmaker90]

Сергей delphinpro, есть другой, разработчик делал на работе мелкий виджет, но тут я тоже не особо понял для чего self используется

function Widget(delay, times, btm_text, theme, afterLoad, container = false){
	var self = this;
	this.afterLoad = afterLoad
	this.times = times+1;
	this.delay = delay;
	this.burns_btn_wrap = document.createElement("div");
	this.burns_btn_wrap.setAttribute('class', 'burns-btn__wrap ' + theme);


	// Main masege
	this.burns_msg = document.createElement('div');
	this.burns_msg.setAttribute('class', 'burns-msg__wrap');


	let HtmlStr = 	 '<div class="burns-msg__body msg-b">';
		HtmlStr +=  	'<div class="burns-msg__body msg-b__left">';
		HtmlStr += 	 	'<div class="burns-msg__body msg-b__img"></div>';
		HtmlStr += 	'</div>';

		HtmlStr += 	'<div class="burns-msg__body msg-b__right">';
		HtmlStr += 		'<div class="msg-b__text">';
		HtmlStr += 					'<span class="msg-b__text_one">Что-то также написал, много много текста</span>';
		HtmlStr += 					'<span class="msg-b__text_two">Жми кнопку друк!</span>';
		HtmlStr += 		'</div>';

		HtmlStr += 		'<div class="msg-b__link">';
		HtmlStr += 				'<a href="#">Жмяк!</a>';
		HtmlStr += 		'</div>';

		HtmlStr += 	'</div>';

		HtmlStr += '</div>';
		HtmlStr += '<span class="burns-msg__close"></span>';
	
		this.burns_msg.insertAdjacentHTML('afterBegin', HtmlStr);



	// Main btn
	this.burns_btn = 		 document.createElement('div');
	this.burns_btn.setAttribute('class', 'burns-btn');

	burns_btnHTML = 		'<div class="burns-btn__body">';
	burns_btnHTML  += 			btm_text;
	burns_btnHTML  +=     		'<span class="burns-btn__close"></span>';
	burns_btnHTML  += 		'</div>';

	this.burns_btn.insertAdjacentHTML('afterBegin', burns_btnHTML);

	if(container){
		let container2 = document.querySelector(container);
		container2.after(this.burns_btn_wrap);
	}
	else 
		document.body.after(this.burns_btn_wrap);
	
	let wrap = document.querySelector('.burns-btn__wrap');
	let burns_msg2 = document.querySelector('.burns-msg__wrap');
	wrap.appendChild(this.burns_msg);
	wrap.appendChild(this.burns_btn);

	this.check4(this.burns_msg);

	let closeMSG = document.querySelector('.burns-msg__close');

	closeMSG.addEventListener('click', this.close.bind(self));

	this.burns_btn.addEventListener('click', this.open.bind(self));

	this.burns_btn.addEventListener('mouseenter', this.mouseOnElement.bind(self));
	this.burns_btn.addEventListener('mouseleave', this.mouseOutElement.bind(self));
}

Widget.prototype.mouseOutElement = function(){

	let bodyMSG = document.querySelector('.burns-btn__body');
	let btn2 = document.querySelector('.burns-btn');
	console.log(btn2);
	if(bodyMSG.classList.contains('hover') && btn2.classList.contains('hover')){
		bodyMSG.classList.remove('hover');
		btn2.classList.remove('hover');
	}
}

Widget.prototype.mouseOnElement = function(){
	let bodyMSG = document.querySelector('.burns-btn__body');
	let btn2 = document.querySelector('.burns-btn');
	console.log(btn2);
	if(!bodyMSG.classList.contains('hover') && !btn2.classList.contains('hover')){
		bodyMSG.classList.add('hover');
		btn2.classList.add('hover');
	}
}

Widget.prototype.open = function(){
	if(!this.burns_msg.classList.contains('open'))
		this.burns_msg.classList.add('open');
}

Widget.prototype.close = function(){
	console.log(this.burns_msg);
	if(this.burns_msg.classList.contains('open')){
		this.burns_msg.classList.remove('open');
		let cookie = this.level();
		if(cookie){
			let self = this;
			cookie++;
			sessionStorage.setItem('burns-btn__cnt', cookie);
			this.delay3(self);
		}
	}
}

Widget.prototype.delay3 = function(el){
	setTimeout(function(){
		console.log(this);
		el.check4(el.burns_msg);
	}, this.delay)
}

Widget.prototype.level = function(){
	let cook =  sessionStorage.getItem('burns-btn__cnt');
		if(cook == null) return 1;
		else if(cook < this.times) return parseInt(cook);
		else if(cook >= this.times) return 0;
		else return 0;
}	

Widget.prototype.check4 = function(el){
	console.log(this.level() )
	if(this.level()  && !el.classList.contains('open')){
			setTimeout(function(){
				el.classList.add('open');
			}, this.afterLoad)
		}
}

Answer 1

[Artem Pyvovar]

Не коректный пример (

function a() {
    let self = this; // widnow
    console.log(this); 
    var fn = function () {
      console.log(this); //widnow
      console.log(self); // function a - widnow
    };
    fn();
  }
  a();