开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 数据劫持(一)由浅入深理解Object.defineProperty -> 正文阅读

[JavaScript知识库]数据劫持(一)由浅入深理解Object.defineProperty

Object.defineProperty

看了几篇网上相关博客，发现存在很多问题，有很多误导性，特此梳理总结一下

理解数据劫持

数据劫持，其实就是数据代理。
数据劫持，指的是在访问或者修改对象的某个属性时，通过一段代码拦截这个行为，进行额外的操作或者修改返回结果。

了解Object.defineProperty() 方法

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
Object.defineProperty(obj, prop, descriptor)
- obj 要定义属性的对象。
- prop 要定义或修改的属性的名称或 Symbol 。
- descriptor 要定义或修改的属性描述符。
属性描述符有两种主要形式：数据描述符和存取描述符。
- 数据描述符是一个具有值的属性，该值可以是可写的，也可以是不可写的。有configurable、enumerable、value、writable四个配置属性。
- 存取描述符是由 getter 函数和 setter 函数所描述的属性。有configurable、enumerable、get、set四个配置属性。
- 一个描述符只能是这两者其中之一；不能同时是两者。

当使用了存取描述符get或set方法，不允许使用writable和value这两个属性,同理当使用了数据描述符writable和value，不允许使用get或set方法。

添加对象属性

通过数据描述符创建

const person = {};
Object.defineProperty(person , 'name', {
    value: '小陈'
})
console.log(person.name) // 小陈

通过存取描述符修改

const person = {};
Object.defineProperty(person ,'name',{
	get:function(){
		console.log('触发get');
		return '小陈'
	},
})
console.log(person.name)  //触发get 小陈

修改对象属性值

通过数据描述符修改

writable

通过配置writable为true可修改属性的值

const person = {
    name: '小陈'
};
Object.defineProperty(person, 'name', {
    writable: true,
})
console.log(person.name) // 小陈
person.name = '小王';
console.log(person.name) //小王

当不配置writable时，其默认值是false，属性的值（value）是不能被赋值运算符改变；
当配置writable为true时，属性的值（value）才能被运算符改变；
所以再给name属性值重新赋值，并不会改变name的值。

通过存取描述符修改

const person = {
    name: '小陈'
};
let nameValue = person.name
Object.defineProperty(person, 'name', {
    configurable: true,
    get: function() {
        console.log('触发get');
        return nameValue
    },
    set: function(newValue) {
        console.log('触发set')
       // person['name'] = newValue  错误写法，会导致栈溢出
        nameValue = newValue
    }
})
console.log(person.name) //触发get 小陈
person.name = '小王'; //触发set 
console.log(person.name) //触发get 小王

配置对象属性

configurable 、enumerable配置对数据描述符和存取描述符设置效果一致。

configurable

表示对象的属性是否可以被删除，以及除 value 和 writable 特性外的其他特性是否可以被修改。
configurable为默认值或者配置为false时，则该属性相关的配置不能再被更改，也不能被删除

const person = {};
Object.defineProperty(person, 'name', {
    value: '小陈',
    configurable: false,
})
console.log(person.name);
Object.defineProperty(person, 'name', {
    writable: true,  // Cannot redefine property: name
})
Object.defineProperty(person, 'name', {
    configurable: true, //  Cannot redefine property: name
})
Object.defineProperty(person, 'name', {
    enumerable: true, //  Cannot redefine property: name
})
Object.defineProperty(person, 'name', {
     value: '小王' //  Cannot redefine property: name
})
Object.defineProperty(person, 'name', {
    get() {
        return '小王' //  Cannot redefine property: name
    }
})
Object.defineProperty(person, 'name', {
    set() {} //Cannot redefine property: name
})
delete person.name  // 由于前边抛错，不会执行到这里，即使执行到这里也不会删除该属性
console.log(person);

以上将configurable设为true时，则不会抛出任何错误，最后该属性会被删除。

注意：configurable: true时，可以通过Object.defineProperty给同一属性重复定义配置。同时数据描述符配置属性writable为false，则不能通过赋值方式改变属性的值，但是可以通过Object.defineProperty重复定义的方法改变。

const person = {};
Object.defineProperty(person, 'name', {
    value: '小陈',
    configurable: true,
    writable: false,
})
console.log(person.name); // 小陈
person.name = '小王';
console.log(person.name); // 小陈
Object.defineProperty(person, 'name', {
    value: '小王',
})
console.log(person.name); // 小王

enumerable

enumerable 定义了对象的属性是否可以在 for…in 循环和 Object.keys() 中被枚举。默认值为 false。

