解析 神奇的 Object.defineProperty
这个方法了不起啊。。vue.js和avalon.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),就不能用(wriable 或 value中的任何一个)
set 和 get ,他俩干啥用的的,
var a= {}
Object.defineProperty(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
var a = {
b: {
c:1
},
d:1
}
a.$watch("b.c",()=>console.log("哈哈哈"))
解析 神奇的 Object.defineProperty的更多相关文章
- 解析神奇的 Object.defineProperty
这个方法了不起啊..vue.js是通过它实现双向绑定的..而且Object.observe也被草案发起人撤回了..所以defineProperty更有必要了解一下了. 几行代码看他怎么用 var a= ...
- 神奇的Object.defineProperty
vue.js和avalon.js 都是通过它实现双向绑定的. 对象是由多个名/值对组成的无序的集合.对象中每个属性对应任意类型的值.定义对象可以使用构造函数或字面量的形式: var obj={}; o ...
- 神奇的 Object.defineProperty 解释说明
原文 : https://segmentfault.com/a/1190000004346467?utm_source=tuicool&utm_medium=referral 这个方法了不起啊 ...
- vue原理之-神奇的Object.defineProperty
vue2.0通过defineProperty进行数据双向绑定 例如:(他接受三个参数,都是必填!) var a= {} Object.defineProperty(a,"b",{ ...
- Vue.js 源码学习笔记 -- 分析前准备2 -- Object.defineProperty
解析神奇的 Object.defineProperty 几行代码看他怎么用 var a= {} Object.defineProperty( a, "b", { value ...
- 双向数据绑定实现之Object.defineProperty
vue.js利用的是es5的 defineproperty 特性实现的双向数据绑定,了解一下基本原理. 举例 var person= {}; Object.defineProperty(person, ...
- 解析Object.defineProperty的作用
对象是由多个名/值对组成的无序的集合.对象中每个属性对应任意类型的值. 定义对象可以使用构造函数或字面量的形式: 除了以上添加属性的方式,还可以使用Object.defineProperty定义新属性 ...
- 16、前端知识点--Object.defineProperty 的用法+双向数据绑定原理解析
一.Object.defineProperty 的用法 Object.defineProperty 可以用于给对象添加更新属性. <script> // Object.defineProp ...
- 深入了解Object.defineProperty
原来写文章都是一次写两三个小时写完,偶尔看到一个人的博客了解到还有草稿箱这个功能,所以以后写文章的时候就舒服多了哈哈,可以存起来再发,不需要一口气写完了 最近一直在看JavaScript高级程序设计, ...
随机推荐
- 华为S5300系列交换机V100R005SPH008热补丁
S23_33_53-V100R005SPH008.pat 附件: 链接:https://pan.baidu.com/s/1XfIQ55g5pWI9aqmM7LHUew 密码:f2mu
- poj 1028 Web Navigation(模拟)
题目链接:http://poj.org/problem? id=1028 Description Standard web browsers contain features to move back ...
- vs2017与docker
基本需求 系统 win10 vs2017 docker 步骤 1.开启系统的hyper-v 2. 重启电脑 3.安装docker 下载地址:https://docs.docker.com/docker ...
- java zxing实现二维码生成和解析zxing实现二维码生成和解析
原文:https://www.cnblogs.com/zhangzhen894095789/p/6623041.html zxing实现二维码生成和解析 二维码 zxing 二维码的生成与解析 ...
- Spring初始化完成后直接执行一个方法,初始化数据(解决方法被重复执行两次的情况)
在做WEB项目时,经常在项目第一次启动时利用WEB容器的监听.Servlet加载初始化等切入点为数据库准备数据,这些初始化数据 是系统开始运行前必须的数据,例如权限组.系统选项.默认管理员等等.但是项 ...
- ARC 特性
ResultVC *myResultVC = [[ResultVC alloc]initWithNibName:@"ResultVC" bundle:nil]; [self.vie ...
- ExtJS创建选项卡
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 【docker】linux系统centOS 7上安装docker
要求: 一个centOS 7系统 虚拟就上安装CentOS 7步骤 本文操作在本机上使用xshell连接虚拟机上的centOS 7进行操作 1.Docker 要求 CentOS 系统的内核版本高于 ...
- ConcurrentBag扩展 批量加入
public static void AddRange<T>(this ConcurrentBag<T> @this, IEnumerable<T> toAdd) ...
- Windows Embedded Compact 7 开发环境搭建
第一步,我们会定制一个运行在Vitual PC上的image.要完成这个任务,你要保证你的电脑上安装了:1.Windows Virtual PC 2.Visual Studio 2008+SP1 3. ...