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

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

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

相关文章

  • 原生JS实现微信通讯录

    原生JS实现微信通讯录

    这篇文章主要为大家详细介绍了原生JS实现微信通讯录,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • javascript中expression的用法整理

    javascript中expression的用法整理

    在学习javaScript, 学到regular expression的时候见知识点有些杂乱,于是将其整理了一些在本文与大家分享
    2014-05-05
  • ES6学习教程之块级作用域详解

    ES6学习教程之块级作用域详解

    很多语言中都有块级作用域,但JS没有,它使用var声明变量,以function来划分作用域,大括号“{}” 却限定不了var的作用域,下面这篇文章主要给大家介绍了关于ES6学习教程之块级作用域的相关资料,需要的朋友可以参考下。
    2017-10-10
  • js实现扫雷小程序的示例代码

    js实现扫雷小程序的示例代码

    本篇文章主要介绍了js实现扫雷小程序的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 微信小程序开发之点击按钮退出小程序的实现方法

    微信小程序开发之点击按钮退出小程序的实现方法

    这篇文章主要介绍了微信小程序开发之点击按钮退出小程序的实现方法,本恩通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04
  • js二级地域选择的实现方法

    js二级地域选择的实现方法

    js二级地域选择的实现方法,需要的朋友可以参考一下
    2013-06-06
  • 浅谈JS运算符&&和|| 及其优先级

    浅谈JS运算符&&和|| 及其优先级

    下面小编就为大家带来一篇浅谈JS运算符&&和|| 及其优先级。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • 关于JavaScript奇怪又实用的六个姿势

    关于JavaScript奇怪又实用的六个姿势

    这篇文章主要给大家介绍了关于JavaScript奇怪又实用的六个姿势,这些技巧和建议是我平常在开发项目上会用到的,希望能让大家学到知识,需要的朋友可以参考下
    2021-10-10
  • JS实现二叉查找树的建立以及一些遍历方法实现

    JS实现二叉查找树的建立以及一些遍历方法实现

    本篇文章主要介绍了JS实现二叉查找树的建立以及一些遍历方法实现,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-04-04
  • 一文搞懂JavaScript中的内存泄露

    一文搞懂JavaScript中的内存泄露

    以前我们说的内存泄漏,通常发生在后端,但是不代表前端就不会有内存泄漏。特别是当前端项目变得越来越复杂后,前端也逐渐称为内存泄漏的高发区。本文就带大家了解一下Javascript的内存泄漏
    2022-06-06

最新评论