理解Object.defineProperty

难受啊… 本来想看mvvm的源码,但是发现对这个属性的理解并不深入,所以决定重新复习一下此属性,好气啊啊啊啊啊...

首先 让我抄点儿代码吧...

语法

Object.defineProperty(obj, prop, descriptor)

参数

  • obj

    要在其上定义属性的对象。

  • prop

    要定义或修改的属性的名称。

  • descriptor

    将被定义或修改的属性描述符。

这些都是mdn上抄的...

当然,之前对这个属性有过了解到朋友应该知道,前面两个参数都是来打酱油的…,所以 我们把重点放在第三个参数。

descriptor(属性描述符)是一个对象,分别有一下属性

configurable

当且仅当该属性的 configurable 为 true 时,该属性描述符才能够被改变,同时该属性也能从对应的对象上被删除。默认为 false

当configurable 为 true 时

var obj = {}

Object.defineProperty(obj,"name",{
  configurable: true,
  enumerable: true,
  value: "kjj",
  writable: true
})

console.log(obj)
delete obj.name
console.log(obj)

执行结果是
[object Object] {
  name: "kjj"
}
[object Object] { ... }

可见 configurable为true时,对象定义的属性是可以删除的。

当configurable 为 false 时

var obj = {}

Object.defineProperty(obj,"name",{
  configurable: false,
  enumerable: true,
  value: "kjj",
  writable: true
})

console.log(obj)
delete obj.name
console.log(obj)

执行结果是
[object Object] {
  name: "kjj"
}
[object Object] {
  name: "kjj"
}

可见configurable为false时,对象定义的属性是不可以删除的

enumerable

当且仅当该属性的enumerabletrue时,该属性才能够出现在对象的枚举属性中。默认为 false

数据描述符同时具有以下可选键值:

什么是枚举呢,啊啊啊啊…反正我记得好像是用for … in 来区分

Object.defineProperty(obj,"name",{
 configurable: true,
 enumerable: true,
 value: "kjj",
 writable: true
})

Object.defineProperty(obj,"age",{
 configurable: true,
 enumerable: false,
 value: 20,
 writable: true
})

obj.hobby = "sleep"

for(var i in obj) {
 console.log(i)
}

执行结果为 
"name"
"hobby"
所以 大家应该理解了吧,2333333...

value

该属性对应的值。可以是任何有效的 JavaScript 值(数值,对象,函数等)。默认为 undefined

这个应该好理解,就是定义属性的指

writable

当且仅当该属性的writabletrue时,value才能被赋值运算符改变。默认为 false

这个属性就是决定该属性是否可以改变,话不多说,直接上例子

var obj = {}
Object.defineProperty(obj,"name",{
  configurable: true,
  enumerable: true,
  value: "hahha",
  writable: true
})

Object.defineProperty(obj,"age",{
  configurable: true,
  enumerable: true,
  value: 20,
  writable: false
})

obj.name = "zzx"
obj.age = 30

console.log(obj)

答案是
[object Object] {
  age: 20,
  name: "zzx"
}
因为 name 属性的writable为true所以可以改变,而age属性的writable属性为false,所以 age 不能改变啊

在讲set和get之前 我们要明白一个东西,下面图抄自mdn

configurable enumerable value writable get set
数据描述符 Yes Yes Yes Yes No No
存取描述符 Yes Yes No No Yes Yes

存取描述符同时具有以下可选键值

get

var obj = {}
var name = "kuangjiajia"

Object.defineProperty(obj,'name',{
  configurable: true,
  enumerable: true,
  get: function() {
    console.log("I get the Value")
    return name
  },
  set: function(val) {
    console.log("I change it")
    name = val
  }
})

console.log(obj.name)
obj.name = "zhuzhanxuan"
console.log(obj.name)

执行答案
"I get the Value"
"kuangjiajia"
"I change it"
"I get the Value"
"zhuzhanxuan"

一个给属性提供 getter 的方法,如果没有 getter 则为 undefined。该方法返回值被用作属性值。默认为 undefined

set

一个给属性提供 setter 的方法,如果没有 setter 则为 undefined。该方法将接受唯一参数,并将该参数的新值分配给该属性。默认为 undefined

默认情况

情况一 obj直接赋值

var obj = {}
obj.name = "kuangjiajia"
for(var i in obj) {
  console.log(i)
}

delete obj.name
console.log(obj)

执行结果 
"name"
[object Object] { ... }
所以可以看出 enumrable 的值为true,writable 的值为 true, configurable为true

情况2 使用了Object.defineProperty 但是什么都没有用

var obj = {}

Object.defineProperty(obj,'name',{})
console.log(obj)
obj.name = "asd"
for(var i in obj) {
  console.log(i)
}

执行的结果
[object Object] { ... }

未完待续... 等我看完mvvm补充实例吧

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,635评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,628评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,971评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,986评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,006评论 6 394
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,784评论 1 307
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,475评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,364评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,860评论 1 317
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,008评论 3 338
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,152评论 1 351
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,829评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,490评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,035评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,156评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,428评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,127评论 2 356

推荐阅读更多精彩内容

  • 第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行(line),也就是一...
    悟名先生阅读 4,150评论 0 13
  • 1、简介 我们知道对象是由多个名/值对组成的无序集合,对象的每个属性可以有任何类型的值,如: 按照mdn的定义,O...
    七_五阅读 464评论 0 0
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,673评论 18 139
  • 原文 对象是由多个名/值对组成的无序的集合。对象中每个属性对应任意类型的值。定义对象可以使用构造函数或字面量的形式...
    谷子多阅读 256评论 0 0
  • 函数和对象 1、函数 1.1 函数概述 函数对于任何一门语言来说都是核心的概念。通过函数可以封装任意多条语句,而且...
    道无虚阅读 4,566评论 0 5