const person = {};
Object.defineProperty(person, "name", {
    value: '小陈',
    enumerable: true
});
Object.defineProperty(person, "age", {
    value: '20',
    enumerable: false
});
Object.defineProperty(person, "sex", {
    value: '男',
    enumerable: true
});
Object.defineProperty(person, "hobby", {
    value: '睡觉',
    enumerable: true
});
for (var i in person) {
    console.log(i); // name sex hobby
}
const result = Object.keys(person);
console.log(result); // ['name', 'sex', 'hobby']

通过propertyIsEnumerable方法确定属性是否可枚举

console.log(person.propertyIsEnumerable('age'));   // false

数据描述符中的属性默认值问题

使用点运算符和 Object.defineProperty() 为对象的属性赋值时，描述符中的属性默认值是不同的

var o = {};
o.a = 1;
// 等同于：
Object.defineProperty(o, "a", {
  value: 1,
  writable: true,
  configurable: true,
  enumerable: true
});
// 另一方面，
Object.defineProperty(o, "a", { value : 1 });
// 等同于：
Object.defineProperty(o, "a", {
  value: 1,
  writable: false,
  configurable: false,
  enumerable: false
});

即通过点运算符创建的对象属性是可修改可删除可枚举， writable、configurable、enumerable都为true

自定义一个getters和setters

function Archiver() {
  var temperature = null;
  var archive = [];

  Object.defineProperty(this, 'temperature', {
    get: function() {
      console.log('get!');
      return temperature;
    },
    set: function(value) {
      temperature = value;
      archive.push({ val: temperature });
    }
  });
  this.getArchive = function() { return archive; };
}
var arc = new Archiver();
arc.temperature; // 'get!'
arc.temperature = 11;
arc.temperature = 13;
arc.getArchive(); // [{ val: 11 }, { val: 13 }]

Object.defineProperty的应用

监听对象上的多个属性

错误写法

  const person = {
	name:'小陈',
	age:20,
	sex:'男',
  }
 Object.keys(person).forEach(function (key) {
    Object.defineProperty(person, key, {
        enumerable: true,
        configurable: true,
        get() {
            return person[key]
        },
        set(val) {
            console.log(`对person中的${key}属性进行了修改`)
            person[key] = val
        }
    })
})
console.log(person.age)   // Uncaught RangeError: Maximum call stack size exceeded

这种写法在get/set里写person[key]，进入递归调用状态，反复访问属性值。最终造成栈溢出。

正确写法

const person = {
    name: '小陈',
    age: 20,
	sex:'男'
}
// 实现一个响应式函数
function defineProperty(obj, key, val) {
    Object.defineProperty(obj, key, {
        get() {
            console.log(`访问了${key}属性`)
            return val
        },
        set(newVal) {
            console.log(`${key}属性被修改为${newVal}了`)
            val = newVal
        }
    })
}
// 实现一个遍历函数Observer
function observer(obj) {
    Object.keys(obj).forEach((key) => {
        defineProperty(obj, key, obj[key])
    })
}
Observer(person);
console.log(person.age); // 访问了age属性 20
person.age = 24;  // age属性被修改为24了
console.log(person.age);  // 访问了age属性 24

深度监听一个对象

借助Object.defineProperty与递归的思想可达到深度监听的效果

function defineProperty(obj, key, val) {
    //如果某对象的属性也是一个对象，递归进入该对象，进行监听
    if (typeof val === "object") {
        observer(val);
    }
    Object.defineProperty(obj, key, {
        get() {
            console.log(`访问了${key}属性`);
            return val;
        },
        set(newVal) {
            // 如果newVal是一个对象，递归进入该对象进行监听
            if (typeof val === 'object') {
                observer(key)
            }
            console.log(`${key}属性被修改为${newVal}了`);
            val = newVal;
        },
    });
}
function observer(obj) {
    //如果传入的不是一个对象，return
    if (typeof obj !== "object" || obj === null) {
        return;
    }
    Object.keys(obj).forEach((key) => {
        defineProperty(obj, key, obj[key]);
    });
}

Object.defineProperty的不足

不支持监听数组的变化

let arr = [1, 2, 3]
let obj = {}
    //把arr作为obj的属性监听
Object.defineProperty(obj, 'arr', {
    get() {
        console.log('触发了get')
        return arr
    },
    set(newVal) {
        console.log('触发了set', newVal)
        arr = newVal
    }
})
console.log(obj.arr) //触发了get [1,2,3] 
obj.arr = [1, 2, 3, 4] //输出set [1,2,3,4] 正
obj.arr.push(5) //触发了get
obj.arr.unshift() //触发了get
obj.arr.pop() // //触发了get
obj.arr.shift() 触发了get

