JavaScript对象访问器属性

时间:2022-08-25 15:16:50

  对象访问器就是setter和getter,他们的作用就是

    1. 提供另外一种方法来获取或者设置对象的属性值,
    2. 并且在获取和设置的时候,可以用一定的其他操作。

  看下面代码:

<script>
	var person = {
		_name : "abc",   //注意此处的_name有一个下划线
	};
	Object.defineProperty(person,"name",{ 
		//注意第二个参数的前面没有下划线,所以_name和name是两个不同的属性
		set : function(value){
			this._name = "new name " + value;   
			//注意这里是给_name属性赋值
		},
		get : function(){
			return "this is name get by function : " + this._name;  
			//注意这里是返回字符串加上_name的值
		}
	});
	//到这里,person于是就有了两个属性:_name和name属性

	// 直接获取_name属性
	console.log(person._name);  //abc

	//通过name属性来间接获取_name的值,因为会执行name属性的getter访问器属性(方法)
	console.log(person.name);   //this is name get by function : abc

	// 直接修改_name属性
	person._name = "xyz";
	console.log(person._name);  //xyz

	//修改name属性,但是name属性的setter访问器属性(方法),会作用到_name属性上
	person.name = "wtf"; 		//该字符串会在前面加上new name,然后在赋值给_name
	console.log(person._name);  //new name wtf
	console.log(person.name);	//this is name get by function : new name wtf
</script>

  看完代码,你可能觉得setter和getter有点多余,直接使用原来的变量就能实现,为何要多此一举?

  其实有些情况setter和getter很使用,比如在设置属性的时候需要将属性值做一些处理,当然这些处理可以在外部定义函数实现,也可以直接处理之后赋值,但是,使用setter和getter更加符合编程的思维,赋值或者获取属性值是不需要进行额外的操作,因为操作已经封装了,并且对外部来说是透明的。

 

相关文章