属性(property)的特性(attribute)
属性:对象中可以保存数据的变量
属性的特性:
数据属性的特性(默认值是false):value、writable(可写否) 、enumerable(可否枚举)、configurable(可否重新配置)
访问器属性的特性:get、set、enumerable、configurable 使用该访问器的特性来设置每个数据的形式,可以更加精准的确定是否只读、只写或者可读可写
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数据属性和访问器属性</title>
<script src="js/jquery.min.js"></script>
<script >
var employee = {
monSalary: 5000,
get yearSalary() {
alert(" get yearSalary()被调用!");
return this.monSalary * 12;
},
set yearSalary(value) {
this.monSalary = value / 12;
}
};
// alert(employee.yearSalary);
// employee.yearSalary = 12000;
// alert(employee.monSalary);
var stu = {chinese:90};//为对象添加属性
stu.math=80; //为对象添加属性
for(var p in stu){//遍历输出
alert(p+'=>'+stu[p]);
}
//为对象添加一个新的数据属性
Object.defineProperty(
stu,
'english',
{
value:100,
writable:true,
enumerable:true,//可以枚举遍历出来:false就不枚举
configurable:true//怎么定义和后面的定义没有影响,不管定义为true还是false,后面再次定义都是可以生效的
}
);
Object.defineProperty(
stu,
'english',
{
value:130,
writable:false,//默认值是false:因为在上面就定义为true,之后再想改为false是无法改变的
enumerable:false,//可以枚举遍历出来:false就不枚举
configurable:false//重新配置属性的特性:再次定义也会生效。
}
);
alert("english:"+stu.english);
//枚举对象中的每个属性
var arr=Object.keys(stu);
alert(arr.length);
使用属性的特性定义一个新的访问器属性(访问器属性的特性)
Object.defineProperty{
stu,
'total',//给stu添加一个属性total,且描述该属性的四个特性
{//属性的描述符对象--定义属性的特性
get : function(){},
set : function(value){},
enumerable : true,
configurable : true
}
};
demo:正方形求面积和周长
var square ={
__width:0,//没有使用数据属性。而是使用两个下划线的方式转化为访问器属性的方式来传递不同的值
get perimeter(){
return this.__width * 4;
},
set perimeter(value){
this.__width=value/4;
},
writable:true,//可更改
configurable:true//可重新配置
};
给square对象添加size属性 切记:get 和 set 必须使用冒号,否则size输出的是undefined
Object.defineProperty(
square,
'size',
{
get:function(){
return this.__width * this.__width;
},
set:function(value){
this.__width=Math.sqrt(value);
},
enumerable:true,//可枚举
configurable:true//可重新配置
}
);
square.__width=10;
alert("周长是:"+square.perimeter);
alert("面积是:"+square.size);
</script>
</head>
<body></body>
</html>
本文来自博客园,作者:小虾米吖~,转载请注明原文链接:https://www.cnblogs.com/LindaBlog/p/9295599.html
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」