29《Vue 入門教程》Vuex 中 state 的

29《Vue 入門教程》Vuex 中 state 的概念

. 前言

本小節我們將學習和使用 Vuex 中 state 的概念。包括如何創建 state、組件中獲取 state、以及輔助函數 mapState 的使用方法。

2. 創建數據倉庫

在上一小節中，我們已經給大家寫了一個簡單的示例，大家一定還記得 Vuex.Store({...}) 這個方法。在 Vuex 中，我們通過該方法創建一個數據倉庫，并把數據 state 傳入。例如：

const store=new Vuex.Store({
  state: {
    count: 12000,
    name: '木子教程',
    logo: ''
  }
})

那么，創建完數據倉庫后，我們怎樣才能在 Vue 組件中使用它呢？我們知道，要使用 Vue 需要通過 new Vue () 創建一個 Vue 實例，并傳入對象的參數。要在 Vue 中使用 store，只需要在創建 Vue 實例的時候將 store 傳入即可:

var vm=new Vue({
  el: '#app',
  store: store
})

3. 在 Vue 組件中獲得 Vuex 狀態

那么我們如何在 Vue 組件中展示狀態呢？由于 Vuex 的狀態存儲是響應式的，從 store 實例中讀取狀態最簡單的方法就是在計算屬性中返回某個狀態：

實例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div> {{ count }} </div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@3.1.2/dist/vuex.js"></script>
<script type="text/javascript">
  const store=new Vuex.Store({
    state: {
      count: 12
    }
  })
  var vm=new Vue({
    el: '#app',
    store,
    computed: {
      count() {
        return this.$store.state.count
      }
    }
  })
</script>
</html>

"運行案例" 可查看在線運行效果

代碼解釋 JS 代碼第 4-8 行，我們定義了倉庫 store。 JS 代碼第 11 行，創建 Vue 實例的時候傳入 store。 JS 代碼第 13-15 行，利用計算屬性返回 count。 HTML 中利用插值顯示 count 的數據。

4. mapState 輔助函數

當一個組件需要獲取多個狀態時候，將這些狀態都聲明為計算屬性會有些重復和冗余。為了解決這個問題，我們可以使用 mapState 輔助函數幫助我們生成計算屬性：

實例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div> 我是： {{ name }}，我的今年：{{ age }}</div>
    <div>{{countPlusAge}}</div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@3.1.2/dist/vuex.js"></script>
<script type="text/javascript">
  const store=new Vuex.Store({
    state: {
      name: '句號',
      age: 18
    }
  })
  var vm=new Vue({
    el: '#app',
    store,
    data() {
      return {
        count: 1
      }
    },
    computed: Vuex.mapState({
      // 箭頭函數可使代碼更簡練
      name: state=> state.name,

       // 傳字符串參數 'age' 等同于 `state=> state.age`
      age: 'age',

      // 為了能夠使用 `this` 獲取局部狀態，必須使用常規函數
      countPlusAge (state) {
        return state.age + this.count
      }
    })
  })
</script>
</html>

運行案例點擊 "運行案例" 可查看在線運行效果

代碼解釋 JS 代碼第 4-9 行，我們定義了倉庫 store。 JS 代碼第 12 行，創建 Vue 實例的時候傳入 store。 JS 代碼第 18-28 行，利用計算屬性分別返回 name、age、countPlusAge。

當映射的計算屬性的名稱與 state 的子節點名稱相同時，我們也可以給 mapState 傳一個字符串數組。

computed: Vuex.mapState([
  // 映射 this.age 為 store.state.age
  'age',
   // 映射 this.name 為 store.state.name
  'name'
])
//===等同于===computed:  Vuex.mapState({age:'age', name: 'name'})
//

5. 對象展開運算符

mapState 函數返回的是一個對象。我們如何將它與局部計算屬性混合使用呢？通常，我們需要使用一個工具函數將多個對象合并為一個，以使我們可以將最終對象傳給 computed 屬性。但是自從有了對象展開運算符，我們可以極大地簡化寫法：

computed: {
  localComputed () { /* ... */ },

  // 使用對象展開運算符將此對象混入到外部對象中
  ...Vuex.mapState({
    // ...
  })
}

6. 小結

本節，我們帶大家學習了 Vuex 中 state 的使用方式。主要知識點有以下幾點：

在 store 中定義 state 數據。
通過 $store.state 訪問 state 中的數據。
使用 mapState 輔助函數簡化獲取 state 中數據的寫法。

TML 中使用 <input> 元素表示單行輸入框和 <textarea> 元素表示多行文本框。

HTML中使用的 <input> 元素在 JavaScript 中對應的是 HTMLInputElement 類型。HTMLInputElement 繼承自 HTMLElement 接口：

interface HTMLInputElement extends HTMLElement {
    ...
}

HTMLInputElement 類型有一些獨有的屬性和方法：

