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 相关文章推荐
XHTML-Strict 内允许出现的标签
Dec 11 Javascript
JQuery中的$.getJSON 使用说明
Mar 10 Javascript
JQuery通过Ajax提交表单并返回结果
Jul 31 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
Oct 14 Javascript
jquery删除数据记录时的弹出提示效果
May 06 Javascript
JS在onclientclick里如何控制onclick的执行
May 30 Javascript
创建一般js对象的几种方式
Jan 19 Javascript
ajax分页效果(bootstrap模态框)
Jan 23 Javascript
js实现显示手机号码效果
Mar 09 Javascript
vue 粒子特效的示例代码
Sep 19 Javascript
vue获取dom元素注意事项
Dec 28 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
Aug 29 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中的串行化变量和序列化对象
2006/09/05 PHP
搜索和替换文件或目录的一个好类--很实用
2006/10/09 PHP
隐性调用php程序的方法
2009/03/09 PHP
phpmail类发送邮件函数代码
2012/02/20 PHP
php生成随机颜色方法汇总
2014/12/03 PHP
详解PHP数组赋值方法
2015/11/07 PHP
php的无刷新操作实现方法分析
2020/02/28 PHP
JavaScript 节点操作 以及DOMDocument属性和方法
2007/12/06 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
2013/09/27 Javascript
浅谈javascript回调函数
2014/12/07 Javascript
2则自己编写的jQuery特效分享
2015/02/26 Javascript
Js数组排序函数sort()介绍
2015/06/08 Javascript
js实现简单排列组合的方法
2016/01/27 Javascript
详解webpack+es6+angular1.x项目构建
2017/05/02 Javascript
详解node HTTP请求客户端 - Request
2017/05/05 Javascript
手把手教你把nodejs部署到linux上跑出hello world
2017/06/19 NodeJs
jQuery实现简单的下拉菜单导航功能示例
2017/12/07 jQuery
轻松搞定jQuery+JSONP跨域请求的解决方案
2018/03/06 jQuery
angular4笔记系列之内置指令小结
2018/11/09 Javascript
vue+iview/elementUi实现城市多选
2019/03/28 Javascript
vue中实现点击变成全屏的多种方法
2020/09/27 Javascript
使用python实现递归版汉诺塔示例(汉诺塔递归算法)
2014/04/08 Python
Python自动化构建工具scons使用入门笔记
2015/03/10 Python
window下eclipse安装python插件教程
2017/04/24 Python
tensorflow入门之训练简单的神经网络方法
2018/02/26 Python
python Opencv将图片转为字符画
2021/02/19 Python
Python 监测文件是否更新的方法
2019/06/10 Python
python3+PyQt5 使用三种不同的简便项窗口部件显示数据的方法
2019/06/17 Python
使用python-Jenkins批量创建及修改jobs操作
2020/05/12 Python
HTML5新特性之用SVG绘制微信logo
2016/02/03 HTML / CSS
财务会计人员岗位职责
2013/11/30 职场文书
感恩节活动策划方案
2014/05/16 职场文书
2014年党员承诺书范文
2014/05/20 职场文书
班级团队活动方案
2014/08/14 职场文书
利用Python判断你的密码难度等级
2021/06/02 Python
Nginx stream 配置代理(Nginx TCP/UDP 负载均衡)
2021/11/17 Servers