JavaScript学习笔记之取值函数getter与取值函数setter详解

目录
  • 取值函数getter和存值函数setter
  • 使用get与set函数有两个好处

取值函数getter和存值函数setter

get和set是两个关键字，用于对某个属性设置存值函数和取值函数，拦截该属性的存取行为。

那么，这两个东西要怎么用呢？而且他们和我们的平日里写的业务又是怎么练习起来的呢？

首先，我们先看一段恩简单的代码：

   var person={
        myname:''
    }
   person.myname='lsh'
   console.log(person.myname);

相信大家一眼就看出来了，控制台打印的结果是lsh，那么如果我们把它改写成取值函数和存执函数要怎么写呢？

代码如下：

      var name = ""
      var person = {
        get myname() {
          console.log("我叫" + name)
          return name
        },
        set myname(val) {
          console.log("我叫" + name)
          name = val
        },
      }
      person.myname = "lsh"
      console.log(person.myname)

我们只需要使用对象.函数名就可以调用取值函数和取值函数了。

当你明白了get与set函数的使用后，肯定会想上面第一段代码那么简单，谁会去用第二段代码，又多又不好理解，我只想说，你想的太简单了，哈哈哈~~~~

接着看：

使用get与set函数有两个好处

使用get与set函数有两个好处：

  • 在读取或者设置对象的某一个属性的时候，可以进行拦截，中间可以进行其他的操作，比如处理一些业务逻辑
  • 在vuex中对state中的数据进行缓存
  • 可以装bei(在小白面前)

对于第一个好处上面已经演示过了，这里要解释一下第二个好处：

对于做过vue项目的同学，或许在store文件夹下的index.js文件中见过下面的代码，下面的代码中就用到了get与set函数

export default new Vuex.Store({
  state: {
    get UserToken() {
      return localStorage.getItem("token")
    },
    set UserToken(value) {
      localStorage.setItem("token", value)
    },
  },
  mutations: {
    LOGIN_IN(state, token) {
      state.UserToken = token
    },
    LOGIN_OUT(state) {
      state.UserToken = ""
    },
  },
  modules,
})

这个东西出现在vuex中，vuex就是进行数据的集中式处理，可以是的数据进行全局访问的，那么为什么又要用到localstorage呢，那么又为什么要用get和set方法呢？

首先我们要明确一点在vuex中使用本地存储，目的并不是实现数据的共享(store已经实现了全局共享)，而是实现vuex所管理的数据进行本地存储(众所周知，vuex存储的数据刷新页面后数据会丢失)。

如果我们将mutations的值些写为一个下面的这个样子，也是可以实现数据在全局的共性，一点也不耽误操作它：

但是有一个很重要的一点，刷新页面后usertoken就变成空了，为了解决这个问题，就必须使用本地存储，那么本地存储应该如何与vuex相结合起来呢，那就必须要用到下面的写法了，然后就用到了get与set函数了。

export default {
    get UserToken(){
        return localStorage.getItem('token');
    },
    set UserToken(value){
        localStorage.setItem('token',value)
    }
}

然后就完美解决问题了。

最后代码就变成了这样子：

import Vue from 'vue'
import Vuex from 'vuex'
import state from "./defaultState"
import mutations from "./mutations"
import modules from "./modules"
Vue.use(Vuex)
export default new Vuex.Store({
    state,
    mutations,
    modules
})

