vue.js利用Object.defineProperty实现双向绑定


Posted in Javascript onMarch 09, 2017

Object.defineProperty这个方法了不起啊,vue.js是通过它实现双向绑定的。。而且Object.observe也被草案发起人撤回了。。所以defineProperty更有必要了解一下了。

几行代码看他怎么用

var a= {}
Object.defineProperty(a,"b",{
 value:123
})
console.log(a.b);//123

很简单,它接受三个参数,而且都是必填的。。

传入参数

第一个参数:目标对象
第二个参数:需要定义的属性或方法的名字。
第三个参数:目标属性所拥有的特性。(descriptor)

前两个参数不多说了,一看代码就懂,主要看第三个参数descriptor,看看有哪些取值

descriptor

他又以下取值,我们简单认识一下,后面例子,挨个介绍。

  • value:属性的值(不用多说了)
  • writable:如果为false,属性的值就不能被重写,只能为只读了
  • configurable:总开关,一旦为false,就不能再设置他的(value,writable,configurable)
  • enumerable:是否能在for...in循环中遍历出来或在Object.keys中列举出来。
  • get:一会细说
  • set:一会细说

descriptor 默认值

我们再看看第一个例子

var a= {}
Object.defineProperty(a,"b",{
 value:123
})
console.log(a.b);//123

我们只设置了 value,别的并没有设置,但是第一次的时候 可以简单的理解为(暂时这样理解)它会默认帮我们把writable,configurable,enumerable。都设上值,而且值还都是false。。也就是说,上面代码和下面是等价的的(仅限于第一次设置的时候)。

var a= {}
Object.defineProperty(a,"b",{
 value:123,
 writable:false,
 enumerable:false,
 configurable:false
})
console.log(a.b);//123

以上非常重要哦。。并且以上理解对set 和 get 不起作用哦

configurable

总开关,第一次设置 false 之后,,第二次什么设置也不行了,比如说

var a= {}
Object.defineProperty(a,"b",{
 configurable:false
})
Object.defineProperty(a,"b",{
 configurable:true
})
//error: Uncaught TypeError: Cannot redefine property: b

就会报错了。

注意上面讲的默认值。。。如果第一次不设置它会怎样。。会帮你设置为false。。所以。。第二次。再设置他会怎样?。。对喽,,会报错

writable

如果设置为fasle,就变成只读了。

var a = {}; 

Object.defineProperty(o, "b", { 
 value : 123,
 writable : false });

console.log(a.b); // 打印 37
a.b = 25; // 没有错误抛出(在严格模式下会抛出,即使之前已经有相同的值)
console.log(o.a); // 打印 37, 赋值不起作用。

enumerable

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

var a= {}
Object.defineProperty(a,"b",{
 value:3445,
 enumerable:true
})
console.log(Object.keys(a));// 打印["b"]

改为false

var a= {}
Object.defineProperty(a,"b",{
 value:3445,
 enumerable:false //注意咯这里改了
})
console.log(Object.keys(a));// 打印[]

for...in 类似,不赘述了

set 和 get

在 descriptor 中不能同时设置访问器(get 和 set)和 wriable 或 value,否则会错,就是说想用 get 和 set,就不能用 writable 或 value 中的任何一个。

set 和 get,他俩干啥用的的。

var a= {}
Object.definePrope`请输入代码`rty(a,"b",{
 set:function(newValue){
 console.log("你要赋值给我,我的新值是"+newValue)
 },
 get:function(){
 console.log("你取我的值")
 return 2 //注意这里,我硬编码返回2
 }
})
a.b =1 //打印 你要赋值给我,我的新值是1
console.log(a.b) //打印 你取我的值
     //打印 2 注意这里,和我的硬编码相同的

简单来说,这个 “b” 赋值或者取值的时候会分别触发 set 和 get 对应的函数。

这就是实现observe的关键啊。

