JS——理解对象属性

理解对象

——对象的理解：
对象是一组没有特定顺序的值，对象的每一个属性或方法都有一个名字，而每个名字都映射到一个值。可以把其想象成散列表，就是一组名值对，其中值可以是数据或者函数。

——创建自定义对象：
就是创建一个Object实例（通过new一下），然后再为它添加属性和方法。
例如：

 var person = new Object();
    person.name = "huang";
    person.age = 21;
    person.job = "student";
    person.hobby = "dance";
    person.sayHobby = function() {
        console.log(this.hobby);
    };

上面代码创建了一个名为person的对象，并未它添加了name,age,job,hobby三个属性和一个sayHobby()方法。与下面的一段代码一样，具有相同的属性何方法。

var person = {
        name:"huang",
        age:21,
        job:"student",
        hobby:"dance",
        sayHobby:function() {
            console.log(this.hobby)
        }
    };

——属性类型：
@ 数据属性：包含一个数据值的位置，在这个位置可以读取和写入值。

描述数据属性行为的四个特性（为了表示特性是内部值，规范将它们放在两对方括号中例如[[Enumerable]]）：

[[Configurable]]:表示能否通过delete**删除属性来重新定义属性，能否修改属性的特性，或者能否将属性修改为**访问器属性。默认值为true。
[[Enumerable]]:表示能否通过for-in循环返回属性。默认值为true。
[[Writable]]:表示能否修改属性的值。默认值为true。
[[Value]]:包含这个属性的默认值。默认值为undefined.

Object.defineProperty()方法：
用于修改属性默认的特性。这个方法接收三个参数：属性所在的对象，属性的名字和一个描述符对象。其中描述符对象的属性必须是configurable,enumerable,writable,value.设置其中一个或多个值可以修改对应的特性值。例如：

 var person = {};
    Object.defineProperty(person,"name",{
        value:"huang",
        writable:false//
    });
    console.log(person.name);//"huang"
    person.name = "li";
    console.log(person.name);//"huang"

@ 访问器属性：不包含数据值，而是包含一对儿getter和setter函数。有如下四个特性：

[[Configurable]]:表示能否通过delete删除属性来重新定义属性，能否修改属性的特性，或者能否将属性修改为访问器属性。默认值为true。
[[Enumerable]]:表示能否通过for-in循环返回属性。默认值为true。
[[Get]]:在读取属性时调用的函数。默认值为undefined。
[[Set]]:在写入属性时调用的函数。默认值为undefined。

访问器属性不能直接定义，必须通过object.dedfineproperty()方法来定义。如下：

 var book = {
        _year:2016,
        edition:2
    };
    Object.defineProperty(book,"read",{
        get:function() {
            return this._year;
        },
        set:function(newValue) {
            if(newValue > 2016) {
                this._year = newValue;
                this.edition += newValue - 2016;
            }
        }
    });
  book.read = 2017;
    console.log(book._year);//2017
    console.log(book.edition);//3
    console.log(book.read);//2017

上面代码中创建了一个book对象，并给它定义了两个默认的属性：_year和edition。
上面代码是创建访问器属性的常见方式，即设置一个属性的值会导致其它属性发生变化。

Object.defineproperties()方法：
用于同时定义多个属性。该方法接收两个对象参数：第一个对象参数是要添加和修改其属性的对象参数。第二个对象的属性与第一个对象中要添加或修改的属性一一对应(一个描述符{})。如下：

 var book = {};
    Object.defineProperties(book,{
        _year:{
            writable:true,
            value:2016
        },
        edition:{
            writable:true,
            value:1
        },
        year:{
            get:function() {
                return this._year;
            },
            set:function(newValue) {
                if(newValue > 2016) {
                    this._year = newValue;
                    this.edition +=newValue - 2015;
                }
            }
        }
    });
    book.year = 2017;
    console.log(book._year);//1
    console.log(book.edition);//3

——读取属性的特性：Object.getOwnPropertyDescriptor()方法：
该方法可以获取给定属性的描述符。接收两个参数：属性所在的对象和要读取其描述符的属性名称。返回值是一个对象。

 var book = {};
    Object.defineProperties(book,{
        _year:{
            writable:true,
            value:2016
        },
        edition:{
            writable:true,
            value:1
        },
        year:{
            get:function() {
                return this._year;
            },
            set:function(newValue) {
                if(newValue > 2016) {
                    this._year = newValue;
                    this.edition +=newValue - 2015;
                }
            }
        }
    });
   var descriptor = Object.getOwnPropertyDescriptor(book,"_year");
    console.log(descriptor);//结果如下图，返回的是一个对象
    console.log(descriptor.value);//2016
    console.log(descriptor.configurable);//false
    console.log(typeof descriptor.get);//undefined
  var descriptor_2 = Object.getOwnPropertyDescriptor(book,"read");
    console.log(descriptor_2.value);//undefined
    console.log(descriptor_2.enumerable);//false
    console.log(typeof descriptor_2.get);//function

这里写图片描述

JS——理解对象属性

理解对象

猜你喜欢