JavaScript【面向对象的程序设计】理解对象

以下为学习《JavaScript 高级程序设计》(第 3 版) 所做笔记。

 

对象为无序属性的集合，其属性可以包含基本值、对象或函数。对象是一组没有特定顺序的值，对象的每个属性或方法都有一个名字，每个名字都映射到一个值，值可以是数据或函数。

目录：

　　1、属性类型

　　　　① 数据属性

　　　　② 访问器属性

　　2、定义多个属性

　　3、读取属性的特性

思维导图笔记：

属性类型

ECMAScript 中有2种属性：数据属性和访问器属性

数据属性

 数据属性包含1个数据值的位置，在这个位置可以读取和写入值，数据属性有4个描述其行为的特性：[[Configurable]]、[[Enumerable]]、[[Writable]]、[[Value]]

 要修改属性默认的特性，必须使用 Object.defineProperty() 方法。

<script>
    //修改属性默认的特性
    var person = {};
    //Object.defineProperty（）
    //接收 3 个参数
    //第一个参数：属性所在的对象
    //第二个参数：属性的名字
    //第三个参数：一个描述符对象
    Object.defineProperty(person, 'name', {
        //configurable
        //设置为不可设置后就不能变回去了
        //可以多次调用Object.defineProperty()修改同一个属性，但是把configurable设置为false之后就有限制了
        configurable : false,   
        value : 'xiaoxu'
    });
    console.log( person.name ); //输出：xiaoxu
    //configurable 设置为了 false, 所以属性是可读的但是是不可修改的，也不能够通过 delete 删除属性重新定义属性
    person.name = "Adrian";
    console.log( person.name ); //输出：xiaoxu
    delete person.name;
    console.log( person.name ); //输出：xiaoxu

    //configurable设置为不可设置后就不能变回去了
    Object.defineProperty(person, 'name', {
        configurable : true,   
        value : 'xiaoxu'
    });
    /*  报错：
        Uncaught TypeError: Cannot redefine property: name
        at Function.defineProperty (<anonymous>)
        at test2.html:24
    */
</script>

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

访问器属性

<script>
    var book = {
        //访问器属性 year 前的下划线是用来表示属性只能通过对象方法访问的记号
        //访问器属性不包含数据值，包含一对 getter 和 setter 属性。
        _year : 2019,
        edition : 1
    }
    //访问器属性不能直接定义，必须使用 Object.defineProperty()来定义
    Object.defineProperty(book, "year", {
        //访问器属性 get 在读取属性时调入函数 getter，函数 getter 负责返回有效的值
        //如果只指定 getter 意味着属性不能写
        get : function(){
            return this._year;
        },
        //访问器属性 set 在写入属性是调入函数 setter，函数 setter 负责传入新值并决定如何处理数据
        //如果只指定 setter 意味着属性不能读
        set : function( newValue ){
            if( newValue > 2019 ){
                this._year = newValue;
                this.edition += newValue - 2019;
            }
        }
    });
    book.year = 2020;
    console.log( book.year );       //输出：2020
    console.log( book.edition );    //输出：2
</script>

ES6 写法（参考资料：https://blog.csdn.net/zhang1339435196/article/details/101472510）：

const book = {
    _year: 2019,
    edition: 1,
    get year(){
        return this._year;
    },
    set year(newValue){
        if(newValue>2019){
            this._year = newValue;
            this.edition += newValue - 2019;
        }
    }
}
book.year = 2020;
console.log(book.year);        //输出:2020
console.log(book.edition);    //输出:2

 

 

定义多个属性

利用 Object.defineProperties() 通过描述符一次定义多个属性。

<script>
    var book = {};
    //Object.defineProperties()
    //接收2个对象参数
    //第一个对象参数：要添加和修改其属性的对象
    //第二个对象参数：第二个对象的属性与第一个对象种要添加或修改的属性一一对应
    Object.defineProperties(book, {
        //定义2个数据属性(_year和edition)，定义1个访问器属性(year)
        _year : {
            value : 2019
        },
        edition : {
            value : 1
        },
        year : {
            get : function(){
                return this._year;
            },
            set : function(newValue){
                if( newValue>2019 ){
                    this._year = newValue;
                    this.edition += newValue - 2019;
                }
            }
        }
    });
</script>

 

读取属性的特性

<script>
    var book = {};
    Object.defineProperties(book, {
        //定义2个数据属性(_year和edition)，定义1个访问器属性(year)
        _year : {
            value : 2019
        },
        edition : {
            value :1
        },
        year : {
            get : function(){
                return this._year;
            },
            set : function( newValue ){
                if( newValue>2019 ){
                    this._year = newValue;
                    this.edition += newValue - 2019;
                }
            }
        }
    });
    //Object.getOwnPropertyDescriptor()
    //接收2个参数
    //第一个参数：属性所在的对象
    //第二个参数：要读取其描述符的属性名称
    var descriptor = Object.getOwnPropertyDescriptor( book, "_year" );
    console.log( descriptor.value );        //输出：2019
    console.log( descriptor.configurable ); //输出：false
    console.log( typeof descriptor.get );   //输出：undefined
    var descriptor = Object.getOwnPropertyDescriptor( book, "year" );
    console.log( descriptor.value );        //输出：undefined
    console.log( descriptor.enumerable );   //输出：false
    //get是一个指向getter函数的指针
    console.log( typeof descriptor.get );   //输出：function
</script>