MarginLon MarginLon
首页
  • Web

    • Web基础
    • Web布局
    • CodeSnippet
  • Vue

    • Vue
  • React

    • React
  • Node.js

    • Node.js
  • 技术文档
  • UI组件库
  • 动画库
  • 图形库
  • 桌面端
  • 学习笔记
  • 生活笔记
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

MarginLon

http://info.cern.ch
首页
  • Web

    • Web基础
    • Web布局
    • CodeSnippet
  • Vue

    • Vue
  • React

    • React
  • Node.js

    • Node.js
  • 技术文档
  • UI组件库
  • 动画库
  • 图形库
  • 桌面端
  • 学习笔记
  • 生活笔记
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • Vue

    • MVVM
    • 指定视图容器的N种方案
    • data
    • 数据劫持
    • 小胡子语法
    • computed
    • 响应式细节
    • provide和inject
    • EventBus
  • Vue-Router

  • Vuex

  • 《Vue》
  • Vue
MarginLon
2023-09-25

数据劫持

/*
1.Object.getOwnPropertyDescriptor([obj], [key])       
2.Object.getOwnPropertyDescriptors([obj])
 + configurable: true
 + enumerable: true   [for...in / Object.keys]
 + writable: true··
 + value: 10
 + 即“常规手段”设置对象成员,一般可删除,可枚举,可修改。
 + 但浏览器内置的属性/方法,一般是不可枚举,可删除,可修改。
 
*/
let obj = {
 x: 10,
 y: 20
}
console.log(Object.getOwnPropertyDescriptor(obj, 'x'))

/*
 Object.defineProperty([obj],[key],{
  // 设置规则
 })
 // 默认规则
  + 成员不存在,新增后默认都是false
  + 成员存在,修改规则前的规则
*/


/*
 Object.defineProperty 数据劫持
*/
let obj = {
 x: 10,
 y: 20
}
let proxy = { ...obj }
Object.defineProperty(obj, 'x', {
 get(){
  // 访问x成员值时候会触发get
  // 函数的返回值就是成员访问的结果
  // return obj.x; // => 死递归
  return proxy.x
  
 },
 set(val){
  // 设置x成员值得时候触发set
  // val为新值
  // obj.x = val // 死递归
  proxy.x = val 
 }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
编辑 (opens new window)
上次更新: 2023/10/07, 23:46:08
data
小胡子语法

← data 小胡子语法→

最近更新
01
KnockoutJS
11-12
02
综述
10-17
03
前言
10-12
更多文章>
Theme by Vdoing | Copyright © 2019-2024 MarginLon | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式