name：表示 <input> 元素的名稱。
disabled：表示 <input> 元素是否禁止使用。在表單提交時不會包含被禁止的 <input> 元素。
autofocus：表示頁面加載時，該元素是否會自動獲得焦點。
required：表示表單提交時，該 <input>元素是否為必填。
value：表示該 <input> 元素的值。
validity：返回一個 ValidityState 對象，表示 <input> 元素的校驗狀態。是只讀屬性。
validationMessage：表示 <input> 元素校驗失敗時，用戶看到的報錯信息。如果該元素不需要校驗，或者通過校驗，該屬性為空字符串。是只讀屬性。
willValidate：表示表單提交時，<input> 元素是否會被校驗。是只讀屬性。
select()：選中 <input> 元素內部的所有文本。
click()：模擬鼠標點擊當前的 <input> 元素。

而在上述介紹 HTMLInputElement 類型中的屬性時，type 屬性要特別關注一下，因為根據 type 屬性的改變，可以改變<input>的屬性。

類型	描述
text	文本輸入
password	密碼輸入
submit	表單數據提交
button	按鈕
radio	單選框
checkbox	復選框
file	文件
hidden	隱藏的字段
image	定義圖像作為提交按鈕
reset	重置按鈕

省略 type 屬性與 type="text"效果一樣， <input> 元素顯示為文本框。

當 type 的值為text/password/number/時，會有以下屬性對 <input> 元素有效。

屬性	類型	描述
autocomplete	string	字符串on或off，表示<input>元素的輸入內容可以被瀏覽器自動補全。
maxLength	long	指定<input>元素允許的最多字符數。
size	unsigned long	表示<input>元素的寬度，這個寬度是以字符數來計量的。
pattern	string	表示<input>元素的值應該滿足的正則表達式
placeholder	string	表示<input>元素的占位符，作為對元素的提示。
readOnly	boolean	表示用戶是否可以修改<input>的值。
min	string	表示<input>元素的最小數值或日期。
max	string	表示<input>元素的最大數值或日期。
selectionStart	unsigned long	表示選中文本的起始位置。如果沒有選中文本，返回光標在<input>元素內部的位置。
selectionEnd	unsigned long	表示選中文本的結束位置。如果沒有選中文本，返回光標在<input>元素內部的位置。
selectionDirection	string	表示選中文本的方向。可能的值包括forward、backward、none。

下面創建一個 type="text" ，一次顯示 25 個字符，但最多允許顯示 50 個字符的文本框：

<input type="text" size="25" maxlength="50" value="initial value">

HTML 使用的 <textarea> 元素在 JavaScript 中對應的是 HTMLTextAreaElement 類型。HTMLTextAreaElement類型繼承自 HTMLElement 接口：

interface HTMLTextAreaElement extends HTMLElement {
    ...
}

HTMLTextAreaElement 類型有一些獨有的屬性和方法：

form：只讀屬性，返回對父表單元素的引用。如果此元素未包含在表單元素中，則它可以是同一文檔中 id 屬性同 form 值的 <form> 元素，如果沒有，該值為 null。
type：只讀屬性，返回字符串textarea。
value：string類型，返回/設置控件中包含的原始值。
textLength：只讀屬性，long類型，返回<textarea>元素的value值的長度。與 value.length 相同。
defaultValue：string類型，返回/設置textarea元素的默認值。
placeholder：string類型，返回/設置 textarea 元素的占位符，作為對輸入內容的提示。
rows：unsigned long類型，返回/設置textarea元素的可見文本行數。
cols：unsigned long類型，返回/設置 textarea 元素的可見寬度。
autofocus：boolean類型，返回/設置textarea元素在頁面加載時自動獲取焦點。
name：返回/設置 textarea 元素的名稱。
disabled：boolean類型，返回/設置 textarea 元素是否應當被禁用。
HTMLTextAreaElement.labels：NodeList類型，返回與此select元素關聯的標簽元素列表。
maxLength：long類型，返回/設置元素可以輸入的最大字符數。僅在值更改時才評估此約束。
minLength：long類型，返回/設置元素可以輸入的最小字符數。僅在值更改時才評估此約束。
accessKey：boolean類型，返回/設置訪問 textarea 的鍵盤快捷鍵。
readOnly：boolean類型，返回/設置 textarea 元素是否為只讀。
required：boolean 類型，返回/設置 textarea 元素是否為必填項。
tabIndex：long類型，返回/設置 textarea 元素的 tab 鍵導航順序中元素的位置。

下面創建一個高度為 25，寬度為 5 的 <textarea> 多行文本框。它與 <input> 不同的是，初始值顯示在 <textarea>...</textarea> 之間：

<textarea rows="25" cols="5">initial value</textarea>

注意：處理文本框值的時候最好不要使用 DOM 方法，而應該使用 value 屬性。

選擇文本

<input> 與 <textarea> 都支持 select() 方法，該方法用于選中文本框中的所有內容。該方法的語法為：

select(): void

下面看一個示例：

let textbox=document.forms[0].elements["input-box"];
textbox.select();

也可以在文本框獲得焦點時，選中文本框的內容：

textbox.addEventListener("focus", (event)=> {
    event.target.select();
});

select 事件

當選中文本框中的文本或使用 select() 方法時，會觸發 select 事件。

let textbox=document.forms[0].elements["textbox1"];
textbox.addEventListener("select", (event)=> {
    console.log(`Text selected: ${textbox.value}`);
});

取得選中的文本

HTML5 對 select 事件進行了擴展，通過 selectionStart 和 selectionEnd 屬性獲取文本選區的起點偏移量和終點偏移量。如下所示：

