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 相关文章推荐
jquery 使用点滴函数代码
May 20 Javascript
js解析与序列化json数据(一)json.stringify()的基本用法
Feb 01 Javascript
javascript获取当前鼠标坐标的方法
Jan 10 Javascript
JavaScript中的anchor()方法使用详解
Jun 08 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
Nov 25 Javascript
适用于javascript开发者的Processing.js入门教程
Feb 24 Javascript
Angularjs中的ui-bootstrap的使用教程
Feb 19 Javascript
jquery easyui如何实现格式化列
Jul 30 jQuery
JavaScript实现三级级联特效
Nov 05 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
May 10 Javascript
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
Oct 15 Javascript
vue+ESLint 配置保存 自动格式化代码
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程序开发范例学习之表单 获取文本框的值
2011/08/08 PHP
PHP面向对象编程之深入理解方法重载与方法覆盖(多态)
2015/12/24 PHP
PHP implode()函数用法讲解
2019/03/08 PHP
PHP内存溢出优化代码详解
2021/02/26 PHP
javascript控制frame,iframe的src属性代码
2009/12/31 Javascript
ExtJS 下拉多选框lovcombo
2010/05/19 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
2013/07/15 Javascript
Nodejs进程管理模块forever详解
2014/06/01 NodeJs
jQuery 过滤方法filter()选择具有特殊属性的元素
2014/06/15 Javascript
jquery实现的简单二级菜单效果代码
2015/09/22 Javascript
Vue.js在使用中的一些注意知识点
2017/04/29 Javascript
jsTree事件和交互以及插件plugins详解
2017/08/29 Javascript
vue2手机APP项目添加开屏广告或者闪屏广告
2017/11/28 Javascript
Webpack之tree-starking 解析
2018/09/11 Javascript
Vue解析带html标签的字符串为dom的实例
2019/11/13 Javascript
如何使用webpack打包一个库library的方法步骤
2019/12/18 Javascript
JQuery基于FormData异步提交数据文件
2020/09/01 jQuery
vue3.0自定义指令(drectives)知识点总结
2020/12/27 Vue.js
Python使用asyncio包处理并发详解
2017/09/09 Python
Python实现基本数据结构中队列的操作方法示例
2017/12/04 Python
Python爬虫实现抓取京东店铺信息及下载图片功能示例
2018/08/07 Python
python flask框架实现重定向功能示例
2019/07/02 Python
linux中如何使用python3获取ip地址
2019/07/15 Python
Python爬虫 scrapy框架爬取某招聘网存入mongodb解析
2019/07/31 Python
导入tensorflow时报错:cannot import name 'abs'的解决
2019/10/10 Python
python 实现非极大值抑制算法(Non-maximum suppression, NMS)
2020/10/15 Python
德国体育用品网上商店:SC24.com
2016/08/01 全球购物
Unix如何在一行中运行多个命令
2015/05/29 面试题
创意活动策划书
2014/01/15 职场文书
2014年保管员工作总结
2014/11/18 职场文书
党风廉政建设个人总结
2015/03/06 职场文书
2015年派出所工作总结
2015/04/24 职场文书
恋恋笔记本观后感
2015/06/16 职场文书
庆祝教师节新闻稿
2015/07/17 职场文书
原来闭幕词是这样写的呀!
2019/07/01 职场文书
Docker官方工具docker-registry案例演示
2022/04/13 Servers