您的位置:首页> 前端教程> JS教程
文章导航

configurable、enumerable和writable

2018-10-18 12:32| 作者: admin| 查看: 1674| 评论: 0|来自: 蚂蚁部落

对象是JavaScript中最为常见的语法结构。

代码实例如下:

[JavaScript] 纯文本查看 复制代码
let antzone={
  webName:"蚂蚁部落",
  show:function(){
    console.log(this.webName);
  }
}

上面是一个对象直接量,具有两个属性(show也是一个属性,只不过它的属性值是一个函数)。

可见属性是由属性名和属性值构成,再来看一段代码实例:

[JavaScript] 纯文本查看 复制代码运行代码
let antzone={
  webName:"蚂蚁部落",
  show:function(){
    console.log(this.webName);
  }
}
antzone.webName="百度";
console.log(antzone.webName);

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/18/123341reec0puchcak9eok.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

将webName属性值修改为"百度",很自然打印结果是"百度"。

上面的操作看起来有点幼稚,实在过于基础,再来看一段代码实例:

[JavaScript] 纯文本查看 复制代码运行代码
Math.PI=88;
console.log(Math.PI);

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/18/123415sxcxe2ggz3i23dw3.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码修改Math.PI属性值,但并未成功。

由此可见,对象属性并不只有属性名和属性值这么简单。

一.属性分类:

当前JavaScript中属性大致可以分为两类:

(1).数据属性。

(2).访问器属性。

本文只介绍数据属性,关于访问器属性可以参阅JavaScript get set访问器一章节。

二.数据属性特性:

数据属性具有四个描述其行为的特性,分别如下:

(1).[[Configurable]]:描述属性是否可以被删除,特性是否可以被改变,或是否可以被修改为访问器属性。

(2).[[Enumerable]]:描述属性是否可以被遍历。

(3).[[Writable]]:描述属性是否是可写的。

(4).[[Value]]:属性值就保存在此位置,读取或者写入属性均操作此处。

特别说明:把名称放入两个中括号中表示是内部属性,不能直接访问它们。

看到这里可能读者还不太明白,不用担心,后面会通过代码实例对它们进行详细介绍。

三.设置属性特性:

大多数情况下,创建一个对象不需要显式设置属性特性。

代码实例如下:

[JavaScript] 纯文本查看 复制代码运行代码
let antzone={
    webName:"蚂蚁部落",
    address:"青岛市南区"
}  
console.log(Object.getOwnPropertyDescriptor(antzone,"webName"));

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/18/123521b8fmcc1r8ouuur8c.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

分析如下:

(1).默认状态下,configurable、enumerable和writable特性值为true。

(2).属性值存储在Value特性处。

再来看一段代码实例:

[JavaScript] 纯文本查看 复制代码运行代码
let antzone = {}; 
Object.defineProperty(antzone,"webName",{
  value: "蚂蚁部落"
});
console.log(Object.getOwnPropertyDescriptor(antzone,"webName"));

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/18/123548wffc35g33q53cz3g.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

分析如下:

(1).通过Object.defineProperty方法创建的属性,configurable、enumerable和writable特性值默认为false。

(2).属性值存储在Value特性处。

四.各个特性介绍:

(1).configurable特性:

规定属性是否可以被delete,特性是否可以被更改,或者是否可以将数据属性修改成访问器属性。

如果值为true,那么上述操作都是允许的,否则被禁止。

[JavaScript] 纯文本查看 复制代码运行代码
let antzone = {
  url:"http://www.softwhy.com"
}; 
Object.defineProperty(antzone,"webName",{
  configurable: false,
  value: "蚂蚁部落",
});
console.log(delete antzone.url);
console.log(delete antzone.webName);

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/18/123620ns1778r9609mz7ij.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

如果属性configurable特性值为false,那么它是无法被delete删除。

[JavaScript] 纯文本查看 复制代码运行代码
"use strict";
let antzone = {
  url:"http://www.softwhy.com"
}; 
Object.defineProperty(antzone,"webName",{
  configurable: false,
  value: "蚂蚁部落",
});
Object.defineProperty(antzone,"webName",{
  configurable: true,
});

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/18/123647kvzaivxhvfiwfjex.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

在严格模式下,如果属性的configurable特性值为false,configurable特性自身之也无法改变。

如果修改将会报错,非严格模式下,虽然不会报错,但是修改不会成功。

总结一句话,configurable特性值为false,value、writable、enumerable与configurable特性值都不能修改。

但是有一个例外,writable特性值可以由true改为false,由false改为true不允许。

(2).writable特性:

如果特性值为false,那么属性是只读的。

[JavaScript] 纯文本查看 复制代码运行代码
"use strict";
let antzone = {
  url:"http://www.softwhy.com"
}; 
Object.defineProperty(antzone,"url",{
  writable:false
});
antzone.url="baid.com"

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/18/123714ry43y1lmvxw5xyqf.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

严格模式下,给只读属性赋值会报错,非严格模式下虽然不会报错,但是赋值不会成功。

(3).enumerable特性:

此特性用来规定属性的可枚举性,如果为false则是不可枚举。

代码实例如下:

[JavaScript] 纯文本查看 复制代码运行代码
"use strict";
let antzone = {
  url:"http://www.softwhy.com",
  webName:"蚂蚁部落"
}; 
Object.defineProperty(antzone,"url",{
  enumerable:false
});
for(let prop in antzone){
  console.log(prop);
}

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/18/123804qyvp8kg68u4ptrbz.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

enumerable特性值为false,那么此属性就是不可枚举的。

(3).value特性:

这个很简单,就是用来存储属性值的,不多介绍。

2

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (2 人)

最新评论

返回顶部