function getSelectedText(textbox){
    return textbox.value.substring(textbox.selectionStart,
textbox.selectionEnd);
}

注意：在 IE8 及更早版本不支持這兩個屬性。

選中部分文本

HTML5 提供了 setSelectionRange() 方法用于選中部分文本：

setSelectionRange(start, end, direction): void;

start：被選中的第一個字符的位置索引，從 0 開始。如果這個值比元素的 value 長度還大，則會被看做 value 最后一個位置的索引。
end：被選中的最后一個字符的下一個位置索引。如果這個值比元素的 value 長度還大，則會被看做 value 最后一個位置的索引。
direction：該參數是可選的字符串類型，表示選擇方向，可以傳入 “forward”/“backward”/“none” 三個值。

下面看一個例子：

<input type="text" id="text-sample" size="20" value="Hello World!">
<button onclick="selectText()">選中部分文本</button>
<script>
    function selectText() {
        let input=document.getElementById("text-sample");
        input.focus();
        input.setSelectionRange(4, 8);    // o Wo
    }
</script>

如果想要看到選中效果，必須讓文本框獲得焦點。

輸入過濾

不同文本框經常需要保證輸入特定類型或格式的數據，或許數據需要包含特定字符或必須匹配某個特定模式。而文本框并未提供驗證功能，因此要配合 JavaScript 腳本實現輸入過濾功能。

屏蔽字符

有些輸入框需要出現或不出現特定字符。如果想要將輸入框變成只讀的，只需要使用 preventDefault()方法將按鍵都屏蔽：

input.addEventListener("keypress", (event)=> {
    event.preventDefault();
});

而要屏蔽特定字符，就需要檢查事件的 charCode 屬性。如下所示，使用正則表達式實現只允許輸入數字的輸入框：

input.addEventListener("keypress", (event)=> {
    if (!/\d/.test(event.key)) {
        event.preventDefault();
    }
});

還有一個問題需要處理：復制、粘貼及涉及Ctrl 鍵的其他功能。在除IE 外的所有瀏覽器中，前面代碼會屏蔽快捷鍵Ctrl+C、Ctrl+V 及其他使用Ctrl 的組合鍵。因此，最后一項檢測是確保沒有按下Ctrl鍵，如下面的例子所示：

textbox.addEventListener("keypress", (event)=> {
if (!/\d/.test(String.fromCharCode(event.charCode)) &&
event.charCode > 9 &&
!event.ctrlKey){
event.preventDefault();
}
});

最后這個改動可以確保所有默認的文本框行為不受影響。這個技術可以用來自定義是否允許在文本框中輸入某些字符。

處理剪貼板

IE 是第一個實現了剪切板相關的事件以及通過JavaScript訪問剪切板數據的瀏覽器，其它瀏覽器在后來也都支持了相同的事件和剪切板的訪問，后來 HTML5 將其納入了規范。以下是與剪切板相關的 6 個事件：

beforecopy：發生復制操作前觸發。
copy：發生復制操作時觸發。
beforecut：發生剪切操作前觸發。
cut：發生剪切操作時觸發。
beforepaste：發生粘貼操作前觸發。
paste：發生粘貼操作時觸發。

剪切板事件的行為及相關對象會因瀏覽器而異。在 Safari、Chrome 和 Firefox 中，beforecopy、beforecut 和 beforepaste 事件只會在顯示文本框的上下文菜單時觸發，但 IE 不僅在這種情況下觸發，也會在 copy、cut 和 paste 事件在所有瀏覽器中都會按預期觸發。

在實際的事件發生之前，通過beforecopy、beforecut 和 beforepaste 事件可以在向剪貼板發送或從中檢索數據前修改數據。不過，取消這些事件并不會取消剪貼板操作。要阻止實際的剪貼板操作，必須取消 copy、cut和 paste 事件。

剪貼板的數據通過 clipboardData 對象來獲取，且clipboardData 對象提供 3 個操作數據的方法：

getData(format)：從剪貼板獲取指定格式的數據，接收的參數為指定獲取的數據格式，如果沒有指定數據格式或指定數據格式不存在，則此方法返回一個空字符串。
setData(format, data)：給剪貼板賦予指定格式的數據，第一個參數指定數據格式，第二個參數為第一個參數賦予數據。如果指定數據格式不存在，則將其添加到數據存儲的末尾；如果指定數據格式存在，則將數據替換在指定數據格式的位置。
clearData(format)：刪除指定格式的數據，接收的參數為指定要刪除的數據格式，如果指定格式不存在，則此方法不執行任何操作；如果此參數為空字符串或未提供，則將刪除所有格式的數據。

而 clipboardData 對象在 IE 中使用 window 獲取，在 Firefox、Safari 和 Chrome 中使用 event 獲取。為防止未經授權訪問剪貼板，只能在剪貼板事件期間訪問 clipboardData 對象；IE 會在任何時候都暴露 clipboardData 對象。因此，要兼容兩者，最好在剪貼板事件期間使用該對象。

function getClipboardText(event){
    var clipboardData=(event.clipboardData || window.clipboardData);
    return clipboardData.getData("text");
}
function setClipboardText (event, value){
    if (event.clipboardData){
        return event.clipboardData.setData("text/plain", value);
    } else if (window.clipboardData){
        return window.clipboardData.setData("text", value);
    }
}

