设为首页收藏本站

IT技术擎 - 最棒的IT web技术交流社区

 找回密码
 注册为IT技术擎人

QQ登录

只需一步,快速开始

搜索
热搜: php h5 jquery
查看: 7|回复: 0

[javascript] JavaScript的setter与getter方法

[复制链接]
发表于 2018-5-16 23:30:31 | 显示全部楼层 |阅读模式

作者:http://hawkzz.com
以前在写项目过程一直都没有使用过Javascript的setter与getter方法,所以对其是一种要懂不懂的概念;今天看书看到这个知识点,还是模模糊糊的,于是就打算研究研究;
Javascript对象的属性是由名字,值和一组特性构成的。那么首先,来了解一下对象的两种属性:

  • 数据属性,我们经常使用,应该很熟悉
  • 访问器属性,也称存取器属性

何为存取器属性?就是一组获取和设置值的函数。在ECMAScript5中,属性值可以用一个或两个方法设置,这两个方法就是getter和setter;因此getter和setter定义的属性被称为存取器属性。
  1. var o = { get val(){ /*函数体*/ return ; }, set val(n){ /*函数体*/ }
  2. }
复制代码
上面的就是一个存取器属性定义的最简单的方法,可以看出getter和setter方法其实就是取代function的一个函数。
  1. var o = { a:3, get val(){ return Math.pow(this.a,2); }
  2. }
  3. console.log(o.val);//9
  4. o.val = 100;
  5. console.log(o.val);//9
复制代码
getter方法是无参数,并且有返回值的;当单独设置getter方法时,只能获取属性值,无法更改其定义的属性值的,保证了数据的安全性;
  1. var o = { a:3, set val(n){ this.a = n; }
  2. }
  3. console.log(o.val);//undefined
复制代码
setter方法是有参数,没有返回值的;当单独设置setter方式时,是无法读取属性值的;
  1. var o ={ a:3, get val(){ return Math.pow(this.a,n); }, set val(n){ this.a = Math.max(this.a,n); }
  2. }
  3. console.log(o.a);//3
  4. console.log(o.val);//9
  5. o.val = 10;
  6. console.log(o.a);//10
  7. console.log(o.val);//100
复制代码
通过上面的代码可以看出,其中this是指其对象(即代码中的"o”);
  1. var o ={ a:3, get val(){ return Math.pow(this.a,n); }, set val(n){ this.a = Math.max(this.a,n); }
  2. }
  3. o.val = 10;
  4. var foo = Object.create(o);
  5. console.log(foo.val);//10
  6. foo.val = 9;
  7. console.log(foo.val);//10
复制代码
另外,存取器属性也是可以被继承的;



上一篇:模拟Vue之数据驱动3
下一篇:IE兼容性小结(IE7及以上版本)
该用户未在地球留下任何的痕迹

本版积分规则

QQ|小黑屋|帮助|IT技术擎 ( 沪ICP备15054863号  

GMT+8, 2018-5-25 20:40

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表