当使用Object.defineProperty监听的对象属性是数组时，使用push、unshift、pop、shift、splice, ‘sort’, reverse是监听是触发不了set的。
只要不是重新赋值一个新的数组对象，任何对数组内部的修改都不会触发set方法的执行。

在Vue2.x中，通过重写Array原型上的方法解决了这个问题的。

通过重写数组操作方法实现数组监听

function arrMethods() {
    const orginalProto = Array.prototype;
    const arrayProto = Object.create(orginalProto); // 先克隆一份Array的原型出来
    const methodsToPatch = [
        'push',
        'pop',
        'shift',
        'unshift',
        'splice',
        'sort',
        'reverse'
    ]
    methodsToPatch.forEach(method => {
        arrayProto[method] = function() {
            // 执行原始操作
            orginalProto[method].apply(this, arguments)
            console.log('监听成功', method)
        }
    })
    return arrayProto
}

function observer(data) {
    if (Array.isArray(data)) {
        // 如果是数组, 重写原型
        data.__proto__ = arrMethods()
            // 传入的数据可能是多维度的,也需要执行响应式
        for (let i = 0; i < data.length; i++) {
            observer(data[i])
        }
    }
}
const arr = [1, 2, 3, 4]
observer(arr);
arr.push(5);  //监听成功

实现监听对象数组

//重写数组操作方法
function arrMethods() {
    const orginalProto = Array.prototype;
    const arrayProto = Object.create(orginalProto); // 先克隆一份Array的原型出来
    const methodsToPatch = [
        'push',
        'pop',
        'shift',
        'unshift',
        'splice',
        'sort',
        'reverse'
    ]
    methodsToPatch.forEach(method => {
        arrayProto[method] = function() {
            // 执行原始操作
            orginalProto[method].apply(this, arguments)
            console.log('监听成功', method)
        }
    })
    return arrayProto
}
// 劫持
function defineProperty(obj, key, val) {
    //如果某对象的属性也是一个对象，递归进入该对象，进行监听
    if (typeof val === "object") {
        observer(val);
    }
    Object.defineProperty(obj, key, {
        get() {
            console.log(`访问了${key}属性`);
            return val;
        },
        set(newVal) {
            // 如果newVal是一个对象，递归进入该对象进行监听
            if (typeof val === 'object') {
                observer(key)
            }
            console.log(`${key}属性被修改为${newVal}了`);
            val = newVal;
        },
    });
}
// 多属性监听
function observer(data) {
    //如果传入的不是一个对象，return
    if (typeof data !== "object" || data === null) {
        return;
    }
    if (Array.isArray(data)) {
        // 如果是数组, 重写原型
        data.__proto__ = arrMethods()
            // 传入的数据可能是多维度的,也需要执行响应式
        for (let i = 0; i < data.length; i++) {
            observer(data[i])
        }
    } else {
        // 如果是对象
        Object.keys(data).forEach((key) => {
            defineProperty(data, key, data[key]);
        });
    }
}
// 数组
const arr = [1, 2, 3, 4]
observer(arr)
arr.push(5) // 监听成功 push
// 对象
const person = {
    name: '小陈',
    age: 20,
    sex: '男',
    arr: [1, 2, 3, 4]
}
observer(person)
console.log(person.age); // 访问了age属性 20
person.age = 24; // age属性被修改为24了
console.log(person.age); // 访问了age属性 24
person.arr.push(5)  // 监听成功 push

不能监听属性新增和删除操作

const person = {
    name: '小陈'
};
let nameValue = person.name
Object.defineProperty(person, 'name', {
    configurable: true,
    get: function() {
        console.log('触发get');
        return nameValue
    },
    set: function(newValue) {
        console.log('触发set')
        nameValue = newValue
    }
})
person.age = 20;  // 并没有触发set
console.log(person);  
delete person.age;  //并没有触发set
console.log(person);

什么样的 a 可以满足 (a === 1 && a === 2 && a === 3) === true 呢？

每次访问 a 返回的值都不一样，那么肯定会想到数据劫持。

let current = 0
Object.defineProperty(window, 'a', {
        get() {
            current++
            return current
        }
})
// console.log(a);  1
// console.log(a);  2
// console.log(a);  3
console.log(a === 1 && a === 2 && a === 3)  // true