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 相关文章推荐
浅谈javascript中的作用域
Apr 07 Javascript
九种js弹出对话框的方法总结
Mar 12 Javascript
js判断字符长度及中英文数字等
Mar 19 Javascript
Js实现自定义右键行为
Mar 26 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
Apr 27 Javascript
详解jQuery的表单验证插件--Validation
Dec 21 Javascript
JS实现间歇滚动的运动效果实例
Dec 22 Javascript
webpack 打包压缩js和css的方法示例
Mar 20 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
Aug 31 Javascript
vue使用一些外部插件及样式的配置代码
Nov 18 Javascript
vue-autoui自匹配webapi的UI控件的实现
Mar 20 Javascript
js实现随机点名
Jan 19 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 过滤危险html代码
2009/06/29 PHP
如何使用Gitblog和Markdown建自己的博客
2015/07/31 PHP
PHP5.5.15+Apache2.4.10+MySQL5.6.20配置方法分享
2016/05/06 PHP
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
2012/01/15 Javascript
用js写了一个类似php的print_r输出换行功能
2013/02/18 Javascript
JS获取鼠标坐标的实例方法
2013/07/18 Javascript
jquery text(),val(),html()方法区别总结
2013/11/04 Javascript
通过js来制作复选框的全选和不选效果
2014/05/22 Javascript
基于javascript实现的搜索时自动提示功能
2014/12/26 Javascript
javascript中定义类的方法详解
2015/02/10 Javascript
js实现图片轮播效果
2015/12/19 Javascript
Json解析的方法小结
2016/06/22 Javascript
Angularjs结合Bootstrap制作的一个TODO List
2016/08/18 Javascript
jQuery排序插件tableSorter使用方法
2017/02/10 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
2018/07/10 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
2020/04/09 Javascript
vue实现拖拽进度条
2021/03/01 Vue.js
[04:54]DOTA2-DPC中国联赛1月31日Recap集锦
2021/03/11 DOTA
python进阶教程之异常处理
2014/08/30 Python
Python 中的lambda函数介绍
2018/10/10 Python
django-初始配置(纯手写)详解
2019/07/30 Python
利用python实现.dcm格式图像转为.jpg格式
2020/01/13 Python
Pycharm IDE的安装和使用教程详解
2020/04/30 Python
Python实现将元组中的元素作为参数传入函数的操作
2020/06/05 Python
python 利用matplotlib在3D空间中绘制平面的案例
2021/02/06 Python
会计师事务所审计实习自我鉴定
2013/09/20 职场文书
师范毕业生自荐信
2013/10/17 职场文书
应届生如何写自荐信
2014/01/05 职场文书
招商专员岗位职责
2014/02/08 职场文书
英语教师岗位职责
2014/03/16 职场文书
二手房买卖协议书
2014/04/10 职场文书
医院搬迁方案
2014/06/14 职场文书
大学辅导员述职报告
2015/01/10 职场文书
2015年世界卫生日活动总结
2015/02/09 职场文书
确保工程质量承诺书
2015/04/29 职场文书
接触艺术对孩子学习思维有益
2019/08/06 职场文书