JS-数据属性与访问器属性

数据属性与访问器属性
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

JS-数据属性与访问器属性相关推荐

Js中的数据属性和访问器属性
Js中的数据属性和访问器属性在javaScript中,对象的属性分为两种类型:数据属性和访问器属性. 一.数据属性 1.数据属性:它包含的是一个数据值的位置,在这可以对数据值进行读写. 2.数据属性 ...
数据属性和访问器属性
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>数据 ...
深入理解对象的数据属性与访问器属性及属性间相互转换
ECMA-262 第 5 版在定义只有内部才用的特性(attribute)时,描述了属性(property)的各种特征.ECMAScript 中有两种属性:数据属性和访问器属性. 1. 数据属性数据 ...
《js高级程序设计》6.1.1-6.1.3——数据属性、访问器属性
数据属性:该属性包含了一个数据值的位置,它包含了4个描述行为的特性: 1. [[Configurable]]:表示是否能通过delete删除属性从而重新定义属性,能否修改属性的特性,能否把属性修改为访 ...
ECMAScript数据属性和访问器属性
ECMA-262 第 5 版在定义只有内部才用的特性(attribute)时,描述了属性(property)的各种特征. ECMA-262 定义这些特性是为了实现 JavaScript 引擎用的,因此 ...
JavaScript | 数据属性与访问器属性
属性类型数据属性 - 包含一个数据值的位置,可以读取和写入值 [writable] 是否能修改属性的值 true [enumerable] 是否通过for in 循环返回属性(是否可以被枚举) tr ...
使用访问器属性模拟java中的私有变量
2019独角兽企业重金招聘Python工程师标准>>> <script>"use strict";//注意,一定要写严格模式function Emp( ...
JS中的可枚举属性与不可枚举属性
一.怎么判断属性是否可枚举 js中基本包装类型的原型属性是不可枚举的,如Object, Array, Number等,如果你写出这样的代码遍历其中的属性: var num = new Number() ...
JS面向对象定义多个属性--object.defineProperties()方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

JS-数据属性与访问器属性

1.1-数据属性

1.2-访问器属性

JS-数据属性与访问器属性相关推荐

最新文章

热门文章