Как правильно получить доступ к внешнему объекту из внутреннего в JavaScript?

Question

[XpeH Петрович]

Есть следующий код:

function mock() {
	this.val = 'val';
	this.log = {
		start: function() {
			this.timer = setInterval(function() {
				console.log(this.val);
			}.bind(this), 1000);
		}.bind(this),
		stop: function() {
			clearInterval(this.timer);
			delete this.timer;
		}.bind(this)
	};
}

Впоследствии в строке console.log(this.val); предполагается доступ к внешнему объекту (то есть к mock). Сейчас я использовал bind(this) чтобы передать контекст во вложенные функции. Как правильно было бы написать подобное в парадигме JS так, чтобы в строке вида console.log(this.val) я мог получить нормальный доступ к внешнему (mock) объекту, и при этом чтобы интервал прикреплялся именно к вложенному объекту log(и был доступен через this в log'е) а не к mock? Насколько я понял тут либо надо передавать что-то через аргумент в start() либо каким-то образом сделать замыкание (но что именно замкнуть???). Но я все равно не понимаю, как бы это сделал человек который программирует на JS уже не один год и который умеет на этом языке думать) подскажите плз, javascript-ниндзи
ЗЫ.: Сам только перелез с пыхи на JS под Ноду. Не знаю насколько код выше выглядит адекватным, не судите строго

Answer 1

[Константин Громов]

У вас же this везде ссылается на корневой объект, значит ничего не мешает получить вложенный и работать с его свойствами:

function Mock() {
    this.val = 'val';
    this.log = {
        start: function() {
            this.log.timer = setInterval(function() {
                console.log(this.val);
            }.bind(this), 1000);
        }.bind(this),
        stop: function() {
            clearInterval(this.log.timer);
            delete this.log.timer;
        }.bind(this)
    };
}

Но конечно лучше просто разделить сущности:

function Timer(handler, interval) {
    this.handler = handler;
    this.interval = interval;
}

Timer.prototype.start = function () {
    this.timer = setInterval(this.handler, this.interval);
};

Timer.prototype.stop = function () {
    clearInterval(this.timer);
    delete this.timer;
};

function Mock() {
    this.val = 'val';
    this.log = new Timer(function () {
        console.log(this.val);
    }.bind(this), 1000);
}

Comments

[XpeH Петрович]

Константин Громов возник сразу другой вопрос. Не знаю корректно ли его по отношению к такому сервису как Тостер задавать именно в комментарии, но открывать из-за того отдельный топик считаю глупым ; )
Немного переписал Ваше решение. Вариант 1:

function Timer(handler, interval) {
    this.handler = handler;
    this.interval = interval;
		this.__proto__.start = function () {
		    this.timer = setInterval(this.handler, this.interval);
		};
		this.__proto__.stop = function () {
		    clearInterval(this.timer);
		    delete this.timer;
		};
}

Вариант 2:

function Timer(handler, interval) {
    this.handler = handler;
    this.interval = interval;
		this.start = function () {
		    this.timer = setInterval(this.handler, this.interval);
		};
		this.stop = function () {
		    clearInterval(this.timer);
		    delete this.timer;
		};
}

Вы видите какие-то принципиальные отличия? Оно работает в обоих вариантах.
ЗЫ.: теперь окончательно запутался в том как работает контекст в JS...

[Константин Громов]

XpeH Петрович: Класс подразумевает единообразность объектов которые ему принадлежат. В обоих ваших вариантах неизменными являются методы start и stop (практически всегда у классов все методы неизменны между экземплярами, если для какого-то из них нужна своя реализация определённого метода, для него создаётся подкласс в котором этот метод перезаписан. Различаются обычно свойства которые хранят в себе данные, подобные val в примере). И раз они неизменны зачем каждому экземпляру создавать себе копию всех методов (у каждого new Timer() в памяти свои функции start и stop), если можно брать их из одного места (прототипа)? Технически разницы нет, подобным образом избегаются бессмысленная трата памяти/процессорного времени и появляется редко необходимая возможность не проходя по всем уже существующим экземплярам класса (что требует их хранения в каком-либо доступном массиве) менять/добавлять/удалять различный функционал. Ваш первый вариант полностью бессмысленен (сложно объяснить его нелепость кратко), а второй может иметь место если требуется приватность данных привязанных к экземпляру. Это выглядело бы так:

function Timer(handler, interval) {
	var timer;

	this.start = function () {
		timer = setInterval(handler, interval);
	};

	this.stop = function () {
		clearInterval(timer);
		delete timer;
	};
}

Использование же прототипа обязывает хранить все данные как свойства, что подразумевает их доступность извне (например можно сломать таймер подобным образом: delete log.handler). В примере выше timer хранится в замыкании и подобное невозможно.

[Константин Громов]

В прошлом комментарии вместо delete timer должно быть timer = null. И handler вместо timer в последнем предложении.

[Константин Громов]

XpeH Петрович: Если же вы просто не понимаете почему и то и другое работает, почитайте https://learn.javascript.ru/prototype.

[XpeH Петрович]

Константин Громов Спасибо за пример. Почитаю конечно, не дошел еще до самих прототипов (изначально все было в одном блоке/функции/классе).

Answer 2

[Виталий]

если я правильно понимаю, то вы хотите по вызову this.val в любом месте кода получать значение объекта , но это же не правильно.
Ваш случай следующий:

let m = new mock();
m.log.start();
m.log.stop();

про this в браузере this вне какого-либо объекта будет ссылаться на window
в ноде на объект ноды, который в себе много чего содержит (global, module, process и тп)
Или вы про это?

function mock(number) {
  this.number = number;
  this.val = 'val';
  this.log = {
    start: function() {
      this.timer = setInterval(function() {
        console.log(this.number, ": ", this);
      }.bind(this), 1000);
    }.bind(this),
    stop: function() {
      clearInterval(this.timer);
      delete this.timer;
    }.bind(this)
  };
}

m = new mock('1')
> mock {number: "1", val: "val", log: Object}
n = new mock('2')
>mock {number: "2", val: "val", log: Object}
m.log.start(); n.log.start()

VM2668:7 1 :  mock {number: "1", val: "val", log: Object, timer: 6480}
VM2668:7 2 :  mock {number: "2", val: "val", log: Object, timer: 6481}
VM2668:7 1 :  mock {number: "1", val: "val", log: Object, timer: 6480}
VM2668:7 2 :  mock {number: "2", val: "val", log: Object, timer: 6481}
VM2668:7 1 :  mock {number: "1", val: "val", log: Object, timer: 6480}
VM2668:7 2 :  mock {number: "2", val: "val", log: Object, timer: 6481}
VM2668:7 1 :  mock {number: "1", val: "val", log: Object, timer: 6480}
VM2668:7 2 :  mock {number: "2", val: "val", log: Object, timer: 6481}
VM2668:7 1 :  mock {number: "1", val: "val", log: Object, timer: 6480}
VM2668:7 2 :  mock {number: "2", val: "val", log: Object, timer: 6481}
VM2668:7 1 :  mock {number: "1", val: "val", log: Object, timer: 6480}
VM2668:7 2 :  mock {number: "2", val: "val", log: Object, timer: 6481}
VM2668:7 1 :  mock {number: "1", val: "val", log: Object, timer: 6480}
VM2668:7 2 :  mock {number: "2", val: "val", log: Object, timer: 6481}
VM2668:7 1 :  mock {number: "1", val: "val", log: Object, timer: 6480}
VM2668:7 2 :  mock {number: "2", val: "val", log: Object, timer: 6481}
VM2668:7 1 :  mock {number: "1", val: "val", log: Object, timer: 6480}
VM2668:7 2 :  mock {number: "2", val: "val", log: Object, timer: 6481}
m.log.stop(); n.log.stop()

Answer 3

[Александр Манаков]

То что вы ищите похоже на стрелочные функции в ES6.
Я бы сделал так:

function mock() {
  this.val = 'val';
  this.startlog = () => {
     this.timer = setInterval(() => {
        console.log(this.val);
      }, 1000)
  };
  this.stopLog = () => {
      clearInterval(this.timer);
      delete this.timer;
  }
}

Или с классами:

class Mock {
   constructor() {
      this.val = 'val';
   }

   startlog() {
     this.timer = setInterval(() => {
        console.log(this.val);
      }, 1000)
  }

   stopLog() {
      clearInterval(this.timer);
      delete this.timer;
  }

}