企业网站建设 西宁,上海公共招聘官网,国际财经新闻最新头条,做网站设计的需要什么材料文章目录 一、数据劫持对象的访问器属性 二、Object.defineProperty()三、Proxy()四、补充1. Object类新增方法2. Array类新增方法 一、数据劫持
数据劫持#xff1a;能够拦截到数据被使用或被修改的时机#xff0c;在这个时机除了可以获取数据的值或对数据的值进行修改之外… 文章目录 一、数据劫持对象的访问器属性 二、Object.defineProperty()三、Proxy()四、补充1. Object类新增方法2. Array类新增方法 一、数据劫持
数据劫持能够拦截到数据被使用或被修改的时机在这个时机除了可以获取数据的值或对数据的值进行修改之外还可以执行其他功能。 当对数据进行修改时除了要修改数据自身之外还希望对所有使用了该数据的位置进行同步修改。
对象的访问器属性
访问器属性由 “getter” 和 “setter” 方法表示。在对象字面量中它们用 get 和 set 表示
let obj {_msg: hello world,get msg() {// 当读取 obj.msg 时getter 起作用return this._msg;},set msg(value) {// 当执行 obj.msg value 操作时setter 起作用this._msg value}
};当读取 obj.msg 时getter 起作用当 obj.msg 被赋值时setter 起作用。从外表看访问器属性看起来就像一个普通属性。这就是访问器属性的设计思想。我们不以函数的方式调用我们正常读取它getter 会在幕后运行。如果访问器属性只有一个 getter。在赋值操作 obj.msg xxx将会出现错误Error属性只有一个 getter这样就会有一个“虚拟”的属性它是可读且可写的。我们会利用这种方式进行数据劫持。
二、Object.defineProperty()
Object.defineProperty(对象, 属性名, { 配置项 })配置项 value该属性对应的值writable该属性是否可被重写默认是 falseenumerable该属性是否可被枚举默认是 falseget是一个函数, 叫做 getter 获取器可以来决定该属性的值 get 函数的返回值, 就是当前这个属性的值注意: 不能和 value 和 writable 一起使用会报错 set是一个函数叫做 setter 设置器当你需要修改该属性的值的时候会触发该函数
Object.defineProperty(obj, age, {// value: 18,// writable: true,enumerable: true,// 该函数的返回值就是 age 属性的值get () {return 20},set (val) {console.log(你想修改 age 的值, 你想修改为 : , val)}
})升级版Object.defineProperties(对象, { 配置项组 }) 配置项组键为属性名值为当前属性的配置项
Object.defineProperties(obj, {属性1: { 配置项 },属性2: { 配置项 }
})注意Object.defineProperty和Object.defineProperties无法劫持后来添加的属性
三、Proxy()
ES6新增的本地对象语法为new Proxy(原始对象, { 配置项 })用于实现数据代理。 返回值就是代理之后的对象
const obj { name: Jack, age: 18 }
// 开始代理
const result new Proxy(obj, {// 配置 get 进行代理设置get (target, property) {// target要代理的目标对象当前案例为 obj// property该对象内的每一个属性自动遍历return target[property];},// 配置 set 进行修改set (target, property, val) {// target要代理的目标对象当前案例为 obj// property该对象内要修改的属性// val要修改的属性的值target[property] valconsole.log(你试图修改 property 属性, 你想修改为 : , val, 我需要根据你修改的内容重新渲染页面)// 注意简单代理需要返回truereturn true;}
})四、补充
1. Object类新增方法
Object.create(obj, { 配置项组 }) 创建返回一个新对象这个新对象的__proto__指向obj配置项组键为新对象的属性名值为当前属性的配置项 配置项参考Object.defineProperty()的配置项 Object.is(value1, value2) 判断两个value是否是相同的值返回值为布尔值 Object.assign(obj1, obj2) 将obj2合并到obj1并返回合并之后的obj1 Object.keys(obj) 返回对象所有可被枚举的key以数组的形式呈现 Object.values(obj) 返回对象所有可被枚举key的value以数组的形式呈现 Object.setPrototypeOf(obj, prototype) 修改obj的__proto__指向指定的prototypeprototype为对象或null返回值为修改后的obj Object.getPrototypeOf(obj) 获取并返回obj的原型对象
2. Array类新增方法
Array.from( 参数 ) 根据指定参数创建新数组要求该参数可被迭代。可根据伪数组创建真数组实现伪转真数组的深拷贝 Array.of( 数据, ... ) 根据指定数据创建数组类似Array( 数据, ... )但Array.of( 数据, ... )接收一个数值型数据时不会作为长度 Array.isArray( 数据 ) 判断指定数据是否为数组返回值为布尔值
