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使用手册之三 CSS操作
Mar 24 Javascript
input 高级限制级用法
Mar 26 Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
Dec 19 Javascript
导入extjs、jquery 文件时$使用冲突问题解决方法
Jan 14 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
Apr 03 Javascript
Bootstrap Scrollspy源码学习
Mar 02 Javascript
原生JS实现多个小球碰撞反弹效果示例
Jan 31 Javascript
基于Vue组件化的日期联动选择器功能的实现代码
Nov 30 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
JS实现获取当前所在周的周六、周日示例分析
May 11 Javascript
scrapyd schedule.json setting 传入多个值问题
Aug 07 Javascript
vux-scroller实现移动端上拉加载功能过程解析
Oct 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
Fatal error: Call to undefined function curl_init()解决方法
2010/04/09 PHP
PHP数据流应用的一个简单实例
2012/09/14 PHP
浅析php中抽象类和接口的概念以及区别
2013/06/27 PHP
php生成网页桌面快捷方式
2017/05/05 PHP
Javascript 调试利器 Firebug使用详解六
2009/07/05 Javascript
appendChild() 或 insertBefore()使用与区别介绍
2013/10/11 Javascript
javascript 对象数组根据对象object key的值排序
2015/03/09 Javascript
javascript中$(function() {});写与不写有哪些区别
2015/08/10 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
2015/11/26 Javascript
基于node实现websocket协议
2016/04/25 Javascript
浅析JS中对函数function的理解(基础篇)
2016/10/14 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
2016/11/20 Javascript
JS实现搜索框文字可删除功能
2016/12/28 Javascript
Bootstrap table右键功能实现方法
2017/02/20 Javascript
浅谈vue父子组件怎么传值
2018/07/21 Javascript
NestJs 静态目录配置详解
2019/03/12 Javascript
3分钟读懂移动端rem使用方法(推荐)
2019/05/06 Javascript
Vue中computed和watch有哪些区别
2020/12/19 Vue.js
[43:43]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第三场 11.29
2020/12/02 DOTA
Python函数参数操作详解
2018/08/03 Python
Selenium控制浏览器常见操作示例
2018/08/13 Python
Python sqlalchemy时间戳及密码管理实现代码详解
2020/08/01 Python
快速一键生成Python爬虫请求头
2021/03/04 Python
纯DOM+CSS3实现简单的小风车动画
2016/09/27 HTML / CSS
CSS3 实现童年的纸飞机
2019/05/05 HTML / CSS
Html5移动端div固定到底部实现底部导航条的几种方式
2021/03/09 HTML / CSS
Lampegiganten丹麦:欧洲领先的照明网上商店
2018/04/25 全球购物
面试感谢信范文
2015/01/22 职场文书
食品安全责任书范本
2015/05/09 职场文书
工伤事故赔偿协议书
2015/08/06 职场文书
CSS实现多个元素在盒子内两端对齐效果
2021/03/30 HTML / CSS
matlab xlabel位置的设置方式
2021/05/21 Python
python实现语音常用度量方法的代码详解
2021/05/25 Python
Python OpenCV 图像平移的实现示例
2021/06/04 Python
python3+PyQt5+Qt Designer实现界面可视化
2021/06/10 Python
MySQL分区路径子分区再分区
2022/04/13 MySQL