javascript - JS 多重数据绑定(bind)覆盖

Question

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

我找到了一个非常简单和漂亮的数据绑定(bind)代码，但它的行为很奇怪。仅当您尝试仅绑定(bind) 1 个变量时它才有效。每当您尝试绑定(bind)多个变量时，它会将所有操作绑定(bind)到最后一个元素，即使绑定(bind)是分别调用到不同的变量也是如此。

function Binding(b) {
	_this = this
	this.element = b.element
	this.value = b.object[b.property]
	this.attribute = b.attribute
	this.valueGetter = function(){
		return _this.value;
	}
	this.valueSetter = function(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
}


var obj = {a:123, b:456, c:789};
var myElement = document.getElementById("myText");
var a = new Binding({
	object: obj,
	property: "a",
	element: document.getElementById("myText"),
	attribute: "value",
});

var b = new Binding({
	object: obj,
	property: "b",
	element: document.getElementById("myText2"),
	attribute: "value",
});

var c = new Binding({
	object: obj,
	property: "c",
	element: document.getElementById("myText3"),
	attribute: "value",
});

setInterval(function(){
for(var key in obj)
{obj[key]++;} }, 1000);

<input type=text id="myText"/>
<input type=text id="myText2"/>
<input type=text id="myText3"/>

请问如何以这样的方式更改代码，以便我可以分别绑定(bind)变量？我尝试过使用 .bind() 就像“this”正在覆盖某些东西一样，我尝试使用重写函数绑定(bind)到类，但到目前为止没有结果......

感谢任何帮助，谢谢!

Answer 1

只需使用箭头函数即可避免重新定义“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
}

在定义 _this 时，您还可以使用 const、let 或 var，作为顶部的补丁你的 _this 技巧。但是箭头函数首先避免了 _this hack。它们旨在避免导致 _this hack 的范围界定问题。