js中神奇的Object.defineProperty方法
2017-02-28 15:06
591 查看
前端虫 2017-02-09 00:14
这个方法可牛比了。这么说吧,vue.js是通过它实现双向绑定的。俗称属性拦截器。而且专门用来监控对象属性变化的Object.observe方法也被草案发起人撤回了(此方法在node环境中仍能使用)。可见defineProperty的威力之大。
干货在后面,绝对惊喜。
首先看一下官方的定义:
Object.defineProperty()
方法会直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象。
语法
参数
obj
需要定义属性的对象。
prop
需定义或修改的属性的名字。
descriptor
将被定义或修改的属性的描述符。
返回值
返回传入函数的对象,即第一个参数obj
对象里目前存在的属性描述符有两种主要形式:数据描述符和存取描述符。数据描述符是一个拥有可写或不可写值的属性。存取描述符是由一对 getter-setter 函数功能来描述的属性。描述符必须是两种形式之一;不能同时是两者。
数据描述符和存取描述符均具有以下可选键值:
configurable
当且仅当该属性的 configurable 为 true 时,该属性描述符才能够被改变,也能够被删除。默认为 false。
enumerable
当且仅当该属性的 enumerable 为 true 时,该属性才能够出现在对象的枚举属性中。默认为 false。
数据描述符同时具有以下可选键值:
value
该属性对应的值。可以是任何有效的 JavaScript 值(数值,对象,函数等)。默认为 undefined。
这也就是为神马
writable
当且仅当该属性的 writable 为 true 时,该属性才能被赋值运算符改变。默认为 false。
存取描述符(第三个参数对象)同时具有以下可选键值:
get
一个给属性提供 getter 的方法,如果没有 getter 则为undefined。当我们读取某个属性的时候,其实是在对象内部调用了该方法,此方法必须要有return语句。该方法返回值被用作属性值。默认为 undefined。
set
一个给属性提供 setter 的方法,如果没有 setter 则为 undefined。该方法将接受唯一参数,并将该参数的新值分配给该属性。默认为 undefined。也就是说,当我们设置某个属性的时候,实际上是在对象的内部调用了该方法。
要注意的一点是:在 descriptor 中不能同时设置访问器(get 和 set)和 wriable 或 value,否则会错,就是说想用 get 和 set,就不能用 writable 或 value 中的任何一个。
get和set是我们今天要重点讨论的两个方法,先看一下他们的简单实例:
虽然我将a.b的值设置成了1,但是因为我在get方法中始终返回了2,所以a.b的值一直是2。
那么,这就好玩儿了:我们可以在页面监听某个变量,当变量发生变化的时候,我们就更新对应的视图。由数据来驱动视图的更新,是不是很熟悉?是的,vue .js的核心思想就是这个。我们写个小例子:
视图的变化过程:
最开始的视图
1秒后的视图
2秒后的视图
大家是不是觉得没用到get呢?后面再慢慢更新,写太长了怕大伙受不鸟,慢慢来。
有啥疑问,在评论区留言,有疑问一定回复。老铁们,双击666,点一波关注,反正也不会怀孕。
这个方法可牛比了。这么说吧,vue.js是通过它实现双向绑定的。俗称属性拦截器。而且专门用来监控对象属性变化的Object.observe方法也被草案发起人撤回了(此方法在node环境中仍能使用)。可见defineProperty的威力之大。
干货在后面,绝对惊喜。
首先看一下官方的定义:
Object.defineProperty()
方法会直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象。
语法
Object.defineProperty(obj,prop,descriptor)
参数
obj
需要定义属性的对象。
prop
需定义或修改的属性的名字。
descriptor
将被定义或修改的属性的描述符。
返回值
返回传入函数的对象,即第一个参数obj
对象里目前存在的属性描述符有两种主要形式:数据描述符和存取描述符。数据描述符是一个拥有可写或不可写值的属性。存取描述符是由一对 getter-setter 函数功能来描述的属性。描述符必须是两种形式之一;不能同时是两者。
数据描述符和存取描述符均具有以下可选键值:
configurable
当且仅当该属性的 configurable 为 true 时,该属性描述符才能够被改变,也能够被删除。默认为 false。
enumerable
当且仅当该属性的 enumerable 为 true 时,该属性才能够出现在对象的枚举属性中。默认为 false。
数据描述符同时具有以下可选键值:
value
该属性对应的值。可以是任何有效的 JavaScript 值(数值,对象,函数等)。默认为 undefined。
这也就是为神马
writable
当且仅当该属性的 writable 为 true 时,该属性才能被赋值运算符改变。默认为 false。
存取描述符(第三个参数对象)同时具有以下可选键值:
get
一个给属性提供 getter 的方法,如果没有 getter 则为undefined。当我们读取某个属性的时候,其实是在对象内部调用了该方法,此方法必须要有return语句。该方法返回值被用作属性值。默认为 undefined。
set
一个给属性提供 setter 的方法,如果没有 setter 则为 undefined。该方法将接受唯一参数,并将该参数的新值分配给该属性。默认为 undefined。也就是说,当我们设置某个属性的时候,实际上是在对象的内部调用了该方法。
要注意的一点是:在 descriptor 中不能同时设置访问器(get 和 set)和 wriable 或 value,否则会错,就是说想用 get 和 set,就不能用 writable 或 value 中的任何一个。
get和set是我们今天要重点讨论的两个方法,先看一下他们的简单实例:
虽然我将a.b的值设置成了1,但是因为我在get方法中始终返回了2,所以a.b的值一直是2。
那么,这就好玩儿了:我们可以在页面监听某个变量,当变量发生变化的时候,我们就更新对应的视图。由数据来驱动视图的更新,是不是很熟悉?是的,vue .js的核心思想就是这个。我们写个小例子:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <div id="test">这是一个测试</div> <script> var view = document.getElementById("test"); var data = {}; var i=0; Object.defineProperty(data, "b", { set: function(newValue) { //当data.b的值改变的时候更新#test的视图 view.textContent=newValue; }, get: function() { } }); setInterval(function(){ i++; data["b"] = "data.b的值更新了,我要更新视图"+i; },1000); </script> </body> </html>
视图的变化过程:
最开始的视图
1秒后的视图
2秒后的视图
大家是不是觉得没用到get呢?后面再慢慢更新,写太长了怕大伙受不鸟,慢慢来。
有啥疑问,在评论区留言,有疑问一定回复。老铁们,双击666,点一波关注,反正也不会怀孕。
相关文章推荐
- JS中的双向数据绑定及Object.defineProperty方法
- js中的Object.defineProperty方法
- JS中的双向数据绑定及Object.defineProperty方法
- ECMA5中的Object.defineProperty()方法
- JavaScript使用Object.defineProperty方法实现双数据绑定
- JS中的Object.assign()、Object.create()、Object.defineProperty()
- 解析神奇的 Object.defineProperty
- JS面向对象定义多个属性--object.defineProperties()方法
- includes方法 使用 Object.defineProperty 扩展 ,解决不兼容问题
- js object.create()、Object.defineproperty()、,Object.keys()...for..in,for..each
- js的defineProperty方法
- 面试题:(考察Object.defineProperty(obj,prop,descriptor) 的get方法)
- 使用Object.defineProperty实现简单的js双向绑定
- JS的Object.defineProperty
- Object.defineProperty方法
- ECMAScript5 Object的新属性方法(包含Object.create()、Object.defineProperty()等)
- 解析 神奇的 Object.defineProperty
- JS Object.getOwnPropertyDescriptor()和Object.defineProperty()
- JavaScript Object.defineProperty()方法详解
- Vue.js 源码学习笔记 -- 分析前准备2 -- Object.defineProperty