JavaScript学习——数据属性和访问器属性

最新推荐文章于 2024-07-12 14:10:05 发布

CodingBleeding

最新推荐文章于 2024-07-12 14:10:05 发布

阅读量431

点赞数

分类专栏： JavaScript 文章标签： javascript 数据属性

本文链接：https://blog.csdn.net/CodingBleeding/article/details/62426515

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

理解对象

ECMA-262把对象定义为“无序属性的集合，其属性可以包含基本值，对象或者函数。”而无序属性又分为数据属性和访问器属性

数据属性

数据属性有4个描述其行为的特性

[ [Configurable] ] 表示能否通过delete删除属性来重新定义属性

[ [Enumerable] ] 表示能否通过for-in循环返回属性

[ [Writable] ] 表示能否修改属性的值

[ [Value] ] 表示属性的值

举个例子：

    <script>
        var Ly = {
            name: "LY"
        };
        alert(Ly.name); 
    </script>

那么在这个例子中，Ly对象中的name属性的[ [Value] ]特性被设置为"LY"。其他三个特性被默认设置成true

运行结果为LY

再看下面的例子

    <script>
        var Ly = {
            name: "LY"
        };
        Ly.name = "LY2"
        alert(Ly.name); 
    </script>

运行结果为LY2

因为在name属性的 [ [Writable] ]特性为true

我们将它设置为false。

在JavaScript中，要修改属性默认的特性，要使用ECMAScript 5 的Object.defineProperty()方法

    <script>
        var Ly = {
            name: "LY"
        };
        Object.defineProperty(Ly, "name", {
            writable: false
        });
        Ly.name = "LY2"
        alert(Ly.name);
    </script>

运行结果为LY

访问器属性

访问器属性包含getter函数和setter函数，有4个特性

[ [Configurable] ] 表示能否通过delete删除属性来重新定义属性，默认为true

[ [Enumerable] ] 表示能否通过for-in循环返回属性，默认为true

[ [Get] ] 读取属性

[ [Set] ] 写入属性

访问器属性不能直接定义，必须通过Object.defineProperty()来定义

    <script>
        var Ly = {
            name: "LY",
            _age: 21
        };
        Object.defineProperty(Ly, "age", {
            get: function() {
                return this._age;
            },
            set: function(age2) {
                this._age = age2;
            }
        });
        alert(Ly.age);
        Ly.age = 23;
        alert(Ly._age);
    </script>

上面的代码定义了一个age属性及getter函数和setter函数

运行结果为先显示21，然后显示23

在访问器属性中，Ly.age就是调用get函数。而Ly.age=23就是调用set函数。

set函数会将赋给Ly.age的值赋给set函数的参数进行计算。如果set函数没有参数，则set函数的运行结果和赋给Ly.age的值无关。

   <script>
        var Ly = {
            name: "LY",
            _age: 21
        };
        Object.defineProperty(Ly, "age", {
            get: function() {
                return this._age;
            },
            set: function() {
                this._age = 22;
            }
        });
        Ly.age = 23;
        alert(Ly._age);
    </script>

上面的代码中，赋给Ly.age的值为23，运行结果为22
同时，属性中只有setter函数没有getter函数则该属性可写不可读，只有getter函数没有setter函数则该属性可读不可写

如果要同时对多个属性进行设置，可以使用Object.defineProperties()方法