Object.defineProperty的基本使用

Object.defineProperty定义：它是一个方法，用来定义对象的属性。第一个参数是对象，第一个参数是一个属性名，第三个是一个对象，对该属性的描述。

const obj = {}
Object.defineProperty(obj, 'name', {
	value: 'wjg'
})
console.log(obj.name) // wjg

上面的操作跟一下的操作结果一样：

const obj = {}
obj.name = 'wjg'
console.log(obj.name) // wjg

但是也有不同之处：
不配置writable: true,那么就不可以修改obj.name的值
不配置configurable: true, 那么就不可以delete掉obj.name
不配置enumerable: true,那么就不可以枚举(遍历)obj.name

const obj = {}
Object.defineProperty(obj, 'name', {
	value: 'wjg'
})

obj.name = 'new-wjg'
console.log(obj.name) // 输出：wjg，修改失败

delete obj.name
console.log(obj.name) // 输出：wjg，删除失败

for(let key in obj) {
	console.log(obj[key]) // 遍历不了，不打印
}

console.log(obj.name) // wjg

我们不配置，它默认writable、configurable、enumerable都是false。
如果我们想要进行修改、删除、枚举(遍历)，就得配置这三个为true

const obj = {}
Object.defineProperty(obj, 'name', {
	value: 'wjg',
	writable: true, // 可修改
	configurable: true, // 可删除
	enumerable: true // 可枚举(遍历)
})

我们还可以再属性的描述上添加get方法和set方法，但是注意添加get和set方法就不能添加value和writable这两个属性，他们是互斥的，不然会报错：

const obj = {}
let name = 'wjg'
Object.defineProperty(obj, 'name', {
	get() {
		return name
	},
	set(newVal) {
		name = newVal
	}
	configurable: true, // 可删除
	enumerable: true // 可枚举(遍历)
})

数据劫持：在访问或者修改对象的某个属性的时候，进行一些额外操作或者修改返回结果。
学完Object.defineProperty，我们就可以实现数据劫持了。

const obj = {}
let name = 'wjg'
Object.defineProperty(obj, 'name', {
	get() {
		console.log('我们劫持了数据')
		return name + '我们劫持了'
	},
	set(newVal) {
		console.log('我们劫持了数据')
		name = newVal
	}
	configurable: true, // 可删除
	enumerable: true // 可枚举(遍历)
})

Object.defineProperties：这个方法可以对多个属性进行定义，第一个参数的需要定义属性的对象，第二个是一个对象。具体操作看如下：

const obj = {}
let name = ''
let age = 18
Object.defineProperties(obj, {
	name: {
		get() {
			return name
		},
		set(newVal) {
			name = newVal
		}
	},
	age: {
		get() {
			return age
		},
		set(newVal) {
			age =newVal
		}
	}
})