js对象劫持

最新推荐文章于 2024-07-22 22:35:58 发布

转载最新推荐文章于 2024-07-22 22:35:58 发布 · 524 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/weixin_46021808/article/details/115641283

文章标签：

#javascript #前端 #vue.js

js 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了JavaScript的Object.defineProperty()方法，用于在对象上创建拦截器，实现数据劫持。通过数据描述符和存取描述符，控制属性的读写权限。在Vue框架中，这一机制用于实现数据的双向绑定，当属性值改变时自动更新视图。通过设置get和set方法，可以监听并处理数据变化。示例代码展示了如何利用这一特性实现数据的监听和更新。

JS对象劫持

Object.defineProperty()在目标对象之前加一层"拦截"，外界对该对象的访问，都必须先通过这层拦截，对此，提供了一种机制，可以对外界的访问进行过滤和改写。这种机制就称对象劫持。
Vue能够在修改属性时, 修改视图, 使用的就是 Object.defineProperty()

语法

Object.defineProperty(obj, prop, desc)

obj 需要定义属性的对象
prop 当前定义的属性名
desc 描述符

描述符分为两种, 分别为数据描述符存取描述符

数据描述符

value 表示它的默认值
writable 如果为true标识可以被修改，如果为false标识不能被修改（默认值为false）
configrable 描述属性是否配置，以及可否删除，可以认为是总开关默认值 false（不可删除）
enumerable 描述属性是否出现在for in 或者 Object.keys()的遍历中默认值false(不能遍历)
==value和writable不能和set get共存 ==

let obj = {};
Object.defineProperty(obj, 'name', {
    value: '张三'
})
obj.name = '李四'
console.log(obj.name) // 张三

let obj = {};
Object.defineProperty(obj, 'name', {
    value: '张三',
    writable: true
})
obj.name = '李四'
console.log(obj.name) // 李四

let obj = {};
  Object.defineProperty(obj, 'name', {
    value: '张三',
    writable: true,
    configurable: true,
    enumerable: true
  })
  obj.name = '李四'
  // delete obj.name
  console.log(obj.name) // 李四
  console.log(Object.keys(obj)) // ['name']

存取描述符

包括 set 和 get 方法, 获取属性时会触发 get 方法设置属性时会触发 set 方法

let obj = {}
Object.defineProperty(obj, 'name', {
  get() {
    console.log('触发set方法')
    return '张三'
  },
  set(val) {
    console.log('触发get方法')
  }
})

obj.name = '李四'
console.log(obj.name)
// 触发get方法
// 触发set方法
// 张三

get 固定返回’李四’, 所以无法设置新的属性. obj.name = '李四’触发了set, obj.name触发了get

实现监听数据变化
let obj = {}
let temp = null
Object.defineProperty(obj, 'name', {
  get() {
    return temp
  },
  set(val) {
    temp = val
    // 数据变化时触发下面操作
    console.log(obj.name)
  }
})

obj.name = '李四' // 李四