ECMAScriptVue不兼容IE8原因以及Object.defineProperty详解

存取器描述

当用存取器描述特性的时段, 允许使用以下特点属性:

var obj = {}

Object.defineProperty(obj, 'newKey', {
  get: function() {} | undefined,
  set: function() {} | undefined,
  configurable: true | false,
  enumerable: true | false
})
  • 当用了getter或者setter方法,
    不容许用writablevalue即时简单个属性

由来概述:

  • Vue.js使用了IE8不能模拟的ECMAScript5就性.
    Vue.js帮忙具备兼容ES5的浏览器.
  • Vue将遍历此目的拥有的性能,
    并使用Object.defineProperty把这一个性全部转为getter/setter.
  • Object.defindProperty是仅ES5支持, 且无法shim的特性.

通下去渐渐介绍概念.

configurable

  • 靶属性是否好叫删去
  • 对象属性的特色是否可以为再一次修改
  • 默认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

ECMAScript,兼容性

在IE8下只可以针对DOM对象下,
假若对原生对象下Object.defineProtry()会报错


参考: https://segmentfault.com/a/1190000007434923

注意

  • 万一拔取Objec.defineProperty给目的上加属性, 倘诺不设置属性之言语,
    那么configuable, enumerable, writable那些依旧默认的false
  • 非克让枚举, 不可知让再度写, 不可能为再一次转移属性

getter/setter

  • 当装或取有对象的属性值的当儿, 可以提供getter/setter方法
  • getter: 是同样种植得到值的章程
  • setter: 是一样栽设置值的法

    // 以特色中利用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

  • get/set不肯定化对出现, 任写这同一就算可. 倘诺安不便宜,
    则get和set的默认值为undeifend

shim特性

拄把一个仓房引入一个原有的浏览器, 然后就此原的API, 实现部分新的API的效能.

Vue不包容IE8因和Object.defineProperty详解

writable

  • 属性之是否好为再度写.
  • 默认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

enumerable

  • 此属性是否足以枚举(使用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' }

Object.definePropety()

  • 语法: Object.definePropety(obj, prop, descriptor)
  • 参数:
  • obj: 操作对象
  • prop: 需要操作的性名称
  • descriptor: 属性具有的表征
  • 重返值: 传入的靶子, 即第一只参数obj
  • 对特征描述是个别栽格局: 数据描述和存取器描述

value

  • 属性对应之值, 可以为随机档次的值.
  • 默认: 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

数描述

当修改要概念对象的下, 给属性添加一些特征

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
})