JavaScript基础篇(二): 浅谈Getter/Sette
2019-01-02 本文已影响0人
废材小熊猫
做为一名前端攻城师，基础必须要好，这一章就来简单的说说什么是get，什么是set。
get和set简单来说就是监听属性的取值、赋值动作。说道这里，你肯定很懵逼，你说清楚啊，这么说谁能懂？ 既然这样，那来个简单的小栗子演示一下get和set的操作吧:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>get/set</title>
</head>
<input type="text" v-model="test1">
<input type="text" v-model="test2">
<body>
<script>
let data = {
test1: '',
test2: ''
};
(function () {
//input改变，更新data里面的数据。
var dom = document.querySelectorAll('input');
for (var i = 0; i < dom.length; i++) {
if (dom[i].getAttribute('v-model')) {
let a = dom[i].getAttribute('v-model');
dom[i].oninput = function (e) {
data[a] = e.target.value;
};
}
};
//data数据改变。更改Input的value。
for (let list in data) {
Object.defineProperty(data, list, {
get: function () {
return list;
},
set: function (value) {
list = value;
for (x = 0; x < dom.length; x++) {
if (dom[x].getAttribute('v-model')) {
let a = dom[x].getAttribute('v-model');
if (data[a] != a) {
dom[x].value = data[a];
}
}
}
}
});
}
})();
//可在下面添加方法改变data下的值查看value是否改变。
</script>
</body>
</html>
好的，大家能看到在上面的代码中，写了一个简单的双向绑定的例子来展示了get/set的使用，当修改输入框的值时：
test.gif
从上图中可以看到，修改了输入框的值，然后在控制台打印的时候，会触发get方法，返回对应的值打印到控制台上。
对应的，如果在修改了data里面test1,test2的值，就会触发set方法，并运行里面包含的逻辑代码，如下:
test2.gif
可以看到，当在控制台修改了data里面test1和test2的值时，输入框里对应的值也发送了改变，这就是set方法里面的逻辑。
好的，相信到了这里，打架对set和get方法已经有了比较深刻的认知，希望大家能在工作中对js基础进一步的加强，溜了溜了~
