3/6 JS对象 数据属性 和 访问器属性

写在前面

　　有错请给我说一哈

　　...

---

 

数据属性

　　数据属性中 有两个 和 访问器属性 有交叉 交叉的是 [[Configurable]] [[Enumerable]]

　　数据属性 分为 [[Configurable]] [[Enumerable]] [[Writable]] [[Value]]

　　下面有一个比较长的代码来分别测试 他们的作用

　　这些属性都不能直接修改 必须通过 Object.defineProperty来修改

　　[[Value]] 就是设置值...这个不用讲...

// [[Configurable]] [[Enumerable]] [[Writable]] [[Value]] 内部属性能不能修改 “数据属性”
// 可以通过 Object.defineProperty 改变

// [[Configurable]] 主要是让某个属性 是否可以进行配置 :delete、修改value等 ( configure的意思 ) 
let person_1 = new Object();
Object.defineProperty(person_1,"name",{
    configurable : false,
    value : "Yang", // 设置属性 name 的值
})
person_1.name = "YangErzi"; // 检测是否可以 修改属性
delete person_1.name;       // 检测是否可以 删除属性
person_1.sex = "female";    // 验证其他的属性 是否会受影响
person_1.sex = "male";
console.log(person_1);      // {sex:"male",name:"Yang"}

// [[Enumerable]] 是否可以用FOR-IN来枚举对象中的属性 只要设置了这个值 除非用 hasOwnProperty 不然该属性虽然可以访问 但是某些方法是访问不到的
let person_2 = new Object();
Object.defineProperty(person_2,"name",{
    enumerable:false,
    value:"Yang",
})
person_2.sex = "female";
console.log(person_2); // {sex:"female",name:"Yang"}
// 验证是否name属性可以被枚举出来
for (const key in person_2) {
    if (Object.hasOwnProperty.call(person_2, key)) {
        console.log(key+":"+person_2[key]);
    }
} // sex:female
// 验证key是否存在 name 
console.log(person_2.hasOwnProperty("name")); // true
// 验证person_2的key多少个
console.log(Object.keys(person_2)); // ["sex"]

// [[Wirtable]] 属性设置为只读 不能修改 与 Configure 有些时候有冲突
let person_3 = {name:"Yang"};
Object.defineProperty(person_3,"name",{
    writable:false,
})
person_3.name = "YangNazi"; // 验证是否可以修改
console.log(person_3); // {name:"Yang"}
// 与 Configurable 起冲突的情况
Object.defineProperty(person_3,"sex",{
    configurable:false,
    value:"female",
})
// 以下代码会报错 Uncaught TypeError: Cannot redefine property: sex
// 不能够重新定义属性 sex
Object.defineProperty(person_3,"sex",{
    writable:false,
    value:"male",
})
// 在多次指定同一个属性的时候 第一次设置了 configurable 为 false 后面的无论设置什么都会报错
console.log(person_3); // {name:"Yang"}

// 默认情况: 在调用 defineProperty 什么都没有说明的时候 是全部设置为false

访问器属性

　　访问器属性有

　　[[Configurable]] [[Enumerable]] [[Get]] [[Set]]

　　和面向对象编程的那个东西很像

　　前两个就不做说明了 前面的一坨代码 已经写得比较清楚了

　　对于Get 和 Set 来说

　　感觉作用不是很大 最主要的作用还是 我觉得就是 调整数据结构

　　对于 高级程序设计 的例子来说 

let person_4 = {
    name_:"Yang",
    times:0, // 改名次数
}
Object.defineProperty(person_4,"name",{
    get(){
        return this.name_;
    },
    set(newValue){
        this.name_ = newValue; // 注意这里是 this.name_
        this.times += 1; // 每一次 修改 改名次数加一
    }
})

console.log(person_4.name); // Yang
person_4.name = "YangNaizi";
console.log(person_4.name); // YangNazi
console.log(person_4.times); // 1;

总结

　　道阻且长

　　...