浅谈Javascript数据属性与访问器属性

 更新时间:2016年07月26日 09:20:14   投稿:jingxian  
下面小编就为大家带来一篇浅谈Javascript数据属性与访问器属性。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

ES5中对象的属性可以分为‘数据属性'和‘访问器属性'两种。

数据属性一般用于存储数据数值,访问器属性对应的是set/get操作,不能直接存储数据值。

数据属性特性:value、writable、enumerable、configurable。

解释:configurable:true/false,是否可以通过delete删除属性,能否修改属性的特性,能否把属性修改为访问器属性,默认false;

enumerable:true/false,是否可以通过for in循环返回,默认false;

writable:true/false,是否可以修改属性的值,默认false;

value:undefined,设置属性的值,默认undefined。

访问器属性特性:set、get、enumerable、configurable。

解释:configurable:true/false,是否可以通过delete删除属性,能否修改属性的特性,能否把属性修改为访问器属性,默认false;

enumerable:true/false,是否可以通过for in循环返回,默认false;

set:function,读取属性值时调用的函数;

get:function,修改属性值时调用的函数。

将属性添加到对象或修改现有属性的特性使用Object.defineProperty() 或 Object.defineproperties()方法;

Object.defineProperty(object, propertyname, descriptor):

参数解释:object:需要添加或修改属性的对象;

propertyname:属性的名称,字符串格式;

descriptor:属性的描述,设置数据属性或访问器属性的特性。

实例分析:

数据属性:

var emp = {

name:'tom'

};

 

Object.defineProperty(emp,'name',{

writable:false

});

emp.name = 'jery';
console.log(emp.name);//输出tom,因为已经设置了writable为false



Object.defineProperty(emp,'age',{

configurable:false,

writable:true,

value:22

});

console.log(emp.age);//输出22,因为设置了value为22

emp.age = 25;

console.log(emp.age);//输出25,设置了writable为true

delete emp.age;

console.log(emp.age);//输出25,设置了configurable为false,此属性删除不了

访问器属性:


var emp ={

_name:'tom',

_age:20

};



Object.defineProperty(emp,'name',{

get:function(){

return this._name;

}

});

console.log(emp.name);//输出tom,由get方法返回_name的值

emp.name = 'jery';

console.log(emp.name);//输出tom,没有set方法,修改不了_name的值

 

Object.defineProperty(emp,'age',{

configurable:true,

get:function(){

 return this._age;

}

set:function(age){

this._age = age;

}

});

emp.age = 25;
console.log(emp.age)//输出25,emp.age=25是使用set方法将25赋值给_age,emp.age是使用get方法将_age的读取出来

delete emp.age;

console.log(emp.age);//输出undefined,configurable为true,可以使用delete方法将emp.age属性删除

 备注:访问器属性可以起到很好的保护作用,当只有get方法时,就实现只读不能写;反之,只有set时,便是只能写入而不能读取

以上就是小编为大家带来的浅谈Javascript数据属性与访问器属性全部内容了,希望大家多多支持脚本之家~

相关文章

  • JS实现扫码枪扫描二维码功能

    JS实现扫码枪扫描二维码功能

    这篇文章主要介绍了JS实现扫码枪扫描二维码功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-01-01
  • uniapp几行代码解决滚动穿透问题(项目实战)

    uniapp几行代码解决滚动穿透问题(项目实战)

    这篇文章主要介绍了uniapp几行代码解决滚动穿透问题,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-01-01
  • js的闭包的一个示例说明

    js的闭包的一个示例说明

    js中 某个函数的内部函数在该函数执行结束后仍然可以访问这个函数中定义的变量,这称为闭包(Closure)
    2008-11-11
  • 微信小程序实现签到功能

    微信小程序实现签到功能

    这篇文章主要为大家详细介绍了微信小程序实现签到功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-10-10
  • JavaScript编程开发中的五个实用小技巧

    JavaScript编程开发中的五个实用小技巧

    下面的5点说明确实不错,提高性能与可读性,大家可以根据需要选择使用。
    2010-07-07
  • JS简单实现文件上传实例代码(无需插件)

    JS简单实现文件上传实例代码(无需插件)

    注意一下:在chrome浏览器下,为了数据安全,隐藏的input:file不能trigger “click” 事件。 所以要设置input:file的透明度达到隐藏的效果
    2013-11-11
  • 图片img的src不变让浏览器重新加载实现方法

    图片img的src不变让浏览器重新加载实现方法

    图片img的src不变,想让浏览器重新加载怎么办,在图片地址src不变的情况下让浏览器重新加载图片,实际上在src不变时,浏览器直接就去读取缓存
    2013-03-03
  • JavaScript函数作用域链分析

    JavaScript函数作用域链分析

    这篇文章主要介绍了JavaScript函数作用域链,实例分析了函数作用域链的原理与使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • 将数字转换成大写的人民币表达式的js函数

    将数字转换成大写的人民币表达式的js函数

    将数字转换成大写的人民币,方法有很多,本例介绍的是使用js来完成的,有需要的朋友可以参考下
    2014-09-09
  • Lab.js初次使用笔记

    Lab.js初次使用笔记

    这篇文章主要介绍了Lab.js初次使用笔记,本文对比了普通动态加载JS文件的技术和使用Lab.js加载JS文件的技术,并给出了Lab.js加载示例,需要的朋友可以参考下
    2015-02-02

最新评论