8.ES6：Object.defineProperty 、Proxy 、Reflect

https://blog.csdn.net/qq_28387069/article/details/83148211

ES6：Object.defineProperty 、Proxy 、Reflect
GoodbyeRonnie 2018-10-18 18:19:57 2303 收藏 2
分类专栏： JS
版权

JS
专栏收录该内容
50 篇文章0 订阅
订阅专栏
Object.defineProperty

Object.defineProperty方法可以定义（或修改）一个对象的属性， 并返回这个对象。该方法接受三个参数，分别是要操作的对象、要操作的属性名称、要操作的属性描述符。属性描述符有两种形式，分别是数据描述符和存取描述符，这两种形式只能二选一。

var obj = {}
//数据描述符
Object.defineProperty(obj, “a”, {
value : 1,//可选，默认undefined ，可以是任何数据类型
writable : false,//可选，默认false，该属性的value是否能被赋值运算符改变
configurable : true,//可选，默认为false 该属性描述符是否可配置
enumerable : false//可选，默认false 该属性是否在被遍历时显示
})
//存取描述符
Object.defineProperty(obj, “a”, {
get : ()=>{},//可选，默认undefined，必须是函数类型数据
set : ()=>{},//可选，默认undefined，必须是函数类型数据
configurable : false,//同数据描述符
enumerable : false//同数据描述符
})
属性描述符中的参数都是可选的。

如果属性描述符中省略某些字段，Object.defineProperty方法将自动将其设置为默认值。

如果属性描述符中value,writable,get 和 set 全都没有，则该属性描述符将被认为是数据描述符。

如果属性描述符同时有(value或writable)和(get或set)关键字，将会产生一个异常。

使用赋值操作添加属性在被遍历时会显示，属性的值可以被改变和删除。

使用 Object.defineProperty() 通过额外参数实现更加精确地操作和控制对象的属性。

在ES6中，由于Symbol类型的特殊性，用Symbol类型的值来做对象的key与常规的定义或修改不同，而Object.defineProperty 是定义key为Symbol的属性的方法之一。

configurable 和 writable

configurable属性设置为false，表示该属性描述符是不可配置的，不能在数据和访问器属性类型之间切换。当试图改变不可配置的属性描述符中的属性时会抛出TypeError（例外：要修改属性的当前值与新值相同）。

writable属性设置为false，表示value属性不可被赋值。当试图写入value属性时不会发生改变，也不会引发错误。

注意以下情况

writable:false,configurable:false

属性不可改变（抛出TypeError）

writable:false,configurable:true

value可通过Object.defineProperty方法改变，不能通过赋值改变（不会引发错误）

writable:true,configurable:false

value可通过Object.defineProperty方法和赋值改变，writable可单向改为fasle，其他属性不可改变（抛出TypeError）

writable:true,configurable:true

属性可改变。

getter 和 setter

Object.defineProperty(obj, “a”, {
get : ()=>{
if(this.a === undefined){
this.a = 1
}
return this.a
},
set : (value)=>{
this.a = value + 1
},
configurable : false,
enumerable : false
})
console.log(obj.a) //1
obj.a = 2;
console.log(obj.a) //3
当访问该属性时，getter方法会被执行且没有参数传入，但是会传入this对象（由于继承关系，这里的this并不一定是定义该属性的对象）。

当属性值修改时，setter方法会被执行并接受唯一参数，即该属性修改所传入的数据。

Object.getOwnPropertyDescriptor

Object.getOwnPropertyDescriptor方法可以获取一个对象的自有属性的属性描述符。

var obj = {}
Object.defineProperty(obj, “a”, {
get : ()=>{
if(this.a === undefined){
this.a = 1
}
return this.a
},
set : (value)=>{
this.a = value
},
configurable : false,
enumerable : false
})

const descriptor = Object.getOwnPropertyDescriptor(obj, ‘a’);

console.log(descriptor.configurable);
// false
console.log(descriptor.enumerable);
// false
console.log(obj.a);
// 1
console.log(descriptor.value);
// undefined
Proxy

Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。

语法： new Proxy( obj, handler ) ，obj 为被代理的对象，handler 是一个容纳一批特定属性的占位符对象。

它包含有 Proxy 的各个捕获器（trap）。

所有的捕捉器是可选的。如果没有定义某个捕捉器，那么就会保留源对象的默认行为。其中的一些方法与 Object相同。

handler.get(obj,key) 属性读取操作的捕捉器。

handler.set(obj,key,value) 属性设置操作的捕捉器。

handler.has(obj,key) in 操作符的捕捉器。

handler.deleteProperty(obj,key) delete 操作符的捕捉器。

handler.ownKeys(obj) Object.getOwnPropertyNames 方法和 Object.getOwnPropertySymbols 方法的捕捉器。

handler.apply(obj, _this, args) 函数调用操作的捕捉器。

handler.construct(obj, args) new 操作符的捕捉器。

Object同名方法

handler.getPrototypeOf() 获取原型

handler.setPrototypeOf() 设置原型

handler.isExtensible() 是否可扩展

