Javascript 对象中的函数数组答案

【问题标题】：Array of functions in Javascript objectJavascript 对象中的函数数组
【发布时间】：2018-12-04 23:35:30
【问题描述】：

我需要在应该在对象内部调用的函数数组中创建一个对象。但 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();

知道如何创建函数数组作为主对象的属性吗？谢谢

【问题讨论】：

this 的值不受对象初始化器的影响；特别是this not 是否指的是正在初始化的对象；它与封闭上下文中的this 具有相同的值。
感谢您的光速快速回答，但我该如何解决这个问题？我在谷歌上花了一个小时，即使link 也帮不了我
首先，您的明确意图是通过运行这些方法来初始化这个事物。因此，您应该只调用init() 方法中的方法并处理数组混乱。其次，您应该考虑 JavaScript 对象的最佳实践，并编写适当的构造函数或类。答：直接调用函数，跳过数组乱码。
Object.create 是必需的吗？为什么不为这些使用原型？

标签： javascript arrays function object callback

【解决方案1】：

您需要在 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 扩展运算符并将 'this' 替换为 '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`)
};

【讨论】：

【解决方案2】：

当您在数组内调用/托管回调函数时，您要反对的概念是 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();

在您班级的myCallbacks 数组中将您的回调托管为string keys。这样您就可以通过属性访问器调用它们，而不必担心 this 上下文，因为此时它将是您所期望的——类。

【讨论】：