如果文本框只有數字，那剪貼時，就需要使用paste事件檢查剪貼板上的文本是否無效。如果無效，可以取消默認行為：

input.addEventListener("paste", (event)=> {
    let text=getClipboardText(event);
    if (!/^\d*$/.test(text)){
        event.preventDefault();
    }
});

注意：Firefox、Safari和Chrome只允許在onpaste事件中訪問getData()方法。

自動切換

在 JavaScript 中，可以用在當前字段完成時自動切換到下一個字段的方式來增強表單字段的易用性。比如，常用手機號分為國家好加手機號。因此，我們設置 2 個文本框：

<form>
    <input type="text" name="phone1" id="phone-id-1" maxlength="4">
    <input type="text" name="phone2" id="phone-id-2" maxlength="11">
</form>

當文本框輸入到最大允許字符數后，就把焦點移到下一個文本框，這樣可以增加表單的易用性并加速數據輸入。如下所示：

<script>
    function tabForward(event){
        let target=event.target;
        if (target.value.length==target.maxLength){
            let form=target.form;
            for (let i=0, len=form.elements.length; i < len; i++) {
                if (form.elements[i]==target) {
                    if (form.elements[i+1]) {
                        form.elements[i+1].focus();
                    }
                    return;
                }
            }
        }
    }
    let inputIds=["phone-id-1", "phone-id-2"];
    for (let id of inputIds) {
        let textbox=document.getElementById(id);
        textbox.addEventListener("keyup", tabForward);
    }
</script>

這里，tabForward() 函數通過比較用戶輸入文本的長度與 maxLength 屬性的值來檢測輸入是否達到了最大長度。如果兩者相等，就通過循環表中的元素集合找到當前文本框，并把焦點設置到下一個元素。

注意：上面的代碼只適用于之前既定的標記，沒有考慮可能存在的隱藏字段。

HTML5

HTML5 新增了一些表單提交前，瀏覽器會基于指定的規則進行驗證，并在出錯時顯示適當的錯誤信息。而驗證會基于某些條件應用到表單字段中。

必填字段

表單字段中添加 required 屬性，用于標注該字段是必填項，不填則無法提交。該屬性適用于<input>、<textarea>和<select>。如下所示：

<input type="text" name="account" required>

也可以通過 JavaScript 檢測對應元素的 required 屬性來判斷表單字段是否為必填項：

let isRequired=document.forms[0].elements["account"].required;

也可以檢測瀏覽器是否支持 required 屬性：

let isRequiredSupported="required" in document.createElement("input");

注意：不同瀏覽器處理必填字段的機制不同。Firefox、Chrome、IE 和Opera 會阻止表單提交并在相應字段下面顯示有幫助信息的彈框，而Safari 什么也不做，也不會阻止提交表單。

數值范圍

而上面介紹的幾個如 number/range/datetime/datetime-local/date/month/week/time 幾個填寫數字的類型，都可以指定 min/max/step 等幾個與數值有關的屬性。step 屬性用于規定合法數字間隔，如 step="2"，則合法數字應該為 0、2、4、6，依次類推。如下所示：

<input type="number" min="0" max="100" step="5" name="count">

上面的例子是<input>中只能輸入從 0 到 100 中 5 的倍數。

也可以使用 stepUp() 和 stepDown() 方法對 <input> 元素中的值進行加減，它倆會接收一個可選參數，用于表示加減的數值。如下所示：

input.stepUp(); // 加1
input.stepUp(5); // 加5
input.stepDown(); // 減1
input.stepDown(10); // 減10

輸入模式

HTML5 還為文本添加了 pattern 屬性，用于指定一個正則表達式。這樣就可以自己設置 <input> 元素的輸入模式了。如下所示：

<input type="text" pattern="\d+" name="count">

注意模式的開頭和末尾分別假設有^和$。這意味著輸入內容必須從頭到尾都嚴格與模式匹配。

與新增的輸入類型一樣，指定 pattern 屬性也不會阻止用戶輸入無效內容。模式會應用到值，然后瀏覽器會知道值是否有效。通過訪問 pattern 屬性可以讀取模式：

let pattern=document.forms[0].elements["count"].pattern;

使用如下代碼可以檢測瀏覽器是否支持pattern 屬性：

let isPatternSupported="pattern" in document.createElement("input");

檢測有效性

HTML5 新增了 checkValidity() 方法，用來檢測表單中任意給定字段是否有效。而判斷的條件是約束條件，因此必填字段如果沒有值會被視為無效，字段值不匹配 pattern 屬性也會被視為無效。如下所示：

if (document.forms[0].elements[0].checkValidity()){
    // 字段有效，繼續
} else {
    // 字段無效
}

要檢查整個表單是否有效，可以直接在表單上調用checkValidity()方法。這個方法會在所有字段都有效時返回true，有一個字段無效就會返回false：

if(document.forms[0].checkValidity()){
    // 表單有效，繼續
} else {
    // 表單無效
}

validity 屬性會返回一個ValidityState 對象，表示 <input> 元素的校驗狀態。返回的對象包含一些列的布爾值的屬性：

