如何将字符串转换为具有属性和函数引用的 Javascript 对象？答案

【问题标题】：How to convert a string to a Javascript object with a property and a function reference?如何将字符串转换为具有属性和函数引用的 Javascript 对象？
【发布时间】：2019-03-20 13:59:40
【问题描述】：

我想生成一个 Javascript 对象，其中包含如下类型的函数（myClickHandler 示例）的属性（onClick 示例）：

var options = {onClick: this.myClickHandler};

我希望从字符串创建上面的对象，因为每次应用程序运行时选项对象都可能不同，并且我希望在运行时对其进行评估。（myClickHandler 是现有功能）。我想要从字符串创建的选项对象，因为 onClick 属性可以是其他东西，它的功能也可以是其他东西。这些是由动态的字符串确定的。

寻找这样的东西：

var optionsString = "{onClick: this.myClickHandler}";  
var options = JSON.parse(optionsString); //won't work. For illustration only.

这不会自然而然地工作。理想情况下，我想一次性转换字符串，但我可能必须解析它，但 optionString 可以包含一个或多个属性。

【问题讨论】：

如果是字符串中包含的函数，var options = {onClick: new Function(this.myClickHandler)}; ?但请尽量避免new Function 和eval..
等式的右边是一个字符串。您的评论中没有字符串，我看不出它是如何工作的。
方程，什么意思？这在 Typescript 中有什么特殊含义吗？（对不起，我不知道 Typescript）我不确定你在问什么，你说this.myClickHandler 是一个字符串，你想要字符串原样，还是一个函数？（如果函数，则使用new Function）
等号右边的整个是一个字符串。 '{onClick: this.myClickHandler}' 部分。该值是在运行时确定的。下次运行时，options 可能 = {onClick: this.someOtherMethod, draw:false}。
这个问题和angularjs有什么关系？你打算将此函数传递给某个组件/指令吗？

标签： javascript angularjs typescript

【解决方案1】：

尝试使用eval 作为：

var myClickHandler = function(){ alert('i am evil'); };
var options = JSON.parse('{ "onClick": "this.myClickHandler" }');

// 现在调用处理程序

eval(options.onClick)();

【讨论】：

这在我的情况下不起作用。选项对象由第三方库使用。我不能坚持 eval 和对它的函数调用。
您可以将函数公开为： var click = eval(options.onClick);并且可以作为click();
没有。 Options 必须是我提到的对象。现在你引入了一个新变量。

【解决方案2】：

您需要一些函数绑定到的上下文，以便您可以通过键（可以是字符串）访问该函数。

let context = {};

context.myclickhandler = () => {
	console.log("### It clix ####")
}

let nameOfFunction = "myclickhandler"
let obj = {"onClick" : context[nameOfFunction]};
obj["onClick"]();

在示例中，上下文只是一个对象，但它也可以是 windows 对象或构造函数的实例。

【讨论】：