javascript - 如何在不使用硬编码字符串的情况下传递javascript属性(名称)？

Question

示例用例:

1. 我有一个带有属性“myProperty”的对象，具有 getter 和 setter(自 EcmaScript 5 起支持“Property Getters 和 Setters”:https://www.w3schools.com/js/js_es5.asp):

   var obj = {
     myProperty:'myPropertyValue', 
     get myProperty(){
       return this.property;
     },
     set myProperty(value){
       this.property=value;
     }
   };
   

2. 我想将该属性绑定(bind)到 View ，这是名为 bindProperty 的自定义函数的任务。

为了将属性myProperty传递给函数，我可以做类似的事情

bindProperty(obj, 'myProperty');

但是，我想避免将属性名称作为硬编码字符串传递。字符串有一个缺点，即在重构过程中属性名称更改时它们不会更新。

如果我会使用

bindProperty(obj, obj.myProperty);

该函数只知道属性值“myPropertyValue”，而不知道该值的来源。

=>如何在不使用字符串的情况下传递/识别属性本身？

A.使用反射？

我可以想象类似的事情

bindProperty(obj, ()=>obj.myProperty);

函数 bindProperty 然后必须执行一些反射魔法来找出 lambda 表达式主体中的属性名称(伪代码):

let attributeName = getNameofArgumentFromBodyOfLambdaExpression(lambda);
obj[attributeName] = 'newValue';

=>JavaScript 中是否可以使用反射计算 lambda 表达式的主体来获取属性名称？

(我知道这可以用 .NET 语言完成，例如

Private Sub BindProperty(Of T)(propertyExpression As Expression(Of Func(Of T)))

    Dim propertyName As String = GetPropertyName(propertyExpression)
'...

)

B.使用复杂属性

另一种选择是我使用包装属性对象，拥有自己的 getter 和 setter。但是，那么我必须使用像

这样的属性

obj.myProperty.set('newValue')

或

obj.myProperty('newValue')  //similar to knockout observables

我仍然希望能够使用出色的 Getter/Setter 功能。换句话说:我想像普通属性一样使用我的属性:

obj.myProperty = 'newValue'

因此，这对我来说不是一个选择，我更愿意使用字符串而不是 B。

C.还有其他选择吗？

Answer 1

JavaScript 中的对象或多或少只是字符串或符号到值的映射。在运行时环境中没有可以调用的真正反射，可以让您从值向后移动到属性名称。

如果您需要的只是重构，那么执行此操作的一种方法是将您的 IDE 配置为通过 Flow 或 Typescript 或类似方式提供某种类型信息来识别字符串访问器(类型信息可能是是什么允许反射在 .NET 等语言中工作)。或者，您可以选择像“viewable_propName”这样的唯一前缀，然后在需要重命名时进行简单的查找和替换。

如果您确实专注于在没有类型信息和当前 ES6 语法的情况下使其工作，您可以执行以下操作:

function getNameofPropFromVal(obj, val){
    for(let prop in obj){
       if(obj[prop] === val) return prop;
    }
}

obj[getNameofPropFromVal(obj, obj.myProp)] = 'newVal';

虽然这有缺点: (1) 不保证两个属性(property)不会共享相同的值(value)。 (2) 引入了不必要的运行时开销。

最后，如果您愿意走在前沿并使用像 babel 这样的转换器，您可以在 bindProperty 方法中使用装饰器。这样您就可以在对象定义本身中进行绑定(bind)。这是an article解释要点，这里是 the more formal ECMAScript proposal .