解析神奇的 Object.defineProperty

pinecone 发布于2019-08-19 17:27 / 2796人阅读

摘要：是通过它实现双向绑定的。。而且也被草案发起人撤回了。。传入参数第一个参数目标对象第二个参数需要定义的属性或方法的名字。第三个参数目标属性所拥有的特性。打印没有错误抛出在严格模式下会抛出，即使之前已经有相同的值打印，赋值不起作用。

这个方法了不起啊。。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。

云服务器 GPU云服务器神奇的网站一个神奇的网站幻云我的世界神奇宝贝服务器我的世界神奇宝贝幻云服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78530.html

详解JavaScript之神奇的Object.defineProperty

摘要：与当与同时为时，属性不能重新使用定义，严格模式下会报错示例云麒报错当或者为时，属性可以重新使用定义，这一点读者不妨自行测试。摘要： JavaScript有个很神奇的Object.defineProperty()，了解一下？ =与Object.defineProperty 为JavaScript对象新增或者修改属性，有两种不同方式：直接使用=赋值或者使用Object.definePro...

baishancloud 2019-08-26 17:40 评论0 收藏0
vue 源码分析之如何实现 observer 和 watcher

摘要：所以，我们是不是应该写一个消息订阅器呢这样的话，一触发方法，我们就发一个通知出来，然后，订阅这个消息的，就会怎样。。。截止到现在，在我们只考虑最简单情况下。。关于的新文章行代码，理解和分析的响应式架构本文能帮你做什么？。。好奇vue双向绑定的同学，可以部分缓解好奇心还可以帮你了解如何实现$watch 前情回顾我之前写了一篇没什么干货的文章。。并且刨了一个大坑。。今天。。打算来填一天...

shiina 2019-08-19 17:32 评论0 收藏0
js面向对象浅谈（一）

摘要：引言对于面向对象，相信大家一定不陌生。创建对象面向对象第一步是什么答创建对象。构造函数优于工厂模式也是在于它可以通过辨识出一类的对象。引言对于面向对象，相信大家一定不陌生。最近看了一些关于es6面向对象的知识，正好通过这篇文章把关于面向对象的东西给串起来分享给大家。什么是对象很多人会鄙视我，说你这篇文章是骗骗刚入行的小朋友的吧，什么是对象我还能不知道？骂我的吃瓜群众先冷静一下，...

lastSeries 2019-08-20 16:34 评论0 收藏0
利用 JavaScript 数据绑定实现一个简单的 MVVM 库

摘要：和刷新函数是一对多的关系，即一个可以有任意多个处理它的回调函数刷新函数，比如和两个指令共用一个数据模型字段。添加数据订阅实现方式为建立缓存回调函数的数组缓存回调函数当数据模型的字段发生改变时，就会触发缓存数组中订阅了的所有回调。 MVVM 是 Web 前端一种非常流行的开发模式，利用 MVVM 可以使我们的代码更专注于处理业务逻辑而不是去关心 DOM 操作。目前著名的 MVVM 框架有...

hzx 2019-08-19 18:00 评论0 收藏0
ReactElement源码解析

摘要：在源码添加的注释在。解析的主要调用如下当然在下还有些其他的调用。此外，冻结一个对象后该对象的原型也不能被修改。方法封闭一个对象，阻止添加新属性并将所有现有属性标记为不可配置。前言 ReactElement并不像之前所谈的PureComponent和Component那样被频繁的显示使用，但我估计他应该是在react暴露出的api中被调用最为频繁的，关于此看完后面便知。ReactEle...

mumumu 2019-08-23 16:52 评论0 收藏0