JavaScript學習筆記之取值函數getter與取值函數setter詳解

2022-08-22 18:01:33

取值函數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內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

JavaScript學習筆記之取值函數getter與取值函數setter詳解

目錄

取值函數getter和存值函數setter

使用get與set函數有兩個好處

熱門文章