接下来逐步介绍概念.vue
指把一个库引入一个旧的浏览器, 而后用旧的API, 实现一些新的API的功能.segmentfault
Object.definePropety(obj, prop, descriptor)
当修改或定义对象的时候, 给属性添加一些特性浏览器
var obj = { test: 'hello' } // 对象已有的属相添加特性描述 Object.defineProperty(obj, 'test', { configurable: true | false, enumerable: true | false, value: `任意类型的值`, writable: true | false }) // 对象新添加的属性描述 Object.defineProperty(obj, 'newKey', { configurable: true | false, enumerable: true | false, value: `任意类型的值`, writable: true | false })
- 属性对应的值, 能够为任意类型的值.
- 默认:
undefined
// 不设置value的值 Object.defineProperty(obj, 'newKey', { }) console.log(obj.newKey) // undefined /* 注: 两段代码不能同时出现 ; 报错: Cannot redefine property: newKey 缘由: configurable属性默认为false, 不能修改; writable默认fasle, 不能被重写 */ // 设置value值 Object.defineProperty(obj, 'newKey', { value: 'this is test' }) console.log(obj.newKey) // undefined
- 属性的是否能够被重写.
- 默认false, 不能被重写.
// writable为false, 不可被重写 Object.defineProperty(obj, 'newKey', { value: 'hello', writable: false }) Object.defineProperty(obj, 'newKey', { value: 'change' }) // 这种状况下会报错: Cannot redefine property: newKey console.log(obj.newKey)
// 能够被重写 Object.defineProperty(obj, 'newKey', { value: 'hello', writable: false }) obj.newKey = 'change' console.log(obj.newKey) // hello
- 此属性是否能够枚举(使用for...in或者Object.keys)
- 默认为false: 不可枚举
// 不可枚举 var obj = {} Object.defineProperty(obj, 'newKey', { value: 'hello' }) console.dir(obj) // {}
// 能够枚举 var obj = {} Object.defineProperty(obj, 'newKey', { value: 'hello', enumerable: true }) console.dir(obj) // { newKey: 'hello' }
- 目标属性是否能够被删除
- 目标属性的特性是否能够被再次修改
- 默认false, 不可删除与修改
// 属性不可被删除 var obj = {} Object.defineProperty(obj, 'newKey', { value: 'hello', configurable: false }) delete obj.newKey console.log(obj.newKey) // hello
// 属性能够被删除 var obj = {} Object.defineProperty(obj, 'newKey', { value: 'hello', configurable: true }) delete obj.newKey console.log(obj.newKey) // undefined
// 不能修改特性 var obj = {} Object.defineProperty(obj, 'newKey', { value: 'hello', writable: false, configurable: false }) Object.defineProperty(obj, 'newKey', { writable: true, }) // 报错: Cannot redefine property: newKey
// 再次修改特性 var obj = {} Object.defineProperty(obj, 'newKey', { value: 'hello', writable: false, configurable: true }) Object.defineProperty(obj, 'newKey', { writable: true, }) obj.newKey = 'change' console.log(obj.newKey) // change
- 一旦使用Objec.defineProperty给对象添加属性, 若是不设置属性的话, 那么configuable, enumerable, writable这些都是默认的false
- 不能被枚举, 不能被重写, 不能被再次更改属性
当使用存取器描述特性的时候, 容许使用如下特性属性:函数
var obj = {} Object.defineProperty(obj, 'newKey', { get: function() {} | undefined, set: function() {} | undefined, configurable: true | false, enumerable: true | false })
writable
和value
这两个属性// 在特性中使用get/set属性来定义对应的方法 var obj = {} var initVlue = 'hello' Object.defineProperty(obj, 'newKey', { get: function () { // 当获取值的时候, 触发这个函数 return initVlue }, set: function (value) { // 设置值的时候, 触发这个函数 initVlue = value } }) // 获取值 console.log(obj.newKey) // hello obj.newKey = 'change' console.log(initVlue)// change
在IE8下只能对DOM对象使用, 若是对原生对象使用Object.defineProtry()会报错this