JavaScript的setter与getter方法


Posted in Javascript onNovember 29, 2017

以前在写项目过程一直都没有使用过Javascript的setter与getter方法,所以对其是一种要懂不懂的概念;今天看书看到这个知识点,还是模模糊糊的,于是就打算研究研究;

Javascript对象的属性是由名字,值和一组特性构成的。那么首先,来了解一下对象的两种属性:

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

何为存取器属性?就是一组获取和设置值的函数。在ECMAScript5中,属性值可以用一个或两个方法设置,这两个方法就是getter和setter;因此getter和setter定义的属性被称为存取器属性。

var o = {
  get val(){
    /*函数体*/
    return ;
  },
  set val(n){
    /*函数体*/
  }
}

上面的就是一个存取器属性定义的最简单的方法,可以看出getter和setter方法其实就是取代function的一个函数。

var o = {
  a:3,
  get val(){
    return Math.pow(this.a,2);
  }
}

console.log(o.val);//9
o.val = 100;
console.log(o.val);//9

getter方法是无参数,并且有返回值的;当单独设置getter方法时,只能获取属性值,无法更改其定义的属性值的,保证了数据的安全性;

var o = {
  a:3,
  set val(n){
    this.a = n;
  }
}

console.log(o.val);//undefined

setter方法是有参数,没有返回值的;当单独设置setter方式时,是无法读取属性值的;

var o ={
  a:3,
  get val(){
    return Math.pow(this.a,n);
  },
  set val(n){
    this.a = Math.max(this.a,n);
  }
}

console.log(o.a);//3
console.log(o.val);//9
o.val = 10;
console.log(o.a);//10
console.log(o.val);//100

通过上面的代码可以看出,其中this是指其对象(即代码中的“o”);

var o ={
   a:3,
  get val(){
    return Math.pow(this.a,n);
  },
  set val(n){
    this.a = Math.max(this.a,n);
  }
}

o.val = 10;
var foo = Object.create(o);
console.log(foo.val);//10
foo.val = 9;
console.log(foo.val);//10

另外,存取器属性也是可以被继承的;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery给元素添加/删除节点比如select
Apr 02 Javascript
js模拟点击以提交表单为例兼容主流浏览器
Nov 29 Javascript
jQuery打印指定区域Html页面并自动分页
Jul 04 Javascript
iframe跨域通信封装详解
Aug 11 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
Sep 05 Javascript
jQuery实现的图片轮播效果完整示例
Sep 12 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
Nov 16 Javascript
深入理解jQuery()方法的构建原理
Dec 05 Javascript
vue.js学习之递归组件
Dec 13 Javascript
浅谈Node.js 沙箱环境
May 15 Javascript
Vue学习之axios的使用方法实例分析
Jan 06 Javascript
微信小程序tab左右滑动切换功能的实现代码
Feb 08 Javascript
解析Vue 2.5的Diff算法
Nov 28 #Javascript
javascript+css3开发打气球小游戏完整代码
Nov 28 #Javascript
9种改善AngularJS性能的方法
Nov 28 #Javascript
JS异步函数队列功能实例分析
Nov 28 #Javascript
浅谈vue,angular,react数据双向绑定原理分析
Nov 28 #Javascript
JS+HTML+CSS实现轮播效果
Nov 28 #Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
Nov 28 #Javascript
You might like
php date与gmdate的获取日期的区别
2010/02/08 PHP
php在程序中将网页生成word文档并提供下载的代码
2012/10/09 PHP
使用PHP uniqid函数生成唯一ID
2015/11/18 PHP
THinkPHP获取客户端IP与IP地址查询的方法
2016/11/14 PHP
如何判断php mysqli扩展类是否开启
2016/12/24 PHP
PHP实现简单计算器小程序
2020/08/28 PHP
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
2008/12/02 Javascript
解决3.01版的jquery.form.js中文乱码问题的解决方法
2012/03/08 Javascript
jQuery实现的可编辑表格完整实例
2016/06/20 Javascript
微信小程序 Nginx环境配置详细介绍
2017/02/14 Javascript
基于jQuery实现的单行公告活动轮播效果
2017/08/23 jQuery
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
2017/11/27 Javascript
设计模式中的原型模式在Python程序中的应用示例
2016/03/02 Python
Python获取文件所在目录和文件名的方法
2017/01/12 Python
python爬虫_微信公众号推送信息爬取的实例
2017/10/23 Python
基于DataFrame筛选数据与loc的用法详解
2018/05/18 Python
tensorflow更改变量的值实例
2018/07/30 Python
Python sorted函数详解(高级篇)
2018/09/18 Python
Python3.5迭代器与生成器用法实例分析
2019/04/30 Python
Python实现密码薄文件读写操作
2019/12/16 Python
Python 输出详细的异常信息(traceback)方式
2020/04/08 Python
Windows下Anaconda和PyCharm的安装与使用详解
2020/04/23 Python
从Pytorch模型pth文件中读取参数成numpy矩阵的操作
2021/03/04 Python
基于HTML5的WebSocket的实例代码
2018/08/15 HTML / CSS
惠普加拿大在线商店:HP加拿大
2017/09/15 全球购物
XML文档面试题
2015/08/05 面试题
AJAX检测用户名是否存在的方法
2021/03/24 Javascript
计算机专业学生求职信分享
2013/12/15 职场文书
数控专业个人求职信范文
2014/02/05 职场文书
鼓励运动员的广播稿
2014/02/08 职场文书
幼儿园招生广告
2014/03/19 职场文书
办公用品质量保证书
2015/05/11 职场文书
2015年高三毕业班班主任工作总结
2015/10/22 职场文书
详解JavaScript的计时器和按钮效果设置
2022/02/18 Javascript
DSP接收机前端设想
2022/04/05 无线电
Win11运行cmd提示“请求的操作需要提升”的两种解决方法
2022/07/07 数码科技