微客导航 » 文章资讯 » Javascript中的getter和setter初识

Javascript中的getter和setter初识

2023-09-26 08:14:06 148

前言

本文主要给大家介绍的关于Javascript中getter和setter的相关内容，第一次听说这个东西的时候是vue.js里面的数据绑定，只要绑定了数据，修改对象属性可以自动反馈到dom上，很神奇，后面也看到了文档里面实现是对对象定义了getter和setter并覆盖原属性，索性就来总结这两者的用法，下面话不多说了，来一起看看详细的介绍吧。

原理

利用Object.defineProperty来重写对象属性为getter和setter，通过getter和setter顺便改变绑定DOM节点的值

例子

摘自MDN

functionArchiver(){
vartemperature=null;
vararchive=[];

Object.defineProperty(this,'temperature',{
get:function(){
console.log('get!');
returntemperature;
},
set:function(value){
temperature=value;
archive.push({val:temperature});
}
});

this.getArchive=function(){returnarchive;};
}

vararc=newArchiver();
arc.temperature;//'get!'
arc.temperature=11;
arc.temperature=13;
arc.getArchive();//[{val:11},{val:13}]

利用这个MDN例子小小的写了个方法并写了个计时器的DEMO





Document


0s

参考

Object.defineProperty()-JavaScript|MDN

深入响应式原理—Vue.js

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对毛票票的支持。

返回顶部
3162201930
czq8825@qq.com

Javascript中的getter和setter初识

热门推荐

随机推荐