Javascript中的getter和setter初识


Posted in Javascript onAugust 17, 2017

前言

本文主要给大家介绍的关于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>

参考

Object.defineProperty() - JavaScript | MDN

深入响应式原理 — Vue.js

总结

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

Javascript 相关文章推荐
固定网页背景图同时保持图片比例的思路代码
Aug 15 Javascript
jQuery中阻止冒泡事件的方法介绍
Apr 12 Javascript
node.js中的console.error方法使用说明
Dec 10 Javascript
jquery+javascript编写国籍控件
Feb 12 Javascript
Bootstrap的Refresh Icon也spin起来
Jul 13 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
Aug 02 Javascript
jQuery查找节点方法完整实例
Sep 13 Javascript
9种改善AngularJS性能的方法
Nov 28 Javascript
vue2.0父子组件间传递数据的方法
Aug 16 Javascript
详解webpack打包后如何调试的方法步骤
Nov 07 Javascript
详解js location.href和window.open的几种用法和区别
Dec 02 Javascript
JS前端模块化原理与实现方法详解
Mar 17 Javascript
简单实现js进度条加载效果
Mar 25 #Javascript
你可能不知道的JSON.stringify()详解
Aug 17 #Javascript
vue组件Prop传递数据的实现示例
Aug 17 #Javascript
js实现随机点名小功能
Aug 17 #Javascript
浅谈Vuejs Prop基本用法
Aug 17 #Javascript
简单快速的实现js计算器功能
Aug 17 #Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 #jQuery
You might like
PHP 配置open_basedir 让各虚拟站点独立运行
2009/11/12 PHP
总结PHP如何获取当前主机、域名、网址、路径、端口和参数等
2016/09/09 PHP
PHP操作redis实现的分页列表,新增,删除功能封装类与用法示例
2018/08/04 PHP
javascript indexOf函数使用说明
2008/07/03 Javascript
原生JS实现加入收藏夹的代码
2013/10/24 Javascript
使用js简单实现了tree树菜单
2013/11/20 Javascript
浅析js中的浮点型运算问题
2014/01/06 Javascript
JavaScript学习笔记之基础语法
2015/01/22 Javascript
jQuery调用ajax请求的常见方法汇总
2015/03/24 Javascript
JavaScript数组迭代器实例分析
2015/06/09 Javascript
js结合正则实现国内手机号段校验
2015/06/19 Javascript
javascript返回顶部的按钮实现方法
2016/01/09 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
2016/06/20 Javascript
JS获取鼠标选中的文字
2016/08/10 Javascript
浅谈js中test()函数在正则中的使用
2016/08/19 Javascript
JavaScript中call和apply方法的区别实例分析
2018/08/03 Javascript
vue实现element表格里表头信息提示功能(推荐)
2019/11/20 Javascript
vue分页插件的使用方法
2019/12/25 Javascript
深入解析微信小程序开发中遇到的几个小问题
2020/07/11 Javascript
[01:34]DAC2018主赛事第四日五佳镜头 Gh巨牙海民助Miracle-死里逃生
2018/04/07 DOTA
[01:03:09]完美世界DOTA2联赛PWL S2 Forest vs SZ 第二场 11.25
2020/11/26 DOTA
Python解决走迷宫问题算法示例
2018/07/27 Python
Python基础知识点 初识Python.md
2019/05/14 Python
详解Python利用random生成一个列表内的随机数
2019/08/21 Python
Python爬虫爬取Bilibili弹幕过程解析
2019/10/10 Python
使用PyTorch将文件夹下的图片分为训练集和验证集实例
2020/01/08 Python
详解Python中如何将数据存储为json格式的文件
2020/11/18 Python
举例讲解Python装饰器
2020/12/24 Python
英国领先的珍珠首饰品牌:Orchira
2016/09/11 全球购物
药品质量检测应届生求职信
2013/11/14 职场文书
自考生自我评价分享
2014/01/18 职场文书
网络技术专业求职信
2014/02/18 职场文书
审计局班子四风对照检查材料思想汇报
2014/10/07 职场文书
2015年毕业生个人自荐书
2015/03/24 职场文书
2015年社区矫正工作总结
2015/04/21 职场文书
如何写新闻稿
2015/07/18 职场文书