handler.preventExtensions() 阻止可扩展

handler.getOwnPropertyDescriptor() 获取自有属性对应的属性描述符

handler.defineProperty()

示例：

const obj = {};
const proxy = new Proxy(obj,{
get: function(obj, prop) {
return prop in obj ? obj[prop] : ‘no value’;
}
});
console.log(obj[‘key’]) // undefined
console.log(proxy[‘key’]) // ‘no value’
Reflect

Reflect 是一个内置的对象，它提供拦截 JavaScript 操作的方法。这些方法与proxy handlers的方法相同。与大多数全局对象不同Reflect并非一个构造函数，所以不能通过new运算符对其进行调用，或者将Reflect对象作为一个函数来调用。Reflect的所有属性和方法都是静态的（就像Math对象）。

示例：

const obj = {
key: ‘value’
};
console.log(‘key’ in object) // true
console.log(Reflect.has(obj, ‘key’)) // true

GoodbyeRonnie
关注

0

0

2

专栏目录
ES6之Object.defineProperty 和 Proxy 区别
weixin_40736319的博客
1806
1、Object.defineproperty 用于监听对象的数据变化 语法： Object.defineproperty(obj, key, descriptor) let obj = { age: 11 } let value = ‘xiaoxiao’; //defineproperty有gettter和setter Object.defineproperty(obj, ‘name’,…
高级之路篇六：Object.defineproperty、Proxy与Reflect
HuaiCheng9067的博客
224
1、Object.defineproperty 属于es5范畴。该方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。 Object.defineProperty(obj, prop, descriptor) obj：要在其上定义属性的对象。 prop：要定义或修改的属性的名称。 descriptor：将被定义或修改…

