【JavaScript】数据劫持详解

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

💻 【JavaScript】数据劫持 🏠专栏JavaScript
👀个人主页繁星学编程🍁
🧑个人简介一个不断提高自我的平凡人🚀
🔊分享方向目前主攻前端其他知识也会阶段性分享🍀
👊格言☀️没有走不通的路只有不敢走的人☀️
👉让我们一起进步一起成为更好的自己🎁

文章目录

【JavaScript】数据劫持
- 一. Object.defineProperty()
- 二. 数据劫持

【JavaScript】数据劫持

一. Object.defineProperty()

语法Object.defineProperty(数据, 属性名, {配置项})

配置项

value设置属性名对应的属性值
writable设置的属性是否可以修改

值true/false(默认)
enumerable设置的属性是否可以遍历

值true/false (默认)
configurable设置的属性是否可以删除

值true/false(默认)
getter、setter不允许和value, writable连用连用会报错
- get 获取的时候可以触发的方法
- set 设置的时候可以触发的方法

注value、writable、enumerable、configurable可以单独使用也可以连用

针对上述配置项的使用情况

(1) value

const obj = { name: "zs" }
Object.defineProperty(obj, "age", {
    // 设置属性名对应的属性值
    value: 20;
});
console.log(obj); // {name: 'zs', age: 20}
obj.age = 30;
console.log(obj); // {name: 'zs', age: 20}

(2) writable

const obj = { name: "zs" }
Object.defineProperty(obj, "age", {
    // 设置的属性可以修改 
    writable: true
})
console.log(obj); // { name: 'zs', age: undefined }
obj.age = 30;
console.log(obj); // {name: 'zs', age: 20}

(3) enumerable

const obj = { name: "zs" }
Object.defineProperty(obj, "age", {
    value: 20,
    // 设置的属性可以遍历 
    enumerable: true
});
for (let k in obj) {
    console.log(k, obj[k]); // name zs age 20
}

(4) configurable

const obj = { name: "zs" }
Object.defineProperty(obj, "age", {
    // 设置的属性可以删除  
    configurable: true
});
delete obj.name;
console.log(obj); // {age: undefined}

(5) get set定义属性

const obj = { name: "zs" }
Object.defineProperty(obj, "age", {
    get() {
        return 20; // 当我们设置一个返回值的时候就表示该属性被设置了值
    },
    set(val) {
        // 可以监听到设置的值
        console.log(val); // 19
    }
});
obj.age = 19; // 设置的时候会触发 set方法
console.log(obj.age); // 20 (获取的时候 会触发 get方法)
console.log(obj);

二. 数据劫持

当访问或者修改对象的某个属性的时候通过 getter setter 拦截这个行为进行额外的操作
将原始的数据复制一份通过复制的数据操作原始数据

<div id="box"></div>
<input type="text" id="ipt1">
<input type="text" id="ipt2">
<!-- 分割线 --> 
// 原始数据
const obj = {
    name: 'zs',
    age: 20
}
// 目标数据
const target = {}
// 通过数据劫持的方法把原始数据复制到目标中
Object.defineProperty(target, 'name', {
    get() {
        return obj.name
    },
    set(val) {
        obj.name = val
        box.innerHTML = `你好 我叫${target.name} , 我今年${target.age}`
    }
})
Object.defineProperty(target, 'age', {
    get() {
        return obj.age
    },
    set(val) {
        obj.age = val
        box.innerHTML = `你好 我叫${target.name} , 我今年${target.age}`
    }
})
box.innerHTML = `你好 我叫${target.name} , 我今年${target.age}`
ipt1.onchange = function () {
    target.name = this.value
}
ipt2.onchange = function () {
    target.age = this.value
}