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>

参考

Object.defineProperty() - JavaScript | MDN

深入响应式原理 — Vue.js

总结

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

赞 (0)

相关推荐

  • 谈谈因Vue.js引发关于getter和setter的思考

    谈谈因Vue.js引发关于getter和setter的思考

    起因 当我打印出Vue实例下的data对象里的属性时,发现了一个有趣的事情: 它的每个属性都有两个相对应的get和set方法,我觉的这是多此一举的,于是去网上查了查Vue双向绑定的实现原理,才发现它和Angular.js双向绑定的实现原理完全不同,Angular是用的数据脏检测,当Model发生变化,会检测所有视图是否绑定了相关数据,再更改视图.而Vue使用的发布订阅模式,是点对点的绑定数据. Vue的数据绑定只有两个步骤,compile=>link. 我一直在想,vue是通过什么去监听用户对M

  • JavaScript之Getters和Setters 平台支持等详细介绍

    来自John Resig早年的文章,大致翻译了一下,以作备忘. 令人高兴的是,我想我终于可以说,"现在,JavaScript的Getters和Setters使用非常广泛,它和每个JavaScript开发者的切身利益息息相关".靠,我为了说这句话已经等了很久了. 首先,我们先来快速了解什么是Getters和Setters,以及它们为什么很有用.然后,我们来看看现在都有哪些平台支持Gettets和Setters. Getters和Setters Getters和Setters使你可以快速获

  • JavaScript中setter和getter方法介绍

    javascript中的setter.getter是平时接触比较少的方法,其本身也并不是标准方法,只在非ie浏览器里支持(ie内核也许有其他方法可以做到呢?暂时不知其解),但是加以利用可以做许多事情,比如: 1.对数据的访问限制: a.value是对value变量的getter方法调用,如果在getter方法实现中抛出异常,可以阻止对value变量的访问 2.对dom变量进行监听: window.name是一个跨域非常好用的dom属性(大名鼎鼎,详见百度),如果覆盖window.name的set

  • Javascript中的getter和setter初识

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

  • python中的getter与setter你了解吗

    目录 前言 复制型编写 使用python的装饰器 总结 前言 因为java开发的习惯,想要在python开发中使用类似JavaBean的结构. 复制型编写 在python可以直接结合java中的编写习惯编写getter和setter方法.下方是一个示例: class DataBean: """bean类""" def __init__(self): """构造方法""" self.use

  • Python中的getter和setter的方法使用详解

    本文主要内容: 解释setter和getter的使用方法解释@property装饰器的妙用 在python中,setter和getter方法并不像其它编程语言中的那样.基本上,在面向对象编程语言中,使用setter和getter方法的主要目的是为了确保数据的封装.不像其它面向对象编程语言,python中的私有变量并不是真正的隐藏字段.在python中,通常在以下情况会用到setter和getter方法: 在获取或者设置属性值的时候使用setter和getter方法为其添加验证逻辑避免对类的某些字

  • js中getter和setter用法实例分析

    js中getter和setter用法实例分析

    本文实例讲述了js中getter和setter用法.分享给大家供大家参考,具体如下: 在学习Vue计算属性时,有一句"计算属性默认只有 getter ,不过在需要时你也可以提供一个 setter". getter和setter到底是什么?于是我查找了资料: 在Es5中可以使用getter和setter部分改写默认操作,但是只能应用在单个属性上,无法应用在整个对象上.getter是一个隐藏函数,会在获取属性值时调用.setter也是一个隐藏属性,会在设置属性值时调用. 例子: var m

  • Yii框架getter与setter方法功能与用法分析

    本文实例讲述了Yii框架getter与setter方法功能与用法.分享给大家供大家参考,具体如下: 1.属性 在 PHP 中,类的成员变量也被称为属性.它们是类定义的一部分, 用来表现一个实例的状态(也就是区分类的不同实例). 在具体实践中,常常会想用一个稍微特殊些的方法实现属性的读写. 例如,如果有需求每次都要对 label 属性执行 trim 操作, 就可以用以下代码实现: $object->label = trim($label); 上述代码的缺点是只要修改 label 属性就必须再次调用

  • IntelliJ IDEA快速创建getter和setter方法

    IDEA快速创建getter和setter方法 找到generate 我的是Mac,右击鼠标就可以打开,相信windows也不难. 选择getter和setter 选择成员变量 测试 开发的时候记得使用哟,我就是想变成习惯,慢慢学习! ps:IDEA自动生成属性getter setter方法 右击代码编辑框空白区 点击生成 选中属性 生成getter setter 方法 IntelliJ IDEA中简化getter和setter写法 1.简化getter和setter方法插件 步骤1:pom.x

  • ECMAScript5中的对象存取器属性：getter和setter介绍

    显然这是一个无关IE(高级IE除外)的话题,尽管如此,有兴趣的同学还是一起来认识一下ECMAScript5标准中getter和setter的实现.在一个对象中,操作其中的属性或方法,通常运用最多的就是读(引用)和写了,譬如说o.get,这就是一个读的操作,而o.set = 1则是一个写的操作.事实上在除ie外最新主流浏览器的实现中,任何一个对象的键值都可以被getter和setter方法所取代,这被称之为"存取器属性". 毫无疑问,getter负责查询值,它不带任何参数,setter则

  • kotlin中数据类重写setter getter的正确方法

    概述 在开发过程中,经常会创建一些数据里,其没有任何逻辑功能,仅仅来用来保存数据.在Kolin中,将这些类统一称为数据类,用关键字data标记. data class User(val name: String, val age: Int) 编译器会根据主构造器中声明的全部属性, 自动推断产生以下成员函数: equals()/hashCode()函数对, toString() 函数, 输出格式为 "User(name=John, age=42)" , componentN() 函数群,

  • IDEA中 Getter、Setter 注解不起作用的问题如何解决

    没有安装LOMBOK插件 解决:下载安装LOMBOK插件 依次点击File--->Settings....---->Plugins,进入界面,在搜索框中输入LOMBOK  此时将会看到下方提示,点击红色框内的字找到 LOMBOK, 下载安装 ,安装完重启IDEA即可. PS:idea中lombok注解GetterSetter等不生效的解决办法 原因:lombok版本问题 解决办法:Settings->Plugins 重新安装lombok,安装完重启IDEA 总结 到此这篇关于IDEA中

随机推荐