Объект, функция и this. Как правильно вызвать функцию?

Question

[Тимофей Михайлов]

Здравствуйте. Возможно это довольно глупый вопрос, но подскажите что можно сделать в моём случае.

var example = {
  step_1: {
    get: function () {
      return '12345'
    }
  },
  step_2: {
    get: function () {
      var key = this.step_1.get();
      console.log(key + ' from "step_1"')
    }
  }
};

Если я выполню вызов функции: example.step_2.get()
Мне выдаётся ошибка: Uncaught TypeError: Cannot read property 'get' of undefined

Ну, я понимаю в чём ошибка, потому что this у меня это this-объекта step_2, а не переменной example.
По логике, нужно прокинуть нужный this, в функцию get объекта step_2, но сообразить не могу как это сделать

Пожалууйста подскажите.

Comments

[Lynn «Кофеман»]

example.step_2.get.call(example)

Но зачем вообще такой странный код?

[Тимофей Михайлов]

Lynn «Кофеман», простите, а почему вы не можете дать обычный ответ? А пишите в комментарий ...
Касательно вашего вопроса, почему код странный? У нас много функций разбиты таким образом =(

[uRoot]

Тимофей Михайлов, а что вы юзаете на фронте? Какие-то библиотеки, фреймворки? Просто такой подход достаточно редко можно увидеть. Хотя может это я не туда смотрю

Answer 1

[Сергей Соколов]

Может, тут имелись в виду геттеры?

var example = {
  get step_1() {
    return '12345'
  },
  get step_2() {
    var key = this.step_1;
    console.log(key + ' from "step_1"')
  }
};

example.step_2 //  12345 from "step_1"

Впрочем, если настаиваете, можно привязать example как this с помощью bind()

// ...
step_2: {
    get: (function () {
      var key = this.step_1.get();
      console.log(key + ' from "step_1"')
    }).bind(example), // теперь тут this === example
  }

example.step_2.get() // 12345 from "step_1"

Или, чтобы не пачкать руки в машинном масле, можно забиндить потом:

// (исходный код вопроса)

// magic!
Object.keys(example).forEach((key) => {
  if ("get" in example[key])
    example[key].get = example[key].get.bind(example);
});

example.step_2.get(); // 12345 from "step_1"

Comments

[Тимофей Михайлов]

К сожалению нет, "get" я использовал для простоты. Но вы наверое правы ... теперь это всех будет путать =(

[Сергей Соколов]

Тимофей Михайлов, тогда bind() – обновил ответ

Answer 2

[Сергей delphinpro]

нужно прокинуть нужный this, в функцию get объекта step_2, но сообразить не могу как это сделать

Ну если в лоб, то так

example.step_2.get.bind(example)();

Comments

[Тимофей Михайлов]

вообще, я тоже подумал об этом. Но с точки зрения красивости кода, получается тавтология =(

Answer 3

[Сергей Сергей]

var example = ( function( self ) { return self = {
  step_1: {
    get: function() {
      return '12345'
    }
  },
  step_2: {
    get: function() {
      var key = self.step_1.get();
      console.log(key + ' from "step_1"')
    }
  }
} } ) ();

было

var example = ( self => self = {
  step_1: {
    get() {
      return '12345'
    }
  },
  step_2: {
    get() {
      var key = self.step_1.get();
      console.log(key + ' from "step_1"')
    }
  }
} ) ();

Comments

[Тимофей Михайлов]

мне нравится идея, но у меня - ecmascript 5

[Тимофей Михайлов]

var example  = (
  function () {
    var val = {
      step_1: {
        get: function () {
          return '12345'
        }
      },
      step_2: {
        get: function () {
          var key = val.step_1.get();
          console.log(key + ' from "step_1"')
        }
      }
    }

    return val;
  })();

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

[Сергей Сергей]

Тимофей Михайлов, это вариант без биндов, при некоторой доле самовнушения можно принимать за форму построения объектов. И переменная локальная, глобального example внутри нет.

[WbICHA]

Тимофей Михайлов,

Но возникает вопрос, зачем мне тогда создавать самовызывающуюся функцию, и мудрить с переменными, если я тоже самое могу сделать в обычном объекте?

Потому что это позволит без проблем переназначить переменную example. Не то, чтобы это было очень нужно, но всё же. Более надёжное решение.

Answer 4

[insighter]

Если прямо отвечать на вопрос то надо сделать так:

example.step_2.step_1 = example.step_1;
example.step_2.get()

Comments

[Тимофей Михайлов]

вау, такого ещё никто не предлагал =)

[insighter]

Тимофей Михайлов, вы обращаетесь к несуществующему полю "step_1" объекта "step_2", ну как бы очевидно что нужно сделать :)

[WbICHA]

Тимофей Михайлов, потому что это плохое решение.

Answer 5

[Alexandroppolus]

Просто использовать "example" вместо "this". Я ведь правильно понимаю, что другого контекста тут не предусмотрено?

А если контекст выяснится позднее, то можно это дело оформить как класс, а все геты сделать стрелочными функциями - они сразу забиндятся как надо.

Либо степы создавать отдельно, со ссылками друг на друга через DI.

Answer 6

[Rsa97]

const example = {
  get step_1 () {
    return '12345';
  },
  get step_2 () {
    var key = this.step_1;
    console.log(key + ' from "step_1"');
  },
};
console.log(example.step_2);
// 12345 from "step_1"