[油猴脚本开发指南]对象的数据劫持代码

李恒道

这里我们利用的是Object.defineProperty

具体可以参考https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

参数有obj, prop, descriptor

obj
要定义对象
prop
要定义属性
descriptor
描述的爱作

descriptor叫做属性描述符

属性描述符通常分为两种，数据描述符以及存取描述符。

这两种描述符公用的属性有configurable以及enumberalbe

configurable
当configurable为true时，属性可以被改变以及删除，默认为false
enumerable
当为true时，可以出现在对象的枚举对象中，默认为false

接下来我们分别介绍数据描述符以及存取描述符

数据描述符具有两个键值

value和writable

value设置该属性对应的值默认为false

writable设置该属性是否可写，默认为false

存取爱作符也具有两个键值

get和set

get
当访问该属性时，会调用此函数。执行时不传入任何参数，但是会传入 this 对象（由于继承关系，这里的this并不一定是定义该属性的对象）。该函数的返回值会被用作属性的值。

set
当属性值被修改时，会调用此函数。该方法接受一个参数（也就是被赋予的新值），会传入赋值时的 this 对象。

数据描述符更倾向于控制数据的属性以及值，

存起描述符更倾向于控制数据变化的过程。

具体怎么用我们可以看一些小栗子，这个函数相当于在访问对象内的属性的时候进行了一层过滤，可以篡改读取到的数据以及设置的数据

可以看一下官方的例子有一个非常好的体现

const object1 = {};
创建一个object1
Object.defineProperty(object1, 'property1', {
  value: 42,
  writable: false
});
设置object1的属性property1，值为42，不可写
object1.property1 = 77;
再设置object1的property1属性为77
// throws an error in strict mode

console.log(object1.property1);
我们来访问property，为42
// expected output: 42

不仅仅可以设置为对象，也可以设置set和get来控制读取和写入

Object.defineProperty(对象, '属性', {
    get: function() {
         获取的数据
    },
    set: function(str) {
         设置的数据
    },
});

相信到这里大家就了解了数据的拦截了！！

陈公子的话

我想到了java

王一之

感觉能不能编一个目录，弄成书？不然感觉好乱啊 类似语雀那样？

这种觉得应该算是技巧

李恒道

王一之 发表于 2021-7-19 18:24
感觉能不能编一个目录，弄成书？不然感觉好乱啊 类似语雀那样？

这种觉得应该算是技巧 ...

先这样吧，拿总目录做指引，回头有机会可以考虑做个chm或者语雀

steven026

ggnb
另外想问一下Object.defineProperty(obj, prop, descriptor)中的obj能是任意对象吗？或者有办法拦截到闭包内的对象，然后暴露到全局吗？

李恒道

steven026 发表于 2022-6-22 19:00
ggnb
另外想问一下Object.defineProperty(obj, prop, descriptor)中的obj能是任意对象吗？或者有办法拦截到 ...

这个也要先拿到对象才能做定义哦
闭包的话看什么了
vue react webpack论坛有解决方案
其他的要哥哥自己分析了~