JavaScript的setter与getter方法

 更新时间:2017年11月29日 08:39:35   作者:hawk_zz  
这篇文章主要为大家详细介绍了JavaScript的setter与getter方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

以前在写项目过程一直都没有使用过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

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

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

相关文章

  • 使用json对象转化为key,value的对象数组

    使用json对象转化为key,value的对象数组

    这篇文章主要介绍了使用json对象转化为key,value的对象数组方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • 前端如何控制并发请求举例详解

    前端如何控制并发请求举例详解

    在项目中我们会遇到一次请求多个接口,当所有请求结束后进行操作,也会遇到多个请求(大量)同时进行请求资源,这篇文章主要给大家介绍了关于前端如何控制并发请求举例的相关资料,需要的朋友可以参考下
    2024-09-09
  • 一文搞懂如何避免JavaScript内存泄漏

    一文搞懂如何避免JavaScript内存泄漏

    SPA的兴起,促使我们更加关注与内存相关的JavaScript编码实践。如果应用使用的内存越来越多,就会严重影响性能,甚至导致浏览器的崩溃。下面就来看看JavaScript中常见的内存泄漏以及如何避免内存泄漏
    2022-05-05
  • JS如何设置iOS中微信浏览器的title

    JS如何设置iOS中微信浏览器的title

    本文给大家分享js设置ios中微信浏览器中的title的解决方法,实现原理比较简单,对js微信浏览器title相关知识感兴趣的朋友一起通过本文学习吧
    2016-11-11
  • 微信小程序实现禁止分享代码实例

    微信小程序实现禁止分享代码实例

    这篇文章主要介绍了微信小程序实现禁止分享代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-10-10
  • 让alert不出现弹窗的两种方法

    让alert不出现弹窗的两种方法

    这篇文章主要介绍了让alert不出现弹窗的两种方法,需要的朋友可以参考下
    2014-05-05
  • 你知道该如何捕获js报错前的用户行为吗

    你知道该如何捕获js报错前的用户行为吗

    这篇文章主要给大家介绍了该如何捕获js报错前的用户行为的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2023-06-06
  • 简易的投票系统以及js刷票思路和方法

    简易的投票系统以及js刷票思路和方法

    这篇文章主要介绍了简易的投票系统以及js刷票思路和方法,文章十分的详尽,思路也很清晰,是篇非常不错的文章,这里推荐给大家,有需要的小伙伴可以参考下。
    2015-04-04
  • Bootstrap每天必学之缩略图与警示窗

    Bootstrap每天必学之缩略图与警示窗

    Bootstrap每天必学之缩略图与警示窗,对Bootstrap缩略图与警示窗小编也了解的很少,希望通过这篇文章和大家更多的去学习Bootstrap缩略图与警示窗,从中得到收获。
    2015-11-11
  • JS中实现浅拷贝和深拷贝的代码详解

    JS中实现浅拷贝和深拷贝的代码详解

    JavaScript的变量中包含两种类型的值:基本类型值 和 引用类型值,这篇文章主要介绍了JS中实现浅拷贝和深拷贝,需要的朋友可以参考下
    2019-06-06

最新评论