Javascript JS多数据绑定覆盖

我需要实现数据绑定或任何其他类型的变量观察器，只要变量发生变化，就会触发一些已定义的操作。我们也在谈论纯JS，由于性能问题，我不想使用任何类型的框架或库

我发现了一个非常简单和漂亮的数据绑定代码，但是它的行为非常复杂。仅当尝试仅绑定1个变量时，它才起作用。每当您尝试绑定多个变量时，它都会将所有操作绑定到最后一个元素，即使绑定分别被调用到不同的变量

函数绑定（b）{
_这个=这个
this.element=b.element
this.value=b.object[b.property]
this.attribute=b.attribute
this.valueGetter=函数（）{
返回这个值；
}
this.valueSetter=函数（val）{
_this.value=val
_this.element[_this.attribute]=val
}
Object.defineProperty（b.Object，b.property{
获取：这个，valueGetter，
set:this.valueSetter
});	
b、 对象[b.property]=此值；
this.element[this.attribute]=this.value
}
var obj={a:123，b:456，c:789}；
var myElement=document.getElementById（“myText”）；
var a=新绑定({
对象：obj，
财产：“a”，
元素：document.getElementById（“myText”），
属性：“值”，
});
var b=新绑定({
对象：obj，
财产：“b”，
元素：document.getElementById（“myText2”），
属性：“值”，
});
var c=新绑定({
对象：obj，
财产：“c”，
元素：document.getElementById（“myText3”），
属性：“值”，
});
setInterval（函数（）{
for（obj中的var键）
{obj[key]++；}}，1000）
只需使用箭头函数即可避免重新定义“this”，并避免使用全局变量对其进行破解：

function Binding(b) {
    this.element = b.element
    this.value = b.object[b.property]
    this.attribute = b.attribute
    this.valueGetter = () => {
        return this.value;
    }
    this.valueSetter = (val) => {
        this.value = val
        this.element[_this.attribute] = val
    }

    Object.defineProperty(b.object, b.property, {
        get: this.valueGetter,
        set: this.valueSetter
    }); 
    b.object[b.property] = this.value;

    this.element[this.attribute] = this.value
}

在定义
\u this
时，也可以使用
const
、
let
或
var
作为
\u this
hack上的补丁。但是箭头函数首先避免了
\这种
攻击。它们的设计目的是避免导致
\u this
黑客攻击的范围问题。
\u this=this
您正在创建一个隐含的全局可能的值得注意的副本：Internet Explorer
或
Opera Mini
@Riddell Opera Mini中不支持箭头功能。自ES6问世以来，Opera本身就非常支持arrow函数。它是在Chromium上运行的，所以很难不更新那里的web标准。Opera从2015年起就支持arrow功能。但是，是的，如果您需要支持每个设备上的每个浏览器，您可能需要设置一个ES6到ES5编译步骤来支持现代Javascript语法。那是打字错误。我已经更新了评论这听起来像是一个新项目，所以最好避免在项目开始时使用过时的Javascript语法，特别是对于一些基本的东西，如数据绑定API。