有关getter 和 setter的使用

SunZhaopeng 发布于2019-08-23 10:23 / 3399人阅读

摘要：有以下中方式可以使用和对象初始化器关键字使用关键字为属性添加一个函数，函数名即为属性名，函数不传参，函数传入的参数为设置对象的新值。需被定义或修改的属性名。目前流行的框架的响应式系统就是利用设置来追踪数据变化，从而导致视图更新。

什么是getter 和 setter ？

getter: 读取对象属性时将被调用的函数。
setter：设置对象属性时被调用的函数。

有以下4中方式可以使用 setter 和 getter：

1. 对象初始化器set/get 关键字

使用get/set关键字为属性添加一个函数，函数名即为属性名，get函数不传参，set函数传入的参数为设置对象的新值。

例如：

var person = {
    _name: "",
    get name() { return this._name },
    set name(newName) { this._name = newName }
}
 
// 测试
person.name // ""
person.name = "john" // "john", 此时 person._name 也变成了 "john"

2. Object.defineProperty()

Object.defineProperty() 方法直接在一个对象上定义一个新属性，或者修改一个已经存在的属性，并返回这个对象。

语法:
Object.defineProperty(obj, prop, descriptor)

参数:
obj:

需要定义属性的对象。

prop:

需被定义或修改的属性名。

descriptor:

需被定义或修改的属性的描述符。

var person = {}
var name = ""
Object.defineProperty(person, "name", {
    configurable: true,
    enumerable: true,
    get: function() {
        return name
    },
    set: function(newName) {
        name = newName
    }
})
 
// 测试
person.name // undefind
person.name = "john" // "john"，此时全局的 name 也变成了 "john"

3. Object.defineProperties()

在一个对象上添加或修改一个或多个自由属性。
用法类似Object.defineProperty()

语法

Object.defineProperties(obj, props)

参数

obj:
将要被添加属性或修改属性的对象      
props:     该对象的一个或多个键值对定义了将要为对象添加或修改的属性的具体配置

var obj = {a:1,b:"string"};
    Object.defineProperties(obj,{
        "A":{
            get:function(){return this.a+1;},
            set:function(val){this.a = val;}
        },
        "B":{
            get:function(){return this.b+2;},
            set:function(val){this.b = val}
        }
    });
    
//测试
    obj.A; //2
    obj.B; // "string2"
    obj.A = 3;
    obj.B = "hello";
    obj.A; // 4
    obj.B; // "hello2"

4. Object.create()

Object.create() 方法创建一个拥有指定原型和若干个指定属性的对象。即提供新创建的对象的__proto__。

语法
Object.create(proto, [ propertiesObject ])

参数
proto:新创建对象的原型对象
propertiesObject：可选。新创建对象的可枚举属性对象的属性描述符以及相应的属性名称，这些属性对应Object.defineProperties()的第二个参数。

var o = null;
    o = Object.create(Object.prototype,//指定原型为 Object.prototype
            {
                bar:{
                    get :function(){
                        return 10;
                    },
                    set : function (val) {
                        console.log("Setting `o.bar` to ",val);
                    }
                }
            }//第二个参数
        );

//测试
    o.bar; //10
    o.bar = 12; // 控制台打印出："Setting `o.bar` to  12"

如果你希望对象属性值只能读取不能被修改，那么可以不设置set函数。

目前流行的框架Vue的响应式系统就是利用Object.defineProperty() 设置getter/setter来追踪数据变化，从而导致视图更新。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96291.html

根据调试工具看Vue源码之computed（二）

摘要：回顾上回提到，计算属性的缓存与这个类的属性有关，那么这次我们接着来看下，属性到底取决于什么情况来变化，从而对进行缓存。回顾上回提到，computed————计算属性的缓存与Watcher这个类的dirty属性有关，那么这次我们接着来看下，dirty属性到底取决于什么情况来变化，从而对computed进行缓存。依赖收集切入正题之前，我们先来看一个问题：如果一个computed的结...

U2FsdGVkX1x 2019-08-23 15:58 评论0 收藏0
Java HotSpot VM中的JIT编译

摘要：如同其它虚拟机，虚拟机为字节码提供了一个运行时环境。编译是一个混合模式的虚拟机，也就是说它既可以解释字节码，又可以将代码编译为本地机器码以更快的执行。解决此问题一般是在进程启动后，对代码进行预热以使它们被强制编译。 Java HotSpot虚拟机是Oracle收购Sun时获得的，JVM和开源的OpenJDK都是以此虚拟机为基础发展的。如同其它虚拟机，HotSpot虚拟机为字节码提供了一...

caozhijian 2019-08-14 11:42 评论0 收藏0
Lombok使用

摘要：为方法或构造函数的参数生成检查语句，相当于生成的检查语句会插入到方法的最前端，如果是构造函数，则在或调用之后插入检查。 Lombok简介 Lombok是一个可以通过简单的注解形式来帮助我们简化消除一些必须有但显得很臃肿的Java代码的工具，通过使用对应的注解，可以在编译源码的时候生成对应的方法。 ...

张金宝 2019-08-16 10:58 评论0 收藏0