JavaScript學(xué)習(xí)筆記之取值函數(shù)getter與取值函數(shù)setter詳解
取值函數(shù)getter和存值函數(shù)setter
get和set是兩個(gè)關(guān)鍵字,用于對某個(gè)屬性設(shè)置存值函數(shù)和取值函數(shù),攔截該屬性的存取行為。
那么,這兩個(gè)東西要怎么用呢?而且他們和我們的平日里寫的業(yè)務(wù)又是怎么練習(xí)起來的呢?
首先,我們先看一段恩簡單的代碼:
var person={ myname:'' } person.myname='lsh' console.log(person.myname);
相信大家一眼就看出來了,控制臺(tái)打印的結(jié)果是lsh,那么如果我們把它改寫成取值函數(shù)和存執(zhí)函數(shù)要怎么寫呢?
代碼如下:
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)
我們只需要使用對象.函數(shù)名就可以調(diào)用取值函數(shù)和取值函數(shù)了。
當(dāng)你明白了get與set函數(shù)的使用后,肯定會(huì)想上面第一段代碼那么簡單,誰會(huì)去用第二段代碼,又多又不好理解,我只想說,你想的太簡單了,哈哈哈~~~~
接著看:
使用get與set函數(shù)有兩個(gè)好處
使用get與set函數(shù)有兩個(gè)好處:
- 在讀取或者設(shè)置對象的某一個(gè)屬性的時(shí)候,可以進(jìn)行攔截,中間可以進(jìn)行其他的操作,比如處理一些業(yè)務(wù)邏輯
- 在vuex中對state中的數(shù)據(jù)進(jìn)行緩存
- 可以裝bei(在小白面前)
對于第一個(gè)好處上面已經(jīng)演示過了,這里要解釋一下第二個(gè)好處:
對于做過vue項(xiàng)目的同學(xué),或許在store文件夾下的index.js
文件中見過下面的代碼,下面的代碼中就用到了get與set函數(shù)
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, })
這個(gè)東西出現(xiàn)在vuex中,vuex就是進(jìn)行數(shù)據(jù)的集中式處理,可以是的數(shù)據(jù)進(jìn)行全局訪問的,那么為什么又要用到localstorage呢,那么又為什么要用get和set方法呢?
首先我們要明確一點(diǎn)在vuex中使用本地存儲(chǔ),目的并不是實(shí)現(xiàn)數(shù)據(jù)的共享(store已經(jīng)實(shí)現(xiàn)了全局共享),而是實(shí)現(xiàn)vuex所管理的數(shù)據(jù)進(jìn)行本地存儲(chǔ)(眾所周知,vuex存儲(chǔ)的數(shù)據(jù)刷新頁面后數(shù)據(jù)會(huì)丟失)。
如果我們將mutations的值些寫為一個(gè)下面的這個(gè)樣子,也是可以實(shí)現(xiàn)數(shù)據(jù)在全局的共性,一點(diǎn)也不耽誤操作它:
但是有一個(gè)很重要的一點(diǎn),刷新頁面后usertoken就變成空了,為了解決這個(gè)問題,就必須使用本地存儲(chǔ),那么本地存儲(chǔ)應(yīng)該如何與vuex相結(jié)合起來呢,那就必須要用到下面的寫法了,然后就用到了get與set函數(shù)了。
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 })
到此這篇關(guān)于JavaScript學(xué)習(xí)筆記之取值函數(shù)getter與取值函數(shù)setter詳解的文章就介紹到這了,更多相關(guān)JS getter與setter內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
微信小程序?qū)崿F(xiàn)虎年春節(jié)頭像制作
春節(jié)來臨之際,看到有網(wǎng)友分享了網(wǎng)頁版的虎年頭像制作工具。本文將為大家介紹一個(gè)虎年春節(jié)頭像制作小程序,文中的示例代碼講解詳細(xì),需要的可以參考一下2022-02-02javascript獲得CheckBoxList選中的數(shù)量
javascript獲得CheckBoxList選中的數(shù)量(jQuery與Javascript對照學(xué)習(xí)/前臺(tái)與后臺(tái))2009-10-10js從數(shù)組中刪除指定值(不是指定位置)的元素實(shí)現(xiàn)代碼
下面小編就為大家?guī)硪黄猨s從數(shù)組中刪除指定值(不是指定位置)的元素實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09原生JS實(shí)現(xiàn)旋轉(zhuǎn)輪播圖+文字內(nèi)容切換效果【附源碼】
這篇文章主要介紹了原生JS實(shí)現(xiàn)旋轉(zhuǎn)輪播圖+文字內(nèi)容切換效果,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09詳解JavaScript中Hash Map映射結(jié)構(gòu)的實(shí)現(xiàn)
Hash Map通常在JavaScript中作為一個(gè)簡單的來存儲(chǔ)鍵值對的地方,不過哈希對象Object并不是一個(gè)真正的哈希映射,沒Java中的Hash Map來的那么強(qiáng)大,well,接下來帶大家詳解JavaScript中Hash Map映射結(jié)構(gòu)的實(shí)現(xiàn)2016-05-05JavaScript中常用數(shù)據(jù)處理函數(shù)groupBy的用法詳解
數(shù)據(jù)處理與分析中,對數(shù)據(jù)進(jìn)行分組是非常常見的功能,不論是實(shí)際工作中,還是在面試的場景中應(yīng)用十分廣泛,尤其在函數(shù)式編程中?groupBy?十分常見,下面我們就來學(xué)習(xí)一下groupBy的用法吧2023-12-12理解Javascript_14_函數(shù)形式參數(shù)與arguments
在'執(zhí)行模型詳解'的'函數(shù)執(zhí)行環(huán)境'一節(jié)中對arguments有了些許的了解,那么讓我們深入的分析一下函數(shù)的形式參數(shù)與arguments的關(guān)系。2010-10-10JS 學(xué)習(xí)總結(jié)之正則表達(dá)式的懶惰性和貪婪性
這篇文章主要介紹了JS 學(xué)習(xí)總結(jié)之正則表達(dá)式的懶惰性和貪婪性的相關(guān)資料,需要的朋友可以參考下2017-07-07JS實(shí)現(xiàn)關(guān)閉當(dāng)前頁而不彈出提示框的方法
這篇文章主要介紹了JS實(shí)現(xiàn)關(guān)閉當(dāng)前頁而不彈出提示框的方法,結(jié)合實(shí)例形式分析了JS操作頁面的打開、關(guān)閉及父頁面的關(guān)閉技巧,需要的朋友可以參考下2016-06-06