Object.defineProperty

使用语法

// 第一种
let person = {}
Object.defineProperty(person, 'name', {
  configurable: true, // 是否允许配置修饰符
  enumerable: true // 是否可被枚举
  value: '张三',
  writerable: true, // 设置为false时，赋值不会报错，只是设置不成功
})

// 第二种
let person = {}
Object.defineProperty(person, 'name', {
  configurable: true,
  enumerable: true,
  get: function() {
    return '张三'
  },
  set: function(val) {
    cosnole.log('设置时传入的值', val)
  }
})

响应式原理

主要是在set出发的时候，去更新视图。

// html
<div id="name">小子</div>
<div id="btn">按钮</div>

// js
let person = {}
let val = 小子 // 记录当前的值
Object.defineProperty(person, 'name', {
  set: function(newVal) {
    document.getElementById('name').innerHTML = newVal
    val = newVal
  }
})

document.getElementById('btn').addEventListener('click', () => {
  person.name = '老子'
})

将以上代码封装成一个watch函数

// 功能
let person = {
  name: '张三'
}
watch(person, 'name', function(newVal) {
  document.getElementById('name').innerHTML = newVal
})
document.getElementById('btn').addEventListener('click', function() {
  person.name = '李四'
})

function watch(obj, key, cb) {
  let val = obj[key]
  Object.defineProperty(obj, 'name', {
    get: function() {
      return val
    },
    set: function(newVal) {
      cb(newVal)
      val = newVal
    }
  })
}

proxy

什么是Proxy

可以定义一个对象的各种属性、行为、函数等等一系列自定义操作。

使用方法

let person = new Proxy({}, {
  get: function(target, key) {
    
  },
  set: function(target, key, newVal) {
  
  },
  has: function() {

  },
  // 函数被调用时拦截，注意传入target是函数。 arguments => 被调用时传入的参数数组
  apply: function(target, content, arguments) {

  }
})