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

本文转载自 https://www.cnblogs.com/zhangrunhao/p/7660931.html


原因概述:

  • Vue.js使用了IE8不能模拟的ECMAScript5特性. Vue.js支持所有兼容ES5的浏览器。
  • Vue将遍历此对象所有的属性, 并使用Object.defineProperty把这些属性全部转为getter/setter。
  • Object.defindProperty是仅ES5支持, 且无法shim的特性。

接下来逐步介绍概念:

shim特性

指把一个库引入一个旧的浏览器, 然后用旧的API, 实现一些新的API的功能。


Object.definePropety()

  • 语法: Object.definePropety(obj, prop, descriptor)
  • 参数:
    • obj: 操作对象
    • prop: 需要操作的属性名称
    • descriptor: 属性具有的特性
  • 返回值: 传入的对象, 即第一个参数obj
  • 针对特性描述存在两种形式: 数据描述和存取器描述

数据描述

当修改或定义对象的时候, 给属性添加一些特性

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

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

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

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

注意

  • 一旦使用Objec.defineProperty给对象添加属性, 如果不设置属性的话, 那么configuable, enumerable, writable这些都是默认的false
  • 不能被枚举, 不能被重写, 不能被再次更改属性

存取器描述

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

var obj = {}

Object.defineProperty(obj, 'newKey', {
  get: function() {} | undefined,
  set: function() {} | undefined,
  configurable: true | false,
  enumerable: true | false
})
  • 当使用了getter或者setter方法, 不允许使用writable和value这两个属性

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

兼容性

在IE8下只能对DOM对象使用, 如果对原生对象使用Object.defineProtry()会报错。

你可能感兴趣的:(Vue.js,vue,defineProperty)