使用 defineProperty 劫持数据属性的改变
使用defineProperty劫持数据属性的变化
例子一：有一个全局变量a，有一个全局函数b，实现一个`bindData`，执行后，a的任何赋值都会触发b的执行
// var a = 1;
a = 1;
// console.log(Object.getOwnPropertyDescriptor(window,'a')); // 自定义的全局变量是可配置的
// console: { value: 1, writeable: true, enumerable: true, configurable: true }
function b () {
alert('a的值发生改变');
}
bindData(window, b); // Uncaught TypeError: Cannot redefine property: a;(如果a是通过var声明的)
function bindData(target, event) {
for (var k in target) { // 给全局对象的任意属性都进行变化检测
if (target.hasOwnProperty(k)) {
let descriptor = Object.getOwnPropertyDescriptor(window, k);
// Object.getOwnPropertyDescriptor(window, "TEMPORARY") => undefined
// 找出对象可配置的属性
if (descriptor && descriptor.configurable) { // configurable 为 true, 才可以使用 defineProperty()方法来修改属性描述符
(function () {
var v = target[k]; // 闭包
Object.defineProperty(target, k, {
get: function () {
return v;
},
set: function (newValue) {
v = newValue;
event.call(this);
}
})
})();
}
}
}
}
a = 2; // alert: a的值发生改变
另外，注意
可配置性决定是否可以使用delete删除属性，以及是否可以修改属性描述符的特性
- 设置 configurable:false 后，无法使用 delete 删除属性
- 一般地，设置 configurable:false 后，将无法再使用 defineProperty() 方法来修改属性描述符
// 使用var声明全局变量时，变量的configurable为false
var a = 1;
console.log(Object.getOwnPropertyDescriptor(window,'a'));
// console: { value: 1, writable: true, enumerable: true, configurable: false }
delete window.a // false // 在严格模式下删除为configurable为false的属性，会提示类型错误TypeError
Object.defineProperty(window,'a',{
configurable:true
});
// Uncaught TypeError: Cannot redefine property: a
但有一个例外，设置configurable:false后，只允许writable的状态从true变为false，但不允许将writable的状态从false变为true
如果在定义属性描述符特性时，未指定configurable，writable，enumerable的值，那么它的值默认是 false
// configurable, writable 均未设置，默认为false；由于configurable为false，因此不可 redefine property
var obj = {}
Object.defineProperty(obj, 'name', {
value: 'gg'
})
Object.getOwnPropertyDescriptor(obj, 'name')
// {value: "gg", writable: false, enumerable: false, configurable: false}
obj.name = 'hello'
console.log(obj.name) // 'gg'; 由于writable:false生效，对象name属性无法修改值，所以obj.name = 'hello'的赋值语句静默失败
// 在 configurable: false 的情况下，试图将writable从false改为true，会报错
Object.defineProperty(obj, 'name', {
writable: true
})
// Uncaught TypeError: Cannot redefine property: name
// configurable设置为true, writable 未设置，默认为false；configurable为true，因此可以配置 writable为true
var obj = {}
Object.defineProperty(obj, 'name', {
configurable: true,
value: 'gg'
})
Object.getOwnPropertyDescriptor(obj, 'name')
// {value: "gg", writable: false, enumerable: false, configurable: true}
obj.name = 'hello'
console.log(obj.name) // 'gg'; 由于writable:false生效，对象name属性无法修改值，所以obj.name = 'hello'的赋值语句静默失败
// 在 configurable: true 的情况下，可以将writable从false改为true
Object.defineProperty(obj, 'name', {
writable: true
})
obj.name = 'hello'
console.log(obj.name) // 'hello'; // 说明 writable 修改成功
Object.getOwnPropertyDescriptor(obj, 'name')
// {value: "hello", writable: true, enumerable: false, configurable: true}
// writable设置为true, configurable 未设置，默认为false; 不可修改属性描述符的特性，
// 但有一个例外，设置configurable:false后，允许writable的状态从true变为false !!!
var obj = {}
Object.defineProperty(obj, 'name', {
writable: true,
value: 'gg'
})
Object.getOwnPropertyDescriptor(obj, 'name')
// {value: "gg", writable: true, enumerable: false, configurable: false}
obj.name = 'hello'
console.log(obj.name) // 'hello'; // writable 为true,可以修改name属性
// 在configurable为false的情况下，只允许writable的状态从true变为false !!!
Object.defineProperty(obj, 'name', {
writable: false,
})
obj.name = 'good job'
console.log(obj.name) // 'hello'; // 由于writable:false修改生效，对象name属性无法修改值，obj.name = 'good job'的赋值语句静默失败
Object.getOwnPropertyDescriptor(obj, 'name')
// {value: "hello", writable: false, enumerable: false, configurable: true}
例子二：快速定位不小心暴露到全局的变量
// 函数泄漏全局变量的场景
/*
function A () {
// 在一个函数中多次用到了 for 循环, 为了节省变量, 都是用了 i
for (var i=0; i<5; i++) {
// ...
}
for (i=0; i<5; i++) {
// ...
}
for (i=0; i<5; i++) {
// ...
}
}
// 在某次分拆函数的时候, 忘记在新函数中对抽取出来的 for 循环中的变量进行重新定义
// 从而导致该变量成为泄漏的全局变量
function A () {
for (var i=0; i<5; i++) {
// ...
}
for (i=0; i<5; i++) {
// ...
}
}
function B () {
for (i=0; i<5; i++) { // 这里 i 成了泄漏的全局变量
console.log(i);
}
}
*/
// 通过数据劫持对泄漏的全局变量进行检测
(function () {
var value = window["i"];
Object.defineProperty(window, "i", {
get () {
return value;
},
set (newValue) {
debugger;
value = newValue;
},
enumerable: true,
configurable: true,
});
})();
// 更快的解决方式
// window.__defineSetter__('i', function(){ debugger })
// 'use strict' 使用严格模式可以避免出现未定义的变量
function B () {
for (i=0; i<5; i++) {
console.log(i);
}
}
B(); // 运行 B 函数, i 变为全局变量; 可以被我们的 debugger 调用栈检测到
/*
// 如果在函数里对 i 进行声明, 那么就不会被检测
function B () {
for (var i=0; i<5; i++) { // 这里 i 被声明了
console.log(i);
}
}
*/
