JS高级(01)-数据属性与访问器属性

  • 数据属性与访问器属性

    • 1.对象属性的作用主要是数据的存储
    • 2.既然数据存在存储,则会有增删改查相关操作(增加属性,修改属性值,获取属性值,删除属性)
    • 3.数据属性用于控制属性的增删改查特征
    • 4.访问属性用于监听属性的存储过程,可以限制属性的行为(限制属性的读写,实现对象观察者模式,M与V双向绑定等)

    • 1.1-数据属性

    • 1.2-访问器属性

    1.1-数据属性


/** 数据属性 */

//1.我们默认的对象属性是数据属性
var person = {
    name:"张三",
    age : 18,
    address:'zlswgy'
};


console.log(person);




// console.log(person);//{ name: '张三', age: 18, address: 'zlswgy' }

//2.数据属性有四个特征值描述他们的行为,这四个特性默认情况下可以理解为都是true
//(1)configurable:true 能够删除  (不可逆操作)
//(2)enumerable:true 能否遍历  for-in循环,以及对象获取
//(3)writable:true 能够修改
//(4)value:undefined  指定属性读写的位置  读从哪个位置读 写在哪里

// //3.要想修改这四个特征,可以用ES5的Object.defineProperty()方法
// //第一个参数:哪个对象  第二个参数:这个对象哪个属性(字符串)  第三个参数:描述符对象(四个行为特征)

// //3.1 设置person对象的name属性无法被删除,无法再修改其他任何特征
Object.defineProperty(person,"name",{
    configurable : false//person的name属性不能被删除
})

//3.1.1 configurable修改是不可逆的 一旦改为false,再修改为true会报错
//这行代码运行会报错
// Object.defineProperty(person,"name",{
//     configurable:true//person对象的name属性不能被删除
// });

person.name = '李四';

delete person.name;//删除name属性无效

console.log(person);//{ name: '李四', age: 18, address: 'zlswgy' }

// //3.2 设置person对象的address属性无法被遍历获取
Object.defineProperty(person,"address",{
    enumerable:false//person对象的address属性不能被forin循环遍历获取,打印对象时也看不到
});

for(key in person){
    console.log(person[key]);//李四  18
}

console.log(person);//{ name: '李四', age: 18 }  直接打印对象的address属性也是无法获取的
console.log(person.address);//zlswgy

// //3.3 设置person的age属性无法被修改

Object.defineProperty(person,"age",{
    writable:false//person对象的age属性不能被修改
});

person.age = 20;

console.log(person);//{ name: '李四', age: 18 }

Object.defineProperty(person,"age",{
    value:"6666"//设置age属性的值为6666,虽然age属性不能用属性赋值方式修改但是可以用vaule特征来修改
});

person.age = 22;
console.log(person);

1.2-访问器属性


/**  访问器属性 */

/*访问器属性除了对象属性固有的四个特征值之外,还添加了两个监听函数get与set
当对属性取值时,会调用get函数,得到的就是get函数中return的值
当对对象赋值时会调用set函数,该函数有一个默认形参用于接收赋值的实参
*/

// /*特点
// 1.如果单独get,表示该属性只可访问不可重写
// 2.在get和set中使用this会导致无限递归,内存溢出
//     * 通常我们给对象添加一个带下划线的数据属性名用于存储,然后通过不带下划线来获取
// 3.访问器属性和数据属性value不能同时定义,也不能多次定义,两者只可定义一种
// */

var student = {
    name : "老铁",
    _age : 18
}

// //1.如果单独get,表示该属性只可访问不可重写
// Object.defineProperty(student,"age",{
//     get : function(){
//         console.log('1');
//         return this._age;//不能使用this.age会导致循环递归,内存溢出
//     }

// })
// student.age = 11;

// console.log(student.age);//18

// //2.同时实现get与set保护数据的隐私性:
// //例如将_age的数据类型改为字符串,而通过属性访问age的时候得到的是number,赋值的时候确保age这个属性具有真实性(人的年龄不可能小于0)

var people = {
    name:"hm",
    _age:"18"
}
Object.defineProperty(people,"age",{
    get : function(){
        console.log('有人想要读取我的值');
        return parseInt(this._age);//访问时得到真实的数据类型number
    },
    set : function(newValue){
        console.log('外部赋值时的传参' + newValue);
        if(newValue > 0 && newValue < 100){//赋值时只有年龄在0-100之间才可以赋值
            this._age = String(newValue);//转为字符串存储,保证数据隐私性
        }
    }
})

console.log(people);//{ name: 'hm', _age: '18' }
console.log(people._age,typeof people._age);//18 string
console.log(people.age,typeof people.age);//18 number
people.age = 111;//此数字超出上限 设置无效
console.log(people._age);//18
console.log(people.age);//18
people.age = 88;//此数字在范围内 有效
console.log(people._age,typeof people._age);//88 string
console.log(people.age,typeof people.age);//88 number
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u013263917/article/details/80691912
上一篇JS基础语法(04)-逗号运算符
下一篇JS基础语法(05)-隐式数据类型转换
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