前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >getter与setter

getter与setter

作者头像
WindrunnerMax
发布2020-08-27 10:39:43
7170
发布2020-08-27 10:39:43
举报
文章被收录于专栏:Czy‘s BlogCzy‘s Blog

getter与setter

getter是一个获取某个属性的值的方法,setter是一个设定某个属性的值的方法。

描述

  • 通过gettersetter可以实现数据取值与赋值的拦截操作,当想监控某个值的变化的时候,通过gettersetter即可实现监听,而不需要找到并修改每一个操作这个值的代码。
  • 有时需要允许访问返回动态计算值的属性,或者需要反映内部变量的状态,而不需要使用显式方法调用,可以使用gettersetter来实现。
  • 尽管可以结合使用gettersetter来创建一个伪属性,但是不能将gettersetter绑定到一个属性并且该属性实际上具有一个值。

字面量声明

可以直接通过字面值创建对象时声明getset方法。

代码语言:javascript
复制
var obj  = {
    __x:1,
    get x(){
        console.log("取值操作");
        return this.__x;
    },
    set x(v){
        console.log("赋值操作,例如更新视图");
        this.__x=v;
    }
}
console.log(obj.x); // 1
obj.x = 11;
console.log(obj.x); // 11
/*
  定义__x是以双下划线开头的,是不希望直接访问的属性
  当然可以直接使用obj.__x对属性进行赋值与取值操作,但这样就失去了get与set的意义
 */
/*
  另外关于描述中的第三点,不能将getter与setter绑定到一个属性并且该属性实际上具有一个值,否则会无限递归堆栈溢出产生异常
  var obj  = {
      x:1,
      get x(){
          return this.x;
      },
      set x(v){
          this.x=v;
      }
  }
  console.log(obj.x); // Uncaught RangeError: Maximum call stack size exceeded
/*

Object.defineProperty

使用Object.defineProperty()精确地添加或修改对象的属性。

代码语言:javascript
复制
var obj  = {
    __x:1
}
Object.defineProperty(obj, "x", {
    get: function(){
        console.log("取值操作");
        return this.__x;
    },
    set: function(v){
        console.log("赋值操作,例如更新视图");
        this.__x=v;
    }
});
console.log(obj.x); // 1
obj.x = 11;
console.log(obj.x); // 11

每日一题

代码语言:javascript
复制
https://github.com/WindrunnerMax/EveryDay
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-05-14 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • getter与setter
    • 描述
      • 字面量声明
        • Object.defineProperty
          • 每日一题
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档