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

neu 发布于2019-08-21 17:19 / 3167人阅读

摘要：对象的属性是由名字值和一组特性可写可枚举可配置等构成的。在中，属性值可以用一个或两个方法代替，这两个方法就是和。上面的代码中，属性称为数据属性，它只有一个简单的值像属性这种用和方法定义的属性称为存取器属性。

最近在重新看vue2.x的文档，注意到computed中的setter和getter,以前就知道他俩是干嘛的，但是不知道原理，然后决定查看一些资料，搞明白setter和getter具体是什么实现原理。
JavaScript对象的属性是由名字、值和一组特性（可写、可枚举、可配置等）构成的。在ECMAScript 5中，属性值可以用一个或两个方法代替，这两个方法就是getter和setter。

var obj = {
    a: 1,
    get b(){
        return 2;
    }   
};

console.log(obj.a);//1
console.log(obj.b);//2

上面的代码中，属性a称为“数据属性”，它只有一个简单的值；像属性b这种用getter和setter方法定义的属性称为“存取器属性”。

存取器属性定义为一个或两个与属性同名的函数，这个函数定义没有使用function关键字，而是使用get或set，也没有使用冒号将属性名和函数体分开，但函数体的结束和下一个方法之间有逗号隔开。

当程序查询存取器的属性值时，JavaScript代用getter方法（无参数），这个方法的返回值就是该属性存取表达式的值。当程序设置一个存取器属性值时，JavaScript调用setter方法，将赋值表达式右侧的值当作参数传入setter。从某种意义上来说，这个方法负责设置属性值，可以忽略该方法的返回值。

当一个属性被定义为存取器属性时，JavaScript会忽略它的value和writable特性，取而代之的是set和get（还有configurable和enumerable）特性。

var obj = {
    get a(){
        return 1;
    }   
};

obj.a = 2;

console.log(obj.a);//1

如上面代码所示，由于我们只定义了属性a的getter，所以对a进行设置（即赋值）时set会忽略赋值操作，不会抛出错误。

var obj = {
    get a(){
        return this._a_;
    },
    set a(val){
        this._a_ = val;
    }   
};

obj.a = 1;

console.log(obj.a);//1

正确的写法如上所示。getter和setter方法中的this都指向myObj对象。这里我们把赋值操作中的3存储到另一个中间变量 a 中。名称 a 只是一种惯例，并没有其它任何特殊行为，它只是一个普通的属性。把它换成其它任意合法名称如 b 都行，甚至可以在外面将它打印出来。

var obj = {
    get a(){
        return this._b_;
    },
    set a(val){
        this._b_ = val;
    }   
};

obj.a = 1;

console.log(obj.a);//1
console.log(obj._b_);//1

另外，存取器属性也是可以继承的：

var obj = {
    get a(){
        return this._b_;
    },
    set a(val){
        this._b_ = val;
    }   
};

obj.a = 1;

var _obj = Object.create(obj);
console.log(_obj.a);//1

云服务器专线服务 getter和setter方法 js包装对象中的属性匹配对象的属性和函数 js，对象中增加数据的方法

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

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

JavaScript对象的属性getter和setter

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

Olivia 2019-08-21 17:12 评论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