属性(property)的特性(attribute)

Posted lindablog

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了属性(property)的特性(attribute)相关的知识,希望对你有一定的参考价值。

 


属性:对象中可以保存数据的变量

属性的特性:
     数据属性的特性(默认值是false):value、writable(可写否) 、enumerable(可否枚举)、configurable(可否重新配置)

   访问器属性的特性:get、set、enumerable、enumerable

<!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;
},
enumerable: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>





































































































以上是关于属性(property)的特性(attribute)的主要内容,如果未能解决你的问题,请参考以下文章

区分元素特性attribute和对象属性property

c#Property和Attribute区别

attribute和property

[深入vue组件]:禁用 Attribute 继承

JavaScript 中 Property 和 Attribute 的区别详解

javascript中attribute和property的区别详解