最近在工作中遇到了getter和setter，getter 是一种获得属性值的方法，setter是一种设置属性值的方法。下面这篇文章主要给大家介绍了关于javascript中getter和setter的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。
前言
本文主要给大家介绍的关于javascript中getter和setter的相关内容，第一次听说这个东西的时候是vue.js里面的数据绑定，只要绑定了数据，修改对象属性可以自动反馈到dom上，很神奇，后面也看到了文档里面实现是对对象定义了getter和setter并覆盖原属性，索性就来总结这两者的用法，下面话不多说了，来一起看看详细的介绍吧。
原理
利用object.defineproperty来重写对象属性为getter和setter，通过getter和setter顺便改变绑定dom节点的值
例子
摘自mdn
function archiver() {
var temperature = null;
var archive = [];
object.defineproperty(this, 'temperature', {
get: function() {
console.log('get!');
return temperature;
},
set: function(value) {
temperature = value;
archive.push({ val: temperature });
}
});
this.getarchive = function() { return archive; };
}
var arc = new archiver();
arc.temperature; // 'get!'
arc.temperature = 11;
arc.temperature = 13;
arc.getarchive(); // [{ val: 11 }, { val: 13 }]
利用这个mdn例子小小的写了个方法并写了个计时器的demo
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>document</title>
</head>
<body>
<h1 id="testtime" z:bind="time">0s</h1>
<script>
// 双向绑定
function bind_data(ele, arg){
var bindattributename = 'z:bind';
var data = json.parse(json.stringify(arg)) || {};
object.keys(arg).foreach(function(argkey, index, array){
object.defineproperty(arg, argkey, {
get: function(){
return data[argkey];
},
set: function(value){
if(ele.getattribute(bindattributename) !== argkey) {
return;
}
if(ele.tagname === 'input'){
ele.value = value;
}else{
ele.innerhtml = value;
}
data[argkey] = value;
}
});
arg[argkey] = arg[argkey];
});
var key = ele.getattribute(bindattributename);
if((ele.tagname === 'input' || ele.tagname === 'textarea') && arg[key]){
ele.addeventlistener('input', function(e){
data[key] = ele.value;
});
}
}
/*
例子很简单，直接改变对象属性，就直接
反馈到了dom上，就好像是一个钩子，改变
这个对象的属性，这个属性的钩子把它绑
定的dom的数据进行修改
*/
var start = (new date()).gettime();
var now;
var b = {time: '0s'};
bind_data(document.getelementbyid('testtime'), b);
setinterval(function(){
var now = (new date()).gettime();
b.time = ((now - start)/1000) + 's'
}, 1);
</script>
</body>
</html>
以上就是javascript中getter和setter基本介绍的详细内容。