到此这篇关于JavaScript学习笔记之取值函数getter与取值函数setter详解的文章就介绍到这了,更多相关JS getter与setter内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JavaScript getter setter金字塔​​​​​​​

    JavaScript getter setter金字塔​​​​​​​

    目录 引言 函数 getters setters getter-getters setter-setter iterables promises Observables GetterSetterFunctionValue async iterables operators 引言 英文链接: staltz.com/javascript-… 函数是JavaScript的基石. 它是一种灵活的.抽象的,可作为其他抽象的基础, 如:Promise.Iterables.Observables等. 之前我在

  • Javascript中的getter和setter初识

    前言 本文主要给大家介绍的关于Javascript中getter和setter的相关内容,第一次听说这个东西的时候是vue.js里面的数据绑定,只要绑定了数据,修改对象属性可以自动反馈到dom上,很神奇,后面也看到了文档里面实现是对对象定义了getter和setter并覆盖原属性,索性就来总结这两者的用法,下面话不多说了,来一起看看详细的介绍吧. 原理 利用Object.defineProperty来重写对象属性为getter和setter,通过getter和setter顺便改变绑定DOM节点的

  • JavaScript之Getters和Setters 平台支持等详细介绍

    来自John Resig早年的文章,大致翻译了一下,以作备忘. 令人高兴的是,我想我终于可以说,"现在,JavaScript的Getters和Setters使用非常广泛,它和每个JavaScript开发者的切身利益息息相关".靠,我为了说这句话已经等了很久了. 首先,我们先来快速了解什么是Getters和Setters,以及它们为什么很有用.然后,我们来看看现在都有哪些平台支持Gettets和Setters. Getters和Setters Getters和Setters使你可以快速获

  • 浅谈JS对象添加getter与setter的5种方法

    定义 getter 与 setter 1.通过对象初始化器在创建对象的时候指明(也可以称为通过字面值创建对象时声明) (function () { var o = { a : 7, get b(){return this.a +1;},//通过 get,set的 b,c方法间接性修改 a 属性 set c(x){this.a = x/2} }; console.log(o.a); console.log(o.b); o.c = 50; console.log(o.a); })(); 在 chro

  • JavaScript的setter与getter方法

    以前在写项目过程一直都没有使用过Javascript的setter与getter方法,所以对其是一种要懂不懂的概念:今天看书看到这个知识点,还是模模糊糊的,于是就打算研究研究: Javascript对象的属性是由名字,值和一组特性构成的.那么首先,来了解一下对象的两种属性: 数据属性,我们经常使用,应该很熟悉 访问器属性,也称存取器属性 何为存取器属性?就是一组获取和设置值的函数.在ECMAScript5中,属性值可以用一个或两个方法设置,这两个方法就是getter和setter:因此gette

  • js中getter和setter用法实例分析

    js中getter和setter用法实例分析

    本文实例讲述了js中getter和setter用法.分享给大家供大家参考,具体如下: 在学习Vue计算属性时,有一句"计算属性默认只有 getter ,不过在需要时你也可以提供一个 setter". getter和setter到底是什么?于是我查找了资料: 在Es5中可以使用getter和setter部分改写默认操作,但是只能应用在单个属性上,无法应用在整个对象上.getter是一个隐藏函数,会在获取属性值时调用.setter也是一个隐藏属性,会在设置属性值时调用. 例子: var m

  • JavaScript中setter和getter方法介绍

    javascript中的setter.getter是平时接触比较少的方法,其本身也并不是标准方法,只在非ie浏览器里支持(ie内核也许有其他方法可以做到呢?暂时不知其解),但是加以利用可以做许多事情,比如: 1.对数据的访问限制: a.value是对value变量的getter方法调用,如果在getter方法实现中抛出异常,可以阻止对value变量的访问 2.对dom变量进行监听: window.name是一个跨域非常好用的dom属性(大名鼎鼎,详见百度),如果覆盖window.name的set

  • JavaScript对象访问器Getter及Setter原理解析

    JavaScript对象访问器Getter及Setter原理解析

    在ES5中引入了set和get关键字,允许访问和设置对象的属性. set关键字: set关键字接收一个参数,用于修改对象的属性值:个人觉得类似于在对象内部的每一个方法前都隐藏一个set. get关键字是用来在对象外部获取对象的属性值或方法:在对象外部可以使用set关键字修改对象的属性值. 使用原型方法和set.get关键字添加或修改对象的属性或方法: 以上观点是自己不成熟的一些看法,不当之处请大家批评指正. 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们.

  • webpack学习笔记之代码分割和按需加载的实例详解

    webpack学习笔记之代码分割和按需加载的实例详解

    本文介绍了webpack学习笔记之代码分割和按需加载的实例详解,分享给大家,也给自己留个笔记 为什么需要代码分割和按需加载 代码分割就是我们根据实际业务需求将代码进行分割,然后在合适的时候在将其加载进入文档中. 举个简单的例子: 1.一个HTML中存在一个按钮 2.点击按钮出现一个包着图片的div 3.点击关闭按钮图片消失 Demo目录: 一.当未点击按钮时浏览器只加载了对入口文件打包后的js 二.点击按钮会对组件进行异步加载 这个clichunk就是我们打包好的click组件,包括相应的JS逻

  • Python GUI编程学习笔记之tkinter控件的介绍及基本使用方法详解

    本文实例讲述了Python GUI编程学习笔记之tkinter控件的介绍及基本使用方法.分享给大家供大家参考,具体如下: 相关内容: tkinter的使用 1.模块的导入 2.使用 3.控件介绍 Tk Button Label Frame Toplevel Menu Menubutton Canvas Entry Message Text Listbox Checkbutton Radiobutton Scale Scrollbar 首发时间:2018-03-04 16:39 Python的GU

  • vue学习笔记五：在vue项目里面使用引入公共方法详解

    今天早上来到公司,没事看了一下别人的博客,然后试了一下,发现的确是可以的,在此记录一下,方便自己日后查阅. 首先新建一个文件夹:commonFunction ,然后在里面建立 一个文件common.js 建立好之后,在main.js里面引入这个公共方法 最后是调用这个公共方法 测试一下,我在公共方法里面写了一个简单的一段代码如下: export default{ login:function(){ console.log("1111"); } } 如何在我的login.vue里面控制台

  • JavaScript学习笔记之取值函数getter与取值函数setter详解

    JavaScript学习笔记之取值函数getter与取值函数setter详解

    目录 取值函数getter和存值函数setter 使用get与set函数有两个好处 取值函数getter和存值函数setter get和set是两个关键字,用于对某个属性设置存值函数和取值函数,拦截该属性的存取行为. 那么,这两个东西要怎么用呢?而且他们和我们的平日里写的业务又是怎么练习起来的呢? 首先,我们先看一段恩简单的代码: var person={ myname:'' } person.myname='lsh' console.log(person.myname); 相信大家一眼就看出来

  • JavaScript学习笔记之取数组中最大值和最小值

    推荐阅读:JavaScript学习笔记之数组的增.删.改.查 JavaScript学习笔记之数组求和方法 JavaScript学习笔记之数组随机排序 在实际业务中有的时候要取出数组中的最大值或最小值.但在数组中并没有提供arr.max()和arr.min()这样的方法.那么是不是可以通过别的方式实现类似这样的方法呢?那么今天我们就来整理取出数组中最大值和最小值的一些方法. 取数组中最大值 可以先把思路理一下: 将数组中第一个元素赋值给一个变量,并且把这个变量作为最大值: 开始遍历数组,从第二个元

  • javascript学习笔记（四）function函数部分

    函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块. Jscript 支持两种函数:一类是语言内部的函数(如eval() ),另一类是自己创建的. 在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它.(该变量的作用域是局部的). 您可以在不同的函数中使用名称相同的局部变量,因为只有声明过该变量的函数才能识别出该变量. 函数的调用方式 1.普通调用:functionName(实际参数...) 2.通过指向函数的变量去调用: var  myVar

  • JavaScript学习笔记(三)：JavaScript也有入口Main函数

    在C和Java中,都有一个程序的入口函数或方法,即main函数或main方法.而在JavaScript中,程序是从JS源文件的头部开始运行的.但是某种意义上,我们仍然可以虚构出一个main函数来作为程序的起点,这样一来不仅可以跟其他语言统一了,而且说不定你会对JS有更深的理解. 1. 实际的入口 当把一个JavaScript文件交给JS引擎执行时,JS引擎就是从上到下逐条执行每条语句的,直到执行完所有代码. 2. 作用域链.全局作用域和全局对象 我们知道,JS中的每个函数在执行时都会产生一个新的

  • JavaScript学习笔记整理_关于表达式和语句

    表达式和语句 eval( ) 只有一个参数 参数非字符串时,直接返回这个参数: 参数为字符串时,它把字符串当成JavaScript代码进行编译,编译失败则抛出语法错误,编译成功则执行代码,并返回最后一条语句的值,若没有值则返回undefined eval()使用了调用它的变量的作用域环境 它接收的字符串参数,在作为单独的代码时,必须是有语义的,否则编译失败 delete运算符:用来删除对象的自由属性.数组的元素, 删除属性后,属性将不存在,而删除数组元素后,会在数组内留下一个值为undefine

  • JavaScript学习笔记之数组随机排序

    JavaScript学习笔记之数组随机排序

    推荐阅读:JavaScript学习笔记之数组求和方法 JavaScript学习笔记之数组的增.删.改.查 JavaScript中提供了sort()和reverse()方法对数组项重新排序.但很多时候这两个方法无法满足我们实际业务的需求,比如说扑克牌游戏中的随机洗牌. 在这篇文章一起来学习如何完成上面这个示例的效果,以及一些有关于数组随机排序的相关知识. 在网上查了一下有关于数组随机排序的相关资料,都看到了Math.random()的身影.打开浏览器控制器,输入: Math.random() 从图

  • JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解

    JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解

    本文实例讲述了JavaScript学习笔记之基于定时器实现图片无缝滚动功能.分享给大家供大家参考,具体如下: 一.无缝滚动理论基础 基础知识 1.setInterval(function,time).clearInterval(timer) setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭.由 setInterval() 返回的 ID 值可用作 clea

随机推荐