关于Javascript中的对象理解

布满荆棘的人生 2022-11-09 14:14 262阅读 0赞

# 一、理解对象 #

Javascript中的对象是一组属性的无序集合。对象的每个属性和方法都由一个名称标识。可以把js中的对象想象成一张散列表，其中的内容就是一组名/值对，值可以是数据或者函数。

## 1、属性的类型 ##

js中使用一些内部特性来描述属性的特征，这些特性是由js实现引擎的规范定义的，开发者不能直接访问。规范会用两个中括号把特性的名称括起来。属性分两种：数据属性和访问器属性。

#### 数据属性 ####

数据属性包含4个描述它们的行为。

*  `[[Configurable]]`：表示属性是否可以通过delete删除并重新定义，是否可以修改它的特性以及是否可以把它改为访问属性。默认情况下，所有直接定义在对象上的属性的这个特性都是true。
 *  `[[Enumerable]]`：表示属性是否可以通过`for-in`循环返回。默认为true。
 *  `[[Writable]]`：表示属性是否可以被修改。默认为true。
 *  `[[Value]]`：包含属性实际的值。数据读取和写入的位置。  
    以下在创建对象并为对象添加一个属性后，`[[Configurable]]`，  
    `[[Enumerable]]`， `[[Writable]]`值都为true，`[[Value]]`为设定的值。

let person = { 
      name: 'Mike' // [[Value]]值为Mike
    }

要修改默认特性，必须使用`Object.defineProperty()`方法。该方法接收3个参数：要添加属性的对象、属性名和一个描述符对象。描述符对象上的属性可以是`configurable`，`enumerable`，`writable`，`value`。

let person = { }
    Object.defineProperty(person, 'name', { 
      writable: false,
      value: 'Mike'
    })
    console.log(person.name) // 'Mike'
    person.name = 'Lily'
    console.log(person.name) // Mike

创建不可配置项属性

let person = { }
    Object.defineProperty(person, 'name', { 
      configurable: false,
      value: 'Mike'
    })
    console.log(person.name) // 'Mike'
    delete person.name
    console.log(person.name) // 'Mike'

**一个属性被配置为不可配置项之后就不能再变回可配置的了。**  
在调用`Object.defineProperty()`时，`configurable`，`enumerable`，`writable`的值如果不指定，则默认为`false`。

#### 访问属性 ####

访问属性4个描述特性：

*  `[[Configurable]]`：表示属性是否可以通过delete删除并重新定义，是否可以修改它的特性以及是否可以把它改为数据属性。默认情况下，所有直接定义在对象上的属性的这个特性都是true。
 *  `[[Enumerable]]`：表示属性是否可以通过`for-in`循环返回。默认为true。
 *  `[[Get]]`：获取函数，在读取属性时调用，默认值为`undefined`。
 *  `[Set]]`：设置函数，在写入属性时调用，默认值为`undefined`。  
    访问属性不能直接定义，必须使用`Object.defineProperty()`。

// 给对象设置私有属性age_
    let person = { 
      age_: 30
    }
    Object.defineProperty(person, 'age', { 
      get () { 
      	return this.age_
      },
      set (newAge) { 
      	this.age_ = newAge
      }
    })

`Object.defineProperties()`可以在一个对象上同时定义多个属性。

let person = { }
    Object.defineProperties(person, { 
      age_: { 
        value: 30
      },
      gender: { 
    	value: 'female'
      },
      age: { 
    	get () { 
    	  return this.age_
    	},
    	set (newAge) { 
    	  this.age_ = newAge
    	}
      }
    })

`Object.getOwnPropertyDescriptor()`可以获取指定属性的属性描述符。传入两个参数：属性所在对象和要取得的描述符属性。返回一个对象，数据属性包含`configurable`，`enumerable`，`writable`和`value`，访问属性包含`configurable`，`enumerable`，`get`和`set`。

let person = { }
    Object.defineProperties(person, { 
      age_: { 
        value: 30
      },
      gender: { 
    	  value: 'female'
      },
      age: { 
    	  get () { 
    	   return this.age_
    	  },
    	  set (newAge) { 
    	    this.age_ = newAge
    	  }
      }
    }) 
    let descriptor = Object.getOwnPropertyDescriptor(person, 'gender')
    console.log(descriptor)
    // { 
    // value: 'female',
    // writable: false,
    // enumerable: false,
    // configurable: false
    // }

## 2、合并对象 ##

`Object.assign()`方法接收一个目标对象和一个或多个源对象作为参数，将源对象中可枚举（`Object.propertyIsEnumerable()`返回`true`）和自有（`Object.hasOwnProperty()` 返回`true`）属性复制到目标对象。这个方法会使用源对象上的`[[Get]]`取得属性的值，使用目标对象上的`[[Set]]`设置属性的值。如果多个源对象有相同的属性，使用最后一个复制的值。

let dest = {  id: 'dest' }
    let result = Object.assign(dest, {  id: 'src', a: 'foo' }, {  id: 'src2', b: 'bar'})
    console.log(result) // { id: 'src2', a: 'foo', b: 'bar' }