在mvvm框架中，数据双向绑定的底层实现中会用到setter和getter，javascript的中的setter和getter可以实现：
- 当获取对象的属性值时可以触发
get方法 - 当为对象的属性赋值时可以触发
set方法
主要有如下4种实现方式：
对象初始化时定义
var obj = {
a: 1,
get b() {
return this.a;
},
set b(v) {
this.a = v;
}
};
console.log(obj.b);
obj.b = 2;
console.log(obj.b);
Object.create
var proto = {a : 1};
var obj = Object.create(proto, {
b: {
get: function () {
return this.a;
},
set: function (v) {
this.a = v;
}
}
});
console.log(obj.b);
obj.b = 2;
console.log(obj.b);
-
Object.prototype.__defineGetter__(非标准)&&Object.prototype.__defineSetter__(非标准)
var obj = { a: 1 };
obj.__defineGetter__("b", function () {
return this.a;
});
obj.__defineSetter__("b", function (v) {
this.a = v;
})
console.log(obj.b);
obj.b = 2;
console.log(obj.b);
Object.defineProperty
var obj = { a: 1 }
Object.defineProperty(obj, "b", {
get: function () {
return this.a;
},
set: function (v) {
this.a = v;
}
});
console.log(obj.b);
obj.b = 2;
console.log(obj.b);
以上示例中
- obj.b 获取 b 属性值时就会触发 get 方法
- obj.b = 2 为 b 属性赋值值就会触发 set 方法
在某些业务场景中，用户在文本框输入之后，会触发oninput方法进行校验，标红等。但是如果使用js为input赋值却无法触发这些方法，那么就可以使用setter，getter来实现。
js修改input元素的value值时触发set方法
<input id="xf" type="text" name="tt" value="1" />
<script type="text/javascript">
var inputProto = HTMLInputElement.prototype;
Object.defineProperty(inputProto, "value", {
set: function (value) {
var newValue = arguments.length ? value : this.value;
var node = this.attributes.value;
if (!node || newValue !== node.value) {
var event = document.createEvent("Event");
event.initEvent("input", true, true);
this.setAttribute("value", newValue);
this.style.color = 'red'
if (document.documentElement.contains(this)) {
this.dispatchEvent(event);
}
}
}
});
xf.oninput = function () {
console.log("fire event oninput!");
}
xf.value = 2;
</script>
上诉代码，当使用js修改input元素的value值时，触发set方法，使input的文字变成红色，并且触发oninput事件。
注意：
上诉代码只在chrome下测试有效，其他浏览器的兼容方式可自行搜索。
