说明

Object.defineProperty() 提供了 get 和 set 方法来监听和控制属性的访问与修改

案例

// 定义对象
var data = {
    name : "杜子腾"
}
// name属性，监听到属性改变时，通过修改该值 达到修改 对象中name属性的作用
let nameProp = data.name
// 监听 data 对象的 name属性
Object.defineProperty(data,"name",{

    // 访问 data 的 name 属性时，就会触发执行该函数。必须实现，否则无法访问该属性
    get:function(){
        console.log("访问对象的name属性")
        return nameProp
    },
    // 改变 data 的 name 属性时，就会触发执行该函数
    set:function(newValue){
        // 判断新值原原值不同，才执行
        if(nameProp != newValue){
            console.log("修改属性，新值",newValue)
            // 修改nameProp后，对象中的name属性也会跟着改变
            nameProp = newValue
        }
    }
})

console.log("data.name111",data.name)
data.name = '杜子腾'
console.log("data.name2222",data.name)
data.name = '李雷'
console.log("data.name333",data.name,data)

封装成函数

const listenerProperty = (object,property)=>{
    // 属性值，监听到属性改变时，通过修改该值 达到修改 对象中 property 属性的作用
    let value = object[property]
    // 监听 object 对象的 property 属性
    Object.defineProperty(object,property,{

        // 访问 object 的 property 属性时，就会触发执行该函数
        get:function(){
            console.log("访问对象的"+property+"属性")
            return value
        },
        // 改变 object 的 property 属性时，就会触发执行该函数
        set:function(newValue){
            // 判断新值原原值不同，才执行
            if(value != newValue){
                console.log("修改属性，新值",newValue)
                // 修改 value 后，对象中的属性也会跟着改变
                value = newValue
            }
        }
    })
}

测试：

const student = {
    name : "杜子腾"
}
listenerProperty(student,"name")
console.log("data.name111",student.name)
student.name = '杜子腾'
console.log("data.name2222",student.name)
student.name = '李雷'
console.log("student.name333",student.name,student)

原文出处：/show_1IX8YthePgZ6.html