下一篇,我会分析vue的observe的实现源码,聊聊自己如何一步一步实现$watch。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript mapreduce工作原理简析
Nov 25 Javascript
jquery click([data],fn)使用方法实例介绍
Jul 08 Javascript
jQuery实现延迟跳转的方法
Jun 05 Javascript
JavaScript中利用jQuery绑定事件的几种方式小结
Mar 06 Javascript
JavaScript 消息框效果【实现代码】
Apr 27 Javascript
JS简单判断滚动条的滚动方向实现方法
Apr 28 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
Oct 26 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
Dec 11 Javascript
微信小程序实现订单倒计时
Nov 01 Javascript
vue发送websocket请求和http post请求的实例代码
Jul 11 Javascript
js实现简单的倒计时
Jan 28 Javascript
代码解析React中setState同步和异步问题
Jun 03 Javascript
javascript遍历json对象的key和任意js对象属性实例
Mar 09 #Javascript
微信小程序 五星评价功能的实现
Mar 09 #Javascript
javascript实现数据双向绑定的三种方式小结
Mar 09 #Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
Mar 09 #Javascript
Vue监听数据对象变化源码
Mar 09 #Javascript
html+javascript+bootstrap实现层级多选框全层全选和多选功能
Mar 09 #Javascript
Node.js常用工具之util模块
Mar 09 #Javascript
You might like
PHP永久登录、记住我功能实现方法和安全做法
2015/04/27 PHP
PHP实现通过get方式识别用户发送邮件的方法
2015/07/16 PHP
PHP简单实现断点续传下载的方法
2015/09/25 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
JQuery 学习笔记 选择器之三
2009/07/23 Javascript
Exjs 入门篇
2010/04/07 Javascript
用js调用迅雷下载代码的二种方法
2013/04/15 Javascript
javascript中的this详解
2014/12/08 Javascript
JS动态创建DOM元素的方法
2015/06/09 Javascript
用Move.js配合创建CSS3动画的入门指引
2015/07/22 Javascript
JavaScript九九乘法口诀表的简单实现
2016/10/04 Javascript
Javascript 正则表达式校验数字的简单实例
2016/11/02 Javascript
微信小程序云开发之云函数详解
2019/05/16 Javascript
layui动态加载多表头的实例
2019/09/05 Javascript
js观察者模式的弹幕案例
2020/11/23 Javascript
[41:17]VG vs Optic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python中单例常用的几种实现方法总结
2018/10/13 Python
Python定时发送消息的脚本:每天跟你女朋友说晚安
2018/10/21 Python
Python pandas用法最全整理
2019/08/04 Python
python matplotlib库直方图绘制详解
2019/08/10 Python
python的scipy实现插值的示例代码
2019/11/12 Python
python实现超级玛丽游戏
2020/03/18 Python
Selenium执行完毕未关闭chromedriver/geckodriver进程的解决办法(java版+python版)
2020/12/07 Python
css3个性化字体_动力节点Java学院整理
2017/07/12 HTML / CSS
CSS3图片旋转特效(360/60/-360度)
2013/10/10 HTML / CSS
一款利用css3的鼠标经过动画显示详情特效的实例教程
2014/12/29 HTML / CSS
澳大利亚首个在线预订旅游网站:Wotif
2017/07/19 全球购物
HomeAway澳大利亚:预订你的度假屋,公寓、度假村、别墅等
2019/02/20 全球购物
北美主要的汽车零部件零售商:AutoShack.com
2019/02/23 全球购物
美体小铺奥地利官方网站:The Body Shop奥地利
2019/04/11 全球购物
门卫班长岗位职责
2013/12/15 职场文书
保卫科工作岗位职责
2014/03/01 职场文书
难忘的一天教学反思
2014/04/30 职场文书
优秀教师推荐材料
2014/12/16 职场文书
苦儿流浪记读书笔记
2015/07/01 职场文书
python+pyhyper实现识别图片中的车牌号思路详解
2022/12/24 Python