zoukankan      html  css  js  c++  java
  • JavaScript对象访问器属性

      对象访问器就是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更加符合编程的思维,赋值或者获取属性值是不需要进行额外的操作,因为操作已经封装了,并且对外部来说是透明的。

  • 相关阅读:
    webpack入门+react环境配置
    mailto: HTML e-mail 链接
    IE兼容性手册
    浏览器内核Trident/Gecko/WebKit/Presto
    抓包
    js页面埋点
    http返回码
    meta
    img和css背景的选择
    谈谈Web前端工程师的定位
  • 原文地址:https://www.cnblogs.com/-beyond/p/8638296.html
Copyright © 2011-2022 走看看