有关js 的 defineProperty函数 getter setter

ECMAScript 中有两种属性:数据属性和访问器属性
1. 数据属性
数据属性包含一个数据值的位置。在这个位置可以读取和写入值。数据属性有4 个描述其行为的特性。
? [[Configurable]]:表示能否通过delete 删除属性从而重新定义属性,能否修改属性的特性,或者能否把属性修改为访问器属性。像前面例子中那样直接在对象上定义的属性,它们的这个特性默认值为true
? [[Enumerable]]:表示能否通过for-in 循环返回属性。像前面例子中那样直接在对象上定义的属性,它们的这个特性默认值为true
? [[Writable]]:表示能否修改属性的值。像前面例子中那样直接在对象上定义的属性,它们的这个特性默认值为true
? [[Value]]:包含这个属性的数据值。读取属性值的时候,从这个位置读;写入属性值的时候,
把新值保存在这个位置。这个特性的默认值为undefined。

可以多次调用Object.defineProperty()方法修改同一个属性,但在把configurable特性设置为false 之后就会有限制了。

在调用Object.defineProperty()方法时,如果不指定,configurable、enumerable 和writable 特性的默认值都是false。

2. 访问器属性
访问器属性不包含数据值;它们包含一对儿getter 和setter 函数(不过,这两个函数都不是必需的)。
在读取访问器属性时,会调用getter 函数,这个函数负责返回有效的值;在写入访问器属性时,会调用setter 函数并传入新值,这个函数负责决定如何处理数据。访问器属性有如下4 个特性。
? [[Configurable]]:表示能否通过delete 删除属性从而重新定义属性,能否修改属性的特性,或者能否把属性修改为数据属性。对于直接在对象上定义的属性,这个特性的默认值为true
? [[Enumerable]]:表示能否通过for-in 循环返回属性。对于直接在对象上定义的属性,这个特性的默认值为true
? [[Get]]:在读取属性时调用的函数。默认值为undefined
? [[Set]]:在写入属性时调用的函数。默认值为undefined

var book = {
    _year: 2004,
    edition: 1
};
Object.defineProperty(book, "year", {
    get: function() {
        return this._year;
    },
    set: function(newValue) {
        if (newValue > 2004) {
            this._year = newValue;
            this.edition += newValue - 2004;
        }
    }
});
book.year = 2005;
alert(book.edition); //2

  以上都是摘自js高级程序设计书上第六章的讲解,最开始看的时候觉得奇奇怪怪的,不太懂这些看起来很底层的方法有什么用。

  现在明白了,一个对象book,有个属性year,但是如果让用户随便一个book.year=-1;这样的话可不好啊,于是乎,book定义的year前面加了个_,表示是私有的,对于用户来说也不会知道有这么个变量,用户只会知道year,Object.defineProperty里面定义了“year”这个属性,也就是说,如果用户book.year,那么一般会返回对应的值,这里就会调用get函数,返回去的是_year值,用户来看就是book.year返回了2004,实际上内部用了get函数返回的是_year值;如果用户book.year=2017;那么实际上调用了set函数,将_year改成2017,这样用户再调用book.year就是2017了。

为什么非得加个get和set函数呢?

  因为,这样增加了判断,如果set值为-1这样不是正常年份的值,那么就可以报错或者其他的,不让用户设置成功。

同时也避免了用户不小心设置错了值的情况。。

时间: 2024-08-06 03:45:22

有关js 的 defineProperty函数 getter setter的相关文章

JS对象属性中get/set与getter/setter是什么

在js属性描述符这部分有几个较难理解的名词概念,本文旨在描述对它们的理解,主要包括:[[Get]]/[[Put]].get/set.getter/setter几个概念的阐述,数据属性和访问器属性. 属性 首先我们要搞清楚属性的概念,属性是存储在特定命名位置的值,是对象的内容,属性并不直接存储在对象容器内部.属性有两种类型:数据属性和访问器属性.属性具备了属性描述符,用来描述属性拥有的特性. 属性描述符 属性描述符用来描述属性特性的(只有在内部才能用的特性),配置属性是否可读,是否可写,是否可枚举

Java程序员的JavaScript学习笔记(4——闭包/getter/setter)

计划按如下顺序完成这篇笔记: 理念. 属性复制和继承. this/call/apply. 闭包/getter/setter. prototype. 面向对象模拟. jQuery基本机制. jQuery选择器. jQuery工具方法. jQuery-在"类"层面扩展. jQuery-在"对象"层面扩展. jQuery-扩展选择器. jQuery UI. 扩展jQuery UI. 这是笔记的第4篇,聊聊闭包/getter/setter,看看JavaScript中的变量作

Java程序猿JavaScript学习笔记(4——关闭/getter/setter)

计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript学习笔记(3--this/call/apply) Java程序猿的JavaScript学习笔记(4--this/闭包/getter/setter) Java程序猿的JavaScript学习笔记(5--prototype) Java程序猿的JavaScript学习笔记(6--面向对象模拟) Ja

es6 getter setter

https://stackoverflow.com/questions/34517538/setting-an-es6-class-getter-to-enumerable 1. 我要 getter 没有要暴露 class A { get age() { return 11; } } console.log(Object.keys(new A())); // [] 翻译 es5 var A = /** @class */ (function () { function A() { } Objec

Java/C# 中为何需要 Getter/Setter?

通过 Getter/Setter 来访问字段,有如下好处: Getter/Setter 是函数,允许你检查/处理输入输出,而 Public 的字段不行. 通过 Getter/Setter 来访问字段,可以使某字段只读或只写,而字段不行. 因此不论你当前需要不需要上述功能,Getter/Setter 都是(比直接使用字段)更好的选择. Getter/Setter 在 Java 中需要自己定义,因此会造成大量模板代码. 而在 C# 中有单独的 Property 类型,可以自动生成默认的 Getter

【前端小小白的学习之路】---->用JS编写一个函数,返回数组中重复出现过的元素

用JS编写一个函数,返回数组中重复出现过的元素,见下面的代码: var arr = [1, 2, 3, 1, 2, 3, 4, 5]; var getRepeat = function (arr) { var obj = {}; for (var i = 0, len = arr.length; i < len; i++) { if (obj[arr[i]] == undefined) { obj[arr[i]] = 1; } else { obj[arr[i]]++; } } for (var

js中一些函数(一)【丫头, 今天去哪儿了呢,好些没有】

Math.Rondom()   ==>  0 到 1 之间的小数 Math.floor(x)  ==>  小于或者等于 x 的整数(即转换成整数后是不能比 x 大的整数) setInterval(hanshu,1000)  ==>  意思为调用下面的 hanshu(), 间隔时间为 1000 ms(毫秒) js中一些函数(一)[丫头, 今天去哪儿了呢,好些没有],码迷,mamicode.com

10.getter &amp; setter

自定义 Person 类 class Person: NSObject { var name: String? var age: Int? } getter & setter var _name: String? var name: String? { get { return _name } set { _name = newValue } } 在 Swift 中以上形式的 getter & setter 很少用 didSet 在 OC 中,我们通常希望在给某一个变量赋值之后,去做一些额

让js中的函数只有一次有效调用的三种常用方法

如何让js中的函数只被有效执行一次,请看下面的三种常用方法. 1. <script> window.onload = function () { function once(fn) { var result; return function() { if(fn) { result = fn.apply(this, arguments); fn = null; } return result; }; } var callOnce = once(function() { console.log('