JavaScript对象的属性getter和setter

Olivia 发布于2019-08-21 17:12 / 395人阅读

摘要：存取器属性的介绍对象的属性是由名字值和一组特性组成。在中，属性值可以用一个或两个方法代替，这两个方法就是和。例如，下面这个表示笛卡尔点坐标的对象，它还有两个等价的存取器属性用来表示点的极坐标在这段代码中，在函数体内的指向表示这个点的对象。

存取器属性的介绍

JavaScript对象的属性是由名字、值和一组特性组成。在ECMAScript中，属性值可以用一个或两个方法代替，这两个方法就是getter和setter。有getter和setter定义的属性称做“存取器属性（accessor property）”。普通的属性称做“数据属性（data proper同样）”，数据属性只有一个简单的值。
当程序查询存取器属性的值时，JavaScript调用getter方法（无参数）。这个方法的返回值就是属性存取表达式的值。当程序设置一个存取器属性的值是，JavaScript调用setter方法，讲赋值表达式右侧的值当做参数传入setter。从某种意义上讲，这个方法负责“设置”属性值。可以忽略setter方法的返回值。
和数据属性不同，存取器属性不具有可写性（writable attribute）。如果属性同时具有getter和setter方法，那么它是一个读/写属性。如果它只有getter方法，那么它是一个只读属性。如果它只有setter方法，那么它是一个只写属性。读取只写属性总是返回undefined。
存取器属性定义为一个或两个和属性同名的函数，这个函数定义没有使用function关键字，而是使用get和（或）set。注意这里没有使用冒号将属性名和函数体分隔开，但在函数体的结束和下一个方法或数据属性之间有逗号分隔。例如，下面这个表示笛卡尔点坐标的对象，它还有两个等价的存取器属性用来表示点的极坐标：

var p = {
    x: 1.0,
    y: 1.0,
    get r() { return Math.sqrt(this.x*this.x + this.y*this.y)},
    set r(newvalue) {
        var oldvalue = Math.sqrt(this.x*this.x + this.y*this.y);
        var radio = newvalue/oldvalue;
        this.x *= radio;
        this.y *= radio;
    },
    get theta() { return Math.atan2(this.y, this.x); }
}

在这段代码中，在函数体内的this指向表示这个点的对象。和数据属性一样，存取器属性是可以继承的。

存取器属性可以做什么

在segmentfault一个问答看到的两个例子：

在某个属性被设置时打印日志

set: function(pw) {
    this.pw = pw;
    console. log("密码被修改了");
}

在某个属性被设置时更新其他属性

set: function(a) {
    this.a = a;
    this.b = a * 100;
}

Vue的响应式原理也是通过setter，getter实现的：Vue官网-响应式原理

我的理解就是：当某个属性被更新，即当Vue实例中的data对象的某个属性被设置，通过setter更新其他属性，从而实现双向数据绑定。

私有云云服务器 getter和setter方法匹配对象的属性和函数对象的属性 javascript类和对象

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

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

JavaScript对象中属性的getter和setter方法

摘要：对象的属性是由名字值和一组特性可写可枚举可配置等构成的。在中，属性值可以用一个或两个方法代替，这两个方法就是和。上面的代码中，属性称为数据属性，它只有一个简单的值像属性这种用和方法定义的属性称为存取器属性。最近在重新看vue2.x的文档，注意到computed中的setter和getter,以前就知道他俩是干嘛的，但是不知道原理，然后决定查看一些资料，搞明白setter和getter...

neu 2019-08-21 17:19 评论0 收藏0
javascript基础-Vue数据绑定前奏对象属性

摘要：关于有人说我用删除这个属性不就好了之后打印发现它还是一只哈士奇。如下的解释如下操作符会从某个对象上移除指定属性。 javascript-Object-Property ? javascript-对象的属性的延伸学习 showImg(https://segmentfault.com/img/bVNH2S?w=640&h=640); 前言在学习vue数据绑定的较底层原理时，被setter...

zebrayoung 2019-08-20 16:33 评论0 收藏0
JavaScript || 对象

摘要：通过对返回字符串切片第位到倒数第位即可获得对象的类型。测试对象是的深拷贝是的子集，不能表示中所有值。序列化结果是，对象序列化结果是日期字符串不能表示函数对象和只能序列化对象自有的可枚举属性。对象对象是JavaScript的基本数据类型：属性的无序集合。每个属性key: value和属性描述符descripter组成。属性名key：字符串或合法的变量标识符；属性值value：...

lavor 2019-08-20 14:39 评论0 收藏0
《JS高程》—— 数据属性与访问器属性

摘要：中有两种属性数据属性和访问器属性数据属性数据属性包含一个数据值的位置。表示能否通过删除属性从而重新定义属性可配置的能否修改属性的特性能否把属性修改为访问器属性。以上代码在对外上定义了两个数据属性和和一个访问器属性。属性类型： ECMA-262第5版在定义只有内部才用的特性（attribute）时，描述了属性（property）的各种特征。ECMA-262定义这些特性是为了实现Java...

yearsj 2019-08-20 17:14 评论0 收藏0
【js细节剖析】通过"="操作符为对象添加新属性时，结果会受到原型链上的同名属性

摘要：在使用的过程中，通过操作符为对象添加新属性是很常见的操作。但是，这个操作的结果实际上会受到原型链上的同名属性影响。通过它，可以做到操作符做不到的事情，比如为对象设置一个新属性，即使它的原型链上已经有一个的同名属性。在使用JavaScript的过程中，通过=操作符为对象添加新属性是很常见的操作：obj.newProp = value;。但是，这个操作的结果实际上会受到原型链上的同名属性...

wemallshop 2019-08-23 12:38 评论0 收藏0