Массив функций в объекте Javascript - PullRequest
Новая
       7

Массив функций в объекте Javascript

0 голосов
/ 05 декабря 2018

Мне нужно создать объект в массиве функций, которые должны вызываться внутри объекта.но myObj.myFunctions всегда не определено внутри моего объекта после создания.

вот мой пример кода 

var myObj = {
      myValue:"My Callback function has been Called",
      myFunctions: [this.myCallback,this.myCallback2],
      init: function(){
        //I need to call this.myFunctions[0...etc]  as callback
        //this.myFunctions[0]() //<-- Here is the error
        console.log(this.myFunctions); //<-- always undefined
      },
      myCallback:function(){
         console.log(this.myValue);
      },
      myCallback2:function(){
         console.log(this.myValue+" Second Callback");
      }
}
var createObject = Object.create(myObj);
createObject.init();

Есть идеи, как создать массив функций как свойство основного объекта?Спасибо

Ответы [ 2 ]

0 голосов
/ 05 декабря 2018

Вам необходимо Создать функцию внутри myFunctions и вернуть этот массив обратных вызовов :

Метод # 1 

var myObj = {
  myValue:"My Callback function has been Called",
  myFunctions: function () {                       // Assign a function and return those array of callbacks
    return [this.myCallback,this.myCallback2];
  },
  init: function(){
    return this.myFunctions();
  },
  myCallback:function(){
    console.log(this.myValue);
  },
  myCallback2:function(){
    console.log(this.myValue+" Second Callback");
  }
};

var createObject = Object.create(myObj);
var functions    = createObject.init();

console.log(functions);    // [f(), f()] 
                           // f for short-term of 'function'

Метод № 2 - Использование прямого вызова функции уже поддерживается для кода очистителя 

var myObj = {
  myValue:"My Callback function has been Called",
  myFunctions() { 
    return [this.myCallback, this.myCallback2] 
  },
  init() { 
    return this.myFunctions(); 
  },
  myCallback(){
    console.log(this.myValue);
  },
  myCallback2(){
    console.log(this.myValue+" Second Callback");
  }
};

Метод № 3 - Использование ES6 Spread Operator и Replace 'this 'to' myObj '

const myObj = {
  myValue:"My Callback function has been Called",
  myFunctions: () => [myObj.myCallback, myObj.myCallback2],
  init: () => myObj.myFunctions(),
  myCallback: () => console.log(myObj.myValue),
  myCallback2: () => console.log(`${myObj.myValue} Second Callback`)
};
0 голосов
/ 05 декабря 2018

Концепция, с которой вы боретесь - это значение this, когда вы вызываете / размещаете свои функции обратного вызова внутри массива.После этого this становится array, и, таким образом, вы не получите ожидаемый результат.Одним из способов получить этот результат может быть использование call и преобразование вашего объекта, чтобы его можно было создать следующим образом: 

var myObj = function() {
  this.myValue = "My Callback function has been Called",
  this.init = function() {
    this.myFunctions[0].call(this)  // <-- pass the proper `this`
    this.myFunctions[1].call(this)
  },
  this.myCallback = function() {
    console.log(this.myValue);
  },
  this.myCallback2 = function() {
    console.log(this.myValue + " Second Callback");
  },
  this.myFunctions = [this.myCallback, this.myCallback2]
}
var createObject = new myObj()
createObject.init();

Другой способ был бы через bind, но это вряд ли рекомендуется в наши дни, поэтому я бы пропустил его и направился к рекомендации, которую, я думаю, вы должны рассмотреть: 

class MyObj {
  constructor(val) {
    this.myValue = val;
  }
  myCallback() {
    console.log(this.myValue + " - First Callback");
  }
  myCallback2() {
    console.log(this.myValue + " - Second Callback");
  }
  get myCallbacks() {
    return ['myCallback', 'myCallback2']
  }
  init() {
    this[this.myCallbacks[0]]()  // <-- no issues with `this` anymore
    this[this.myCallbacks[1]]()
  }
}
var createObject = new MyObj('foo')
createObject.init();

Разместите ваш обратный вызов как string keys в вашем массиве myCallbacks в вашем классе.Таким образом, вы можете вызывать их через средство доступа к свойству и не беспокоиться о контексте this, поскольку в данный момент это будет тот, который вы ожидаете - класс.

...