customError：如果設置了 setCustomValidity() 就返回 true，否則返回false。
patternMismatch：如果字段值不匹配指定的 pattern 屬性則返回true。
rangeOverflow：如果字段值大于 max 的值則返回true。
rangeUnderflow：如果字段值小于 min 的值則返回true。
stepMisMatch：如果字段值與 min、max 和 step 的值不相符則返回true。
tooLong：如果字段值的長度超過了 maxlength 屬性指定的值則返回true。
typeMismatch：如果字段值不是 "email" 或"url" 要求的格式則返回true。
valid：如果其他所有屬性的值都為false 則返回true。與checkValidity()的條件一致。
valueMissing：如果字段是必填的但沒有值則返回true。

因此，通過 validity 屬性可以檢查表單字段的有效性，從而獲取更具體的信息，如下所示：

if (input.validity && !input.validity.valid){
    if (input.validity.valueMissing){
        console.log("請指定值.")
    } else if (input.validity.typeMismatch){
        console.log("請指定電子郵件地址.");
    } else {
        console.log("值無效.");
    }
}

禁用驗證

通過指定 novalidate 屬性可以禁止對表單進行任何驗證：

<form method="post" action="/signup" novalidate>
    <!-- 表單元素 -->
</form>

也可以在 JavaScript 通過 noValidate 屬性設置，為 true 表示屬性存在，為 false 表示屬性不存在：

document.forms[0].noValidate=true; // 關閉驗證

如果一個表單中有多個提交按鈕，那么可以給特定的提交按鈕添加formnovalidate 屬性，指定通過該按鈕無需驗證即可提交表單：

<form method="post" action="/foo">
    <!-- 表單元素 -->
    <input type="submit" value="注冊提交">
    <input type="submit" formnovalidate name="btnNoValidate"
value="沒有驗證的提交按鈕">
</form>

也可以使用 JavaScript 設置 formNoValidate 屬性：

// 關閉驗證
document.forms[0].elements["btnNoValidate"].formNoValidate=true;

總結

以上總結了 <input> 和 <textarea> 兩個元素的一些功能，主要是 <input> 元素可以通過設置 type 屬性獲取不同類型的輸入框，可以通過監聽鍵盤事件并檢測要插入的字符來控制文本框的內容。

還有一些與剪貼板相關的事件，并對剪貼的內容進行檢測。還介紹了一些 HTML5 新增的屬性和方法和新增的更多的 <input> 元素的類型，和一些與驗證相關的屬性和方法。

下來，筆者將按照以下目錄對this進行闡述：

this是什么？
this指向this在全局范圍內this在對象的構造函數內this在對象的方法內this在簡單函數內this在箭頭函數內this在一個事件偵聽器內
this綁定規則默認綁定隱式綁定顯示綁定（this修改）優先級
箭頭函數

1. this是什么？

this是JavaScript的一個關鍵字，但它時常蒙著面紗讓人無法捉摸，許多對this不明就里的同學，常常會有這樣的錯誤認知：

