首先了解一下Object.defineProperty

  • object.defineProperty(obj, prop, descriptor)有三个参数
    -- obj
        要定义属性的对象。
    -- prop
        要定义或修改的属性的名称或 symbol。
    --descriptor
        要定义或修改的属性描述符。
    --这里主要用到两个属性描述符
        get: 当访问该属性时,会调用此函数。但是会传入 this 对象(由于继承关系,这里的this并不一定是定义该属性的对象)。该函数的返回值会被用作属性的值。
        set:   当属性值被修改时,会调用此函数。该方法接受一个参数(也就是被赋予的新值),会传入赋值时的 this 对象。
// html
<input type="text" id="txt" />
// js
let obj = {}
let temp = ''
let message = document.querySelector('input')
message.oninput = function(){
    obj.name = this.value
    console.log(obj.name)
}
// m => v
Object.defineProperty(obj, 'name', {
    set(value){
        temp = value
        message.value = value
    },
    get(){
        return temp
    }
})