相关推荐
ES6之 Object.defineProperty 和 Proxy_Homyee King的博客
7-26
ES6之 Object.defineProperty 和 Proxy Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。 Object.defineProperty(obj, prop, descriptor)…
小邵教你玩转ES6(二)——Object.defineProperty和Proxy…
8-11
Object.defineProperty这个并不是es6的语法,这个是给一个对象,添加属性,但是目前框架很多实用这个方法,来实现数据劫持,也就是数据双向绑定 // 平时我们这样给一个对象添加属性 letobj={str:”hello swr”} …
Vue双向数据绑定：Object.defineProperty和Proxy
全端菜鸟小姐
965
前言：我们从以前的操作DOM元素到现在的操作数据，从以前的MVC模式到现在的MVVM模式，以及现在深入人心的组件化开发，这个转折我觉得真的是太机智了。 现在我们平常开发主要用到的技术里，可以看到React和小程序是单向数据流，Vue和Angular是双向数据绑定，Angular用的是脏检测，Vue则是数据劫持和订阅者模式，今天我们来聊聊vue的双向数据绑定。 双向数据绑定无非就是，…
JavaScript必备知识点之Object.defineProperty与es6Proxy代理二三事（一）
hello，是翠花呀
125
乍一看proxy就想到了 Nginx 里面的代理。不过今天要分享的不是 Nginx 里的代理，而是 ES6 新增的类Proxy。 代理一词早在 JavaScript 事件委托中有出现(利用事件冒泡向父级添加事件作用于子级)。就是说我不直接操作要作用的对象而是通过“中介”来操作。 事件代理 document.addEventListener(“click”, function(e) { //…
玩转ES6（二）-Object.defineProperty和Proxy代理
frontend_frank的博客
220
Object.definePropertyObject.defineProperty这个并不是es6的语法，这个是给一个对象，添加属性，但是目前框架很多实用这个方法，来实…
ES6 Proxy和Object.defineProperty
qq_17613195的博客
155
Object.defindProperty Proxy new Proxy(target, handler); targer 要拦截的对象 handler 拦截行为对象 var obj = new Proxy({}, { get: function(){ console.log(‘always return 35’); return ‘35’; } }) obj.name;// 35 obj.age;// 35 obj2 = {} obj2.
Javascript观察者模式（Object.defineProperty、Reflect和Proxy实现）
aau88497的博客
83
什么是观察者模式？ 答：在数据发生改变时，对应的处理函数自动执行。函数自动观察数据对象，一旦对象有变化，函数就会自动执行。 参考《原生JavaScript实现观察者模式》（https://blog.csdn.net/lm278858445/article/details/78287492），注释了代码，如下： ES5：Object.defineProperty let…
es6基础 —- 6、Proxy与Reflect vue3.0与2.0 Object.defineProperty的对比
幼儿园老大的博客
152
推头条
Object.defineProperty的缺陷
li123128的博客
6940
　　vue3.0的pre-alpha版代码已经开源了，就像作者之前放出的消息一样，其数据响应这一部分已经由ES6的Proxy来代替Object.defineProperty实现，感兴趣的同学可以看其实现源码。vue都开始使用Proxy来实现数据的响应式了，所以有必要抽点时间了解下Proxy。 　　 　　Object.defineProperty的缺陷 　　 　　说到Proxy，就不得不提Objec…
Proxy 和 Object.defineProperty 区别以及常见使用场景
weixin_40662552的博客
111
在日常开发中，我们需要经常对对象进行对象层面和属性层面的很多操作，既然是操作，那么我们就希望能够具备对这些操作进行切面处理的能力，也即实现代理操作，那么应该怎么做呢？ Object.defineProperty 简单介绍 Object.defineProperty 是 ES5 中一个很重要的数据劫持的方法，它提供了存取器属性get、set，这让我们具备了代理一个对象的属性读写操作以进行切面处理的能力。但是这时候对于其它对对象操作行为的代理方案仍然没有官方的实现方案。 Proxy 简单介绍 Proxy
vue3 为何要用proxy替换Object.defineProperty
zw19940808的博客
152
javaScript es5 提供了Object.defineProperty方法，允许对对象的getter/settet进行拦截，该方法会直接在一个对象上定义一个新属性，或者修改现有属性，并返回此对象。 我们可以理解为是针对对象上的某一个属性做处理的。 语法： Object.defineProperty(obj, prop, descriptor) obj 要定义属性的对象 prop 要定义或修改的属性的名称或Symbol …
vue3.0 尝鲜 — 摒弃 Object.defineProperty，基于 Proxy 的观察者机制探索
weixin_34121282的博客
106
写在前面： 11月16日早上，Vue.js的作者尤大大在 Vue Toronto 的主题演讲中预演了 Vue.js 3.0的一些新特性，其中一个很重要的改变就是Vue3 将使用 ES6的Proxy 作为其观察者机制，取代之前使用的Object.defineProperty。我相信许多同学深有体会，许多面试中Object.defineProperty是vue这个框架一个出现率很高的考察点，一开始大家…
Vue3.0中的 proxy与Vue2.0中的Object.defineProperty()比较
chelflan’s blog
195
Proxy 简介 Proxy 可以理解为，在操作对象时要先经过一层“拦截器”。访问对象时，都必须先经过这一层拦截。这就意味着你可以在拦截里做各种骚操作。 比如，整一个 Proxy 的对象用来对后端返回的数据类型进行类型校验，不通过直接 throw new Error(‘大兄弟，说好的对象，你给我返回一个数组？！’)，记得搭配 try catch 食用，风味更佳！ 让我们先看看怎么使用 Proxy. const p = new Proxy(target, han…
Vue双向绑定原理 从vue2的Object.defineProperty到vue3的proxy
zem
1187
在网上查找资料的时候，看到很多关于Vue双向绑定的文章都直接说是通过Object.defineProperty实现的，但我隐约记得去年看过尤大的视频，记得好像是用proxy实现的，所以又好好找了一下，果然，在vue3.0中，已经改用proxy实现了 双向绑定的简单思路 在谈论vue2和vue3中各自的双向绑定形式前，我们先了解一下基本的思路 要做到双向绑定，即是在我们修改数据时，视图发生变化，而…
ES6 系列之 defineProperty 与 proxy
weixin_33918114的博客
167
前言 我们或多或少都听过“数据绑定”这个词，“数据绑定”的关键在于监听数据的变化，可是对于这样一个对象：var obj = {value: 1}，我们该怎么知道 obj 发生了改变呢？ definePropety ES5 提供了 Object.defineProperty 方法，该方法可以在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。 语法 Object.defineP…
Vue3中proxy相比Vue2.0中object.defineProperty的优点
m0_49210479的博客
43
一、Object.defineProperty 定义：Object.defineProperty()方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象 为什么能实现响应式 通过defineProperty两个属性，get及set get 属性的 getter 函数，当访问该属性时，会调用此函数。执行时不传入任何参数，但是会传入 this 对象（由于继承关系，这里的this并不一定是定义该属性的对象）。该函数的返回值会被用作属性的值 set 属性的…
Vue3.0 尝鲜，Object.defineProperty VS Proxy
大灰狼的小绵羊哥哥的博客
420
编者按：本文转载自掘金专栏，由作者 nightZing 授权奇舞周刊转载 写在前面： 11月16日早上，Vue.js的作者尤大大在 Vue Toronto 的主题演讲中预演了 Vue.js 3.0的一些新特性(https://www.css88.com/archives/10052)) ，其中一个很重要的改变就是Vue3 将使用 ES6的Proxy 作为其观察者机制，取代之前使用的Object.d…
©️2020 CSDN 皮肤主题: 像素格子 设计师:CSDN官方博客 返回首页
关于我们
招贤纳士
广告服务
开发助手

400-660-0108

kefu@csdn.net

在线客服
工作时间 8:30-22:00
公安备案号11010502030143
京ICP备19004658号
京网文〔2020〕1039-165号
经营性网站备案信息
北京互联网违法和不良信息举报中心
网络110报警服务
中国互联网举报中心
家长监护
Chrome商店下载
©1999-2021北京创新乐知网络技术有限公司
版权与免责声明
版权申诉
出版物许可证
营业执照

GoodbyeRonnie

————————————————
版权声明：本文为CSDN博主「GoodbyeRonnie」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_28387069/article/details/83148211