this在函數內指向函數自身 function foo(num){ console.log("foo: " + num); //記錄foo被調用次數 this.count++; } foo.count=0; for(let i=0; i<10; i++){ if(i > 5){ foo(i); } } console.log(foo.count); // 0， this并沒有指向foo函數，foo.count沒有進行任何操作
this在函數內指向函數的作用域 function foo(){ var a=2; this.bar(); } function bar(){ console.log(this.a); } foo();// undefined, window對象沒有bar這一屬性

2. this指向

this的指向取決于他所處的環境. 大致上，可以分為下面的6種情況:

this在全局范圍內
this在對象的構造函數內
this在對象的方法內
this在一個簡單的函數內
this在箭頭函數內
this在一個事件偵聽器內

2.1 this在全局范圍內

this在全局范圍內綁定什么呢？這個相信只要學過JS，應該都知道答案。如果不知道，同學真的應該反思自己的學習態度和方法是否存在問題了。話不多說，直接上代碼，一探究竟，揭開this在全局范圍下的真面目：

console.log(this); // Window

不出意外，this在全局范圍內指向window對象（）。通常, 在全局環境中, 我們很少使用this關鍵字, 因此對它也沒那么在意. 讓我們繼續看下一個環境.

2.2 this在對象的構造函數內

當我們使用new創建構造函數的實例時會發生什么呢？以這種方式調用構造函數會經歷以下四個步驟：

創建一個空對象；
將構造函數的作用域賦給新對象（this指向了這個新對象），繼承函數的原型；
執行構造函數中的代碼；
返回新對象。

看完上面的內容，大家想必也知道this在對象的構造函數內的指向了吧！當你使用new關鍵字創建一個對象的新的實例時, this關鍵字指向這個實例 .

舉個栗子：

function Human (age) {
    this.age=age;
}
let greg=new Human(22);
let thomas=new Human(24);

console.log(greg); // this.age=22
console.log(thomas); // this.age=24

// answer
Person { age:22}
Person { age:24}

2.3 this在對象方法內

方法是與對象關聯的函數的通俗叫法, 如下所示:

let o={
    sayThis(){
        console.log(this);
    }
}

如上所示，在對象的任何方法內的this都是指向對象本身 .

好了，繼續下一個環境！

2.4 this在簡單函數內

可能看到這里，許多同學心里會有疑問，什么是簡單函數？

其實簡單函數大家都很熟悉，就像下面一樣，以相同形式編寫的匿名函數也被認為是簡單函數（非箭頭函數）。

function hello(){
    console.log("hello"+this);
}

這里需要注意，在瀏覽器中，不管函數聲明在哪里，匿名或者不匿名，只要不是直接作為對象的方法，this指向始終是window對象（除非使用call,apply,bind修改this指向）。

舉個栗子說明一下：

// 顯示函數，直接定義在sayThis方法內，this指向依舊不變
function simpleFunction() {
    console.log(this);
}

var o={
    sayThis() {
        simpleFunction();
    }
}

simpleFunction(); // Window
o.sayThis(); // Window


// 匿名函數
var o={
    sayThis(){
        (function(){consoloe.log(this);})();
    }
} 
o.sayThis();// Window

對于初學者來說，this在簡單函數內的表現時常讓他們懵逼不已，難道this不應該指向對象本身？這個問題曾經也出現在我的腦海里過，沒錯，在寫代碼時我也踩過這個坑。

通常的，當我們要在對象方法內調用函數，而這個函數需要用到this時，我們都會創建一個變量來保存對象中的this的引用. 通常, 這個變量名稱叫做self或者that。具體說下所示：

const o={
    doSomethingLater() {
        const self=this;
        setTimeout(function() {
            self.speakLeet();
        }, 1000);
    },
    speakLeet() {
        console.log(`1337 15 4W350M3`);
    }
}

o.doSomethingLater(); // `1337 15 4W350M3`

心細的同學可能已經發現，這里的簡單函數沒有將箭頭函數包括在內，那么下一個環境是什么想必也能猜到啦，那么現在進入下一個環境，看看this指向什么。

2.5 this在箭頭函數內

和簡單函數表現不太一樣，this在箭頭函數中總是跟它在箭頭函數所在作用域的this一樣(在它直接作用域). 所以, 如果你在對象中使用箭頭函數, 箭頭函數中的this總是指向這個對象本身, 而不是指向Window.

下面我們使用箭頭函數，重寫一下上面的案例：

const o={
    doSomethingLater() {
        setTimeout(()=> this.speakLeet(), 1000);
    },
    speakLeet() {
        console.log(`1337 15 4W350M3`);
    }
}
o.doSomethingLater(); // `1337 15 4W350M3`

最后，讓我們來看看最后一種環境 - 事件偵聽器.

2.6 this在事件偵聽器內

在事件偵聽器內, this被綁定的是觸發這個事件的元素:

let button=document.querySelector('button');

button.addEventListener('click', function() {
    console.log(this); // button
});

3. this綁定規則

事實上，只要記住上面this在不同環境的綁定值，足以應付大部分工作。然而，好學的同學總是會忍不住想說，為什么呢？對，為什么this在這些情況下綁定這些值呢？學習，我們不能只知其然，而不知所以然。所以，現在就讓我們來探尋，this值獲取的真相吧。

現在，讓我們回憶一下，在講什么是this的時候，我們說到“this的綁定取決于他所處的環境”。這句話其實不是十分準確，準確的說，this不是編寫時綁定，而是運行時綁定。它依賴于函數調用的上下文條件。this綁定和函數聲明的位置無關，反而和函數被調用的方式有關。

當一個函數被調用時，會建立一個活動記錄，也稱為執行環境。這個記錄包含函數是從何處（call-stack）被調用的，函數是如何被調用的，被傳遞了什么參數等信息。這個記錄的屬性之一，就是在函數執行期間將被使用的this引用。this實際上是在函數被調用時建立的一個綁定，它指向什么是完全由函數被調用的調用點來決定的。

僅僅是規則

現在我們將注意力轉移到調用點如何決定在函數執行期間this指向哪里。

你必須考察call-site并判定4種規則中的哪一個適用。我們將首先獨立的解釋一下這4種規則中的每一種，之后我們來展示一下如果有多種規則可以適用調用點時，它們的優先級。

3.1 默認綁定規則

第一種規則來源于函數調用的最常見的情況：獨立函數調用?？梢哉J為這種this規則是在沒有其他規則適用時的默認規則。我們給它一個稱呼“默認綁定”.

現在來看這段代碼：

function foo(){
    console.log(this); 
}
var a=2;
demo(); // 2

當foo()被調用時，this.a解析為我們的全局變量a。為什么？因為在這種情況下，對此方法調用的this實施了默認綁定，所以使this指向了全局對象。

在我們的代碼段中，foo()是被一個直白的，毫無修飾的函數引用調用的。沒有其他的我們將要展示的規則適用于這里，所以默認綁定在這里適用。

如果strict mode在這里生效，那么對于默認綁定來說全局對象是不合法的，所以this將被設置為undefined。

'use strict'
function foo(){
    console.log(this.a); // TypeError: Cannot read property 'a' of undefined
}
const a=1;
foo();

function foo(){
	'use strict'
    console.log(this.a); // TypeError: Cannot read property 'a' of undefined
}
const a=1;
foo();

微妙的是，即便所有的this綁定規則都是完全基于調用點，如果foo()的內容沒有在strint mode下執行，對于默認綁定來說全局對象是唯一合法的；foo()的call-site的strict mode狀態與此無關。

function foo(){
    console.log(this.a); 
}
var a=1;
(function(){
	'use strict';
	foo(); // 1
})();

注意：在代碼中故意混用strict mode和非strict mode通常是讓人皺眉頭的。你的程序整體可能應當不是 Strict 就是非Strict。然而，有時你可能會引用與你的 Strict 模式不同的第三方包，所以對這些微妙的兼容性細節要多加小心。

3.2 隱式綁定

另一種要考慮的規則是：調用點是否有一個環境對象（context object），也稱為擁有者（owning）或容器（containing）對象。

讓我們來看這段代碼：

function foo() {
    console.log(this.a);
}
let o={
    a: 2,
    foo,
}
o.foo(); // 2

這里，我們注意到foo函數被聲明然后作為對象o的方法，無論foo()是否一開始就在obj上被聲明，還是后來作為引用添加（如上面代碼所示），都是這個函數被obj所“擁有”或“包含”。這里，調用點使用obj環境來引用函數，所以可以說 obj對象在函數被調用的時間點上“擁有”或“包含”這個函數引用。

當一個方法引用存在一個環境對象時，隱式綁定規則會說：是這個對象應當被用于這個函數調用的this綁定。

只有對象屬性引用鏈的最后一層是影響調用點的。比如：

function foo(){
    console.log(this.a);
}

var obj1={
    a:2,
    obj2:obj2
};
var obj2={
    a:42,
    foo:foo
};
obj1.obj2.foo(); // 42

隱式綁定的隱患

當一個隱含綁定丟失了它的綁定，這通常意味著它會退回到默認綁定，根據strict mode的狀態，結果不是全局對象就是undefined。

下面來看這段代碼：

function foo(){
    console.log(this.a);
}

var obj={
    a:2,
    foo
};
var bar=obj.foo;
var a="Global variable";
bar(); // "Global variable"

盡管bar似乎是obj.foo的引用，但實際上它只是另一個foo自己的引用而已。另外，起作用的調用點是bar()，一個直白，毫無修飾的調用，因此默認綁定適用于這里。

這種情況發生的更加微妙，更常見，更意外的方式，是當我們考慮傳遞一個回調函數時：

function foo(){
    console.log(this.a);
}

function doFoo(fn){
	fn();
}

var obj={
    a:2,
    foo,
};
var a="Global variable";
dooFoo(obj.foo); // "Global variable"

參數傳遞僅僅是一種隱含的賦值，而且因為我們在傳遞一個函數，它是一個隱含的引用賦值，所以最終結果和我們前一個代碼段一樣。同樣的，語言內建，如setTimeout也一樣，如下所示

function foo(){
    console.log(this.a);
}

var obj={
    a:2,
    foo,
};
var a="Global variable";
setTimeout(obj.foo, 100); // "Global variable"

把這個粗糙的setTimeout()假想實現當做JavaScript環境內建的實現的話：

function setTimeout(fn, delay){
    // 等待delay毫秒
    fn();
}

正如我們看到的，隱含綁定丟失了它的綁定是十分常見的，不管哪一種意外改變this的方式，你都不能真正地控制你的回調函數引用將如何被執行，所以你（還）沒有辦法控制調用點給你一個故意的綁定。但是我們可以使用顯示綁定強行固定this。

3.3 顯示綁定

我們看到隱含綁定，需要我們不得不改變目標對象使它自身包含一個對函數的引用，而后使用這個函數引用屬性來間接地（隱含地）將this綁定到這個對象上。

但是，如果你想強制一個函數調用使用某個特定對象作為this綁定，而不在這個對象上放置一個函數引用屬性呢？

js有提供call()、apply()方法，ES5中也提供了內置的方法 Function.prototype.bind,可以引用一個對象時進行強制綁定調用。

考慮這段代碼：

function foo(){
    console.log(this.a);
}
var obj={
    a:2,
};
foo.call(obj); // 2

通過foo.call(..)使用明確綁定來調用foo，允許我們強制函數的this指向obj。

如果你傳遞一個簡單原始類型值（string，boolean，或 number類型）作為this綁定，那么這個原始類型值會被包裝在它的對象類型中（分別是new String(..)，new Boolean(..)，或new Number(..)）。這通常稱為“boxing（封箱）”。

注意：就this綁定的角度講，call(..)和apply(..)是完全一樣的。它們確實在處理其他參數上的方式不同，但那不是我們當前關心的。

單獨依靠call和apply，仍然可能出現函數“丟失”自己原本的this綁定，或者被第三方覆蓋等問題。

但有一個技巧可以避免出現這些問題

考慮這段代碼：

function foo(){
    console.log(this.a);
}
var obj={
	a:2
};
var bar=function(){
	foo.call(obj);
}
bar(); // 2
setTimeout(bar, 100); // 2
bar.call(window); // 2

我們創建了一個函數bar()，在它的內部手動調用foo.call(obj)，由此強制this綁定到obj并調用foo。無論你過后怎樣調用函數bar，它總是手動使用obj調用foo。這種綁定即明確又堅定，該方法被開發者稱為 硬綁定(顯示綁定的變種)（hard binding）

用硬綁定將一個函數包裝起來的最典型的方法，是為所有傳入的參數和傳出的返回值創建一個通道：

function foo(something){
    console.log(this.a, something);
    return this.a + something;
}
var obj={
    a:2
};
var bar=function() {
    return foo.apply(obj, arguments);
}
var b=bar(3);
console.log(b); //  5

另一種表達這種模式的方法是創建一個可復用的幫助函數:

function foo(something){
    console.log(this.a, something);
    return this.a + something;
}

function bind(fn, obj){
    return function(){
        return fn.apply(obj, arguments);
    };
}

var obj={ a:2};
var bar=bind(foo, obj);
var b=bar(3);
console.log(b); // 5

由于硬綁定是一個如此常用的模式，它已作為ES5的內建工具提供，即前文提到的Function.prototype.bind：

function foo(something){
    console.log(this.a, something);
    return this.a + something;
}
var obj={ a:2};
var bar=foo.bind(obj);
var b=bar();
cobsole.log(b); // 5

bind(..)返回一個硬編碼的新函數，它使用你指定的this環境來調用原本的函數。

注意：在ES6中，bind(..)生成的硬綁定函數有一個名為.name的屬性，它源自于原始的目標函數（target function）。舉例來說：bar=foo.bind(..)應該會有一個bar.name屬性，它的值為"bound foo"，這個值應當會顯示在調用棧軌跡的函數調用名稱中。

3.4new 綁定

第四種也是最后一種this綁定規則

當在函數前面被加入new調用時，也就是構造器調用時，下面這些事情會自動完成：

一個全新的對象會憑空創建（就是被構建）
這個新構建的對象會被接入原形鏈（[[Prototype]]-linked）
這個新構建的對象被設置為函數調用的this綁定
除非函數返回一個它自己的其他對象，這個被new調用的函數將自動返回這個新構建的對象。

考慮這段代碼：

function foo(a){
    console.log(this.a);
}
var bar=new foo(2);
console.log(bar.a); // 2

通過在前面使用new來調用foo(..)，我們構建了一個新的對象并這個新對象作為foo(..)調用的this。 new是函數調用可以綁定this的最后一種方式，我們稱之為 new綁定（new binding）。

3.5 優先級

new綁定
顯示綁定
隱式綁定
默認綁定(嚴格模式下會綁定到undefined)

4. 箭頭函數

箭頭函數并非使用function關鍵字進行定義，而是通過所謂的“大箭頭”操作符：=>，所以不會使用上面所講解的this四種標準規范，箭頭函數從封閉它的（function或global）作用域采用this綁定，即箭頭函數會繼承自外層函數調用的this綁定。

執行 fruit.call(apple)時，箭頭函數this已被綁定，無法再次被修改。

function fruit(){
    return ()=> {
        console.log(this.name);
    }
}
var apple={
    name: '蘋果'
}
var banana={
    name: '香蕉'
}
var fruitCall=fruit.call(apple);
fruitCall.call(banana); // 蘋果

5. 小結

this是JavaScript的一個關鍵字，this不是編寫時綁定，而是運行時綁定。它依賴于函數調用的上下文條件。this綁定和函數聲明的位置無關，反而和函數被調用的方式有關。為執行中的函數判定this綁定需要找到這個函數的直接調用點。找到之后，4種規則將會以這個優先順序施用于調用點：

被new調用？使用新構建的對象。
被call或apply（或 bind）調用？使用指定的對象。
被持有調用的環境對象調用？使用那個環境對象。
默認：strict mode下是undefined，否則就是全局對

與這4種綁定規則不同，ES6的箭頭方法使用詞法作用域來決定this綁定，這意味著它們采用封閉他們的函數調用作為this綁定（無論它是什么）。它們實質上是ES6之前的self=this代碼的語法替代品。

在線咨詢

上一篇：javascript解析json字符串
下一篇：用django4、python3、html5、css

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

類型	描述
number	數字值的輸入
date	日期輸入
color	顏色輸入
range	一定范圍內的值的輸入
month	允許用戶選擇月份和年份
week	允許用戶選擇周和年份
time	允許用戶選擇時間（無時區）
datetime	允許用戶選擇日期和時間（有時區）
datetime-local	允許用戶選擇日期和時間（無時區）
email	電子郵件地址的輸入
search	搜索（表現類似常規文本）
tel	電話號碼的輸入
url	URL地址的輸入

整合營銷服務商

29《Vue 入門教程》Vuex 中 state 的

. 前言

2. 創建數據倉庫

3. 在 Vue 組件中獲得 Vuex 狀態

4. mapState 輔助函數

5. 對象展開運算符

6. 小結

選擇文本

select 事件

取得選中的文本

選中部分文本

輸入過濾

屏蔽字符

處理剪貼板

自動切換

HTML5

必填字段

更多輸入類型

數值范圍

輸入模式

檢測有效性

禁用驗證

總結

1. this是什么？

2. this指向

2.1 this在全局范圍內

2.2 this在對象的構造函數內

2.3 this在對象方法內

2.4 this在簡單函數內

2.5 this在箭頭函數內

2.6 this在事件偵聽器內

3. this綁定規則

僅僅是規則

3.1 默認綁定規則

3.2 隱式綁定

3.3 顯示綁定

3.4new 綁定

3.5 優先級

4. 箭頭函數

5. 小結

您的項目需求

1. this是什么？