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

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

. 前言

本小節(jié)我們將學(xué)習(xí)和使用 Vuex 中 state 的概念。包括如何創(chuàng)建 state、組件中獲取 state、以及輔助函數(shù) mapState 的使用方法。

2. 創(chuàng)建數(shù)據(jù)倉(cāng)庫(kù)

在上一小節(jié)中，我們已經(jīng)給大家寫了一個(gè)簡(jiǎn)單的示例，大家一定還記得 Vuex.Store({...}) 這個(gè)方法。在 Vuex 中，我們通過該方法創(chuàng)建一個(gè)數(shù)據(jù)倉(cāng)庫(kù)，并把數(shù)據(jù) state 傳入。例如：

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

那么，創(chuàng)建完數(shù)據(jù)倉(cāng)庫(kù)后，我們?cè)鯓硬拍茉?Vue 組件中使用它呢？我們知道，要使用 Vue 需要通過 new Vue () 創(chuàng)建一個(gè) Vue 實(shí)例，并傳入對(duì)象的參數(shù)。要在 Vue 中使用 store，只需要在創(chuàng)建 Vue 實(shí)例的時(shí)候?qū)?store 傳入即可:

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

3. 在 Vue 組件中獲得 Vuex 狀態(tài)

那么我們?nèi)绾卧?Vue 組件中展示狀態(tài)呢？由于 Vuex 的狀態(tài)存儲(chǔ)是響應(yīng)式的，從 store 實(shí)例中讀取狀態(tài)最簡(jiǎn)單的方法就是在計(jì)算屬性中返回某個(gè)狀態(tài)：

實(shí)例演示

<!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>

"運(yùn)行案例" 可查看在線運(yùn)行效果

代碼解釋 JS 代碼第 4-8 行，我們定義了倉(cāng)庫(kù) store。 JS 代碼第 11 行，創(chuàng)建 Vue 實(shí)例的時(shí)候傳入 store。 JS 代碼第 13-15 行，利用計(jì)算屬性返回 count。 HTML 中利用插值顯示 count 的數(shù)據(jù)。

4. mapState 輔助函數(shù)

當(dāng)一個(gè)組件需要獲取多個(gè)狀態(tài)時(shí)候，將這些狀態(tài)都聲明為計(jì)算屬性會(huì)有些重復(fù)和冗余。為了解決這個(gè)問題，我們可以使用 mapState 輔助函數(shù)幫助我們生成計(jì)算屬性：

實(shí)例演示

<!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: '句號(hào)',
      age: 18
    }
  })
  var vm=new Vue({
    el: '#app',
    store,
    data() {
      return {
        count: 1
      }
    },
    computed: Vuex.mapState({
      // 箭頭函數(shù)可使代碼更簡(jiǎn)練
      name: state=> state.name,

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

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

運(yùn)行案例點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

代碼解釋 JS 代碼第 4-9 行，我們定義了倉(cāng)庫(kù) store。 JS 代碼第 12 行，創(chuàng)建 Vue 實(shí)例的時(shí)候傳入 store。 JS 代碼第 18-28 行，利用計(jì)算屬性分別返回 name、age、countPlusAge。

當(dāng)映射的計(jì)算屬性的名稱與 state 的子節(jié)點(diǎn)名稱相同時(shí)，我們也可以給 mapState 傳一個(gè)字符串?dāng)?shù)組。

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

5. 對(duì)象展開運(yùn)算符

mapState 函數(shù)返回的是一個(gè)對(duì)象。我們?nèi)绾螌⑺c局部計(jì)算屬性混合使用呢？通常，我們需要使用一個(gè)工具函數(shù)將多個(gè)對(duì)象合并為一個(gè)，以使我們可以將最終對(duì)象傳給 computed 屬性。但是自從有了對(duì)象展開運(yùn)算符，我們可以極大地簡(jiǎn)化寫法：

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

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

6. 小結(jié)

本節(jié)，我們帶大家學(xué)習(xí)了 Vuex 中 state 的使用方式。主要知識(shí)點(diǎn)有以下幾點(diǎn)：

在 store 中定義 state 數(shù)據(jù)。
通過 $store.state 訪問 state 中的數(shù)據(jù)。
使用 mapState 輔助函數(shù)簡(jiǎn)化獲取 state 中數(shù)據(jù)的寫法。

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

HTML中使用的 <input> 元素在 JavaScript 中對(duì)應(yīng)的是 HTMLInputElement 類型。HTMLInputElement 繼承自 HTMLElement 接口：

interface HTMLInputElement extends HTMLElement {
    ...
}

HTMLInputElement 類型有一些獨(dú)有的屬性和方法：

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

而在上述介紹 HTMLInputElement 類型中的屬性時(shí)，type 屬性要特別關(guān)注一下，因?yàn)楦鶕?jù) type 屬性的改變，可以改變<input>的屬性。

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

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

當(dāng) type 的值為text/password/number/時(shí)，會(huì)有以下屬性對(duì) <input> 元素有效。

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

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

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

HTML 使用的 <textarea> 元素在 JavaScript 中對(duì)應(yīng)的是 HTMLTextAreaElement 類型。HTMLTextAreaElement類型繼承自 HTMLElement 接口：

interface HTMLTextAreaElement extends HTMLElement {
    ...
}

HTMLTextAreaElement 類型有一些獨(dú)有的屬性和方法：

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

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

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

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

選擇文本

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

select(): void

下面看一個(gè)示例：

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

也可以在文本框獲得焦點(diǎn)時(shí)，選中文本框的內(nèi)容：

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

select 事件

當(dāng)選中文本框中的文本或使用 select() 方法時(shí)，會(huì)觸發(fā) select 事件。

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

取得選中的文本

HTML5 對(duì) select 事件進(jìn)行了擴(kuò)展，通過 selectionStart 和 selectionEnd 屬性獲取文本選區(qū)的起點(diǎn)偏移量和終點(diǎn)偏移量。如下所示：

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

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

選中部分文本

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

setSelectionRange(start, end, direction): void;

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

下面看一個(gè)例子：

<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>

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

輸入過濾

不同文本框經(jīng)常需要保證輸入特定類型或格式的數(shù)據(jù)，或許數(shù)據(jù)需要包含特定字符或必須匹配某個(gè)特定模式。而文本框并未提供驗(yàn)證功能，因此要配合 JavaScript 腳本實(shí)現(xiàn)輸入過濾功能。

屏蔽字符

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

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

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

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

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

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

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

處理剪貼板

IE 是第一個(gè)實(shí)現(xiàn)了剪切板相關(guān)的事件以及通過JavaScript訪問剪切板數(shù)據(jù)的瀏覽器，其它瀏覽器在后來也都支持了相同的事件和剪切板的訪問，后來 HTML5 將其納入了規(guī)范。以下是與剪切板相關(guān)的 6 個(gè)事件：

beforecopy：發(fā)生復(fù)制操作前觸發(fā)。
copy：發(fā)生復(fù)制操作時(shí)觸發(fā)。
beforecut：發(fā)生剪切操作前觸發(fā)。
cut：發(fā)生剪切操作時(shí)觸發(fā)。
beforepaste：發(fā)生粘貼操作前觸發(fā)。
paste：發(fā)生粘貼操作時(shí)觸發(fā)。

剪切板事件的行為及相關(guān)對(duì)象會(huì)因?yàn)g覽器而異。在 Safari、Chrome 和 Firefox 中，beforecopy、beforecut 和 beforepaste 事件只會(huì)在顯示文本框的上下文菜單時(shí)觸發(fā)，但 IE 不僅在這種情況下觸發(fā)，也會(huì)在 copy、cut 和 paste 事件在所有瀏覽器中都會(huì)按預(yù)期觸發(fā)。

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

剪貼板的數(shù)據(jù)通過 clipboardData 對(duì)象來獲取，且clipboardData 對(duì)象提供 3 個(gè)操作數(shù)據(jù)的方法：

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

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

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);
    }
}

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

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

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

自動(dòng)切換

在 JavaScript 中，可以用在當(dāng)前字段完成時(shí)自動(dòng)切換到下一個(gè)字段的方式來增強(qiáng)表單字段的易用性。比如，常用手機(jī)號(hào)分為國(guó)家好加手機(jī)號(hào)。因此，我們?cè)O(shè)置 2 個(gè)文本框：

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

當(dāng)文本框輸入到最大允許字符數(shù)后，就把焦點(diǎn)移到下一個(gè)文本框，這樣可以增加表單的易用性并加速數(shù)據(jù)輸入。如下所示：

<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() 函數(shù)通過比較用戶輸入文本的長(zhǎng)度與 maxLength 屬性的值來檢測(cè)輸入是否達(dá)到了最大長(zhǎng)度。如果兩者相等，就通過循環(huán)表中的元素集合找到當(dāng)前文本框，并把焦點(diǎn)設(shè)置到下一個(gè)元素。

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

HTML5

HTML5 新增了一些表單提交前，瀏覽器會(huì)基于指定的規(guī)則進(jìn)行驗(yàn)證，并在出錯(cuò)時(shí)顯示適當(dāng)?shù)腻e(cuò)誤信息。而驗(yàn)證會(huì)基于某些條件應(yīng)用到表單字段中。

必填字段

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

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

也可以通過 JavaScript 檢測(cè)對(duì)應(yīng)元素的 required 屬性來判斷表單字段是否為必填項(xiàng)：

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

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

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

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

數(shù)值范圍

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

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

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

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

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

輸入模式

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

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

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

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

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

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

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

檢測(cè)有效性

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

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

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

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

validity 屬性會(huì)返回一個(gè)ValidityState 對(duì)象，表示 <input> 元素的校驗(yàn)狀態(tài)。返回的對(duì)象包含一些列的布爾值的屬性：

customError：如果設(shè)置了 setCustomValidity() 就返回 true，否則返回false。
patternMismatch：如果字段值不匹配指定的 pattern 屬性則返回true。
rangeOverflow：如果字段值大于 max 的值則返回true。
rangeUnderflow：如果字段值小于 min 的值則返回true。
stepMisMatch：如果字段值與 min、max 和 step 的值不相符則返回true。
tooLong：如果字段值的長(zhǎng)度超過了 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("請(qǐng)指定值.")
    } else if (input.validity.typeMismatch){
        console.log("請(qǐng)指定電子郵件地址.");
    } else {
        console.log("值無效.");
    }
}

禁用驗(yàn)證

通過指定 novalidate 屬性可以禁止對(duì)表單進(jìn)行任何驗(yàn)證：

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

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

document.forms[0].noValidate=true; // 關(guān)閉驗(yàn)證

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

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

也可以使用 JavaScript 設(shè)置 formNoValidate 屬性：

// 關(guān)閉驗(yàn)證
document.forms[0].elements["btnNoValidate"].formNoValidate=true;

總結(jié)

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

還有一些與剪貼板相關(guān)的事件，并對(duì)剪貼的內(nèi)容進(jìn)行檢測(cè)。還介紹了一些 HTML5 新增的屬性和方法和新增的更多的 <input> 元素的類型，和一些與驗(yàn)證相關(guān)的屬性和方法。

下來，筆者將按照以下目錄對(duì)this進(jìn)行闡述：

this是什么？
this指向this在全局范圍內(nèi)this在對(duì)象的構(gòu)造函數(shù)內(nèi)this在對(duì)象的方法內(nèi)this在簡(jiǎn)單函數(shù)內(nèi)this在箭頭函數(shù)內(nèi)this在一個(gè)事件偵聽器內(nèi)
this綁定規(guī)則默認(rèn)綁定隱式綁定顯示綁定（this修改）優(yōu)先級(jí)
箭頭函數(shù)

1. this是什么？

this是JavaScript的一個(gè)關(guān)鍵字，但它時(shí)常蒙著面紗讓人無法捉摸，許多對(duì)this不明就里的同學(xué)，常常會(huì)有這樣的錯(cuò)誤認(rèn)知：

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

2. this指向

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

this在全局范圍內(nèi)
this在對(duì)象的構(gòu)造函數(shù)內(nèi)
this在對(duì)象的方法內(nèi)
this在一個(gè)簡(jiǎn)單的函數(shù)內(nèi)
this在箭頭函數(shù)內(nèi)
this在一個(gè)事件偵聽器內(nèi)

2.1 this在全局范圍內(nèi)

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

console.log(this); // Window

不出意外，this在全局范圍內(nèi)指向window對(duì)象（）。通常, 在全局環(huán)境中, 我們很少使用this關(guān)鍵字, 因此對(duì)它也沒那么在意. 讓我們繼續(xù)看下一個(gè)環(huán)境.

2.2 this在對(duì)象的構(gòu)造函數(shù)內(nèi)

當(dāng)我們使用new創(chuàng)建構(gòu)造函數(shù)的實(shí)例時(shí)會(huì)發(fā)生什么呢？以這種方式調(diào)用構(gòu)造函數(shù)會(huì)經(jīng)歷以下四個(gè)步驟：

創(chuàng)建一個(gè)空對(duì)象；
將構(gòu)造函數(shù)的作用域賦給新對(duì)象（this指向了這個(gè)新對(duì)象），繼承函數(shù)的原型；
執(zhí)行構(gòu)造函數(shù)中的代碼；
返回新對(duì)象。

看完上面的內(nèi)容，大家想必也知道this在對(duì)象的構(gòu)造函數(shù)內(nèi)的指向了吧！當(dāng)你使用new關(guān)鍵字創(chuàng)建一個(gè)對(duì)象的新的實(shí)例時(shí), this關(guān)鍵字指向這個(gè)實(shí)例 .

舉個(gè)栗子：

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在對(duì)象方法內(nèi)

方法是與對(duì)象關(guān)聯(lián)的函數(shù)的通俗叫法, 如下所示:

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

如上所示，在對(duì)象的任何方法內(nèi)的this都是指向?qū)ο蟊旧?/strong> .

好了，繼續(xù)下一個(gè)環(huán)境！

2.4 this在簡(jiǎn)單函數(shù)內(nèi)

可能看到這里，許多同學(xué)心里會(huì)有疑問，什么是簡(jiǎn)單函數(shù)？

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

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

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

舉個(gè)栗子說明一下：

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

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

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


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

對(duì)于初學(xué)者來說，this在簡(jiǎn)單函數(shù)內(nèi)的表現(xiàn)時(shí)常讓他們懵逼不已，難道this不應(yīng)該指向?qū)ο蟊旧恚窟@個(gè)問題曾經(jīng)也出現(xiàn)在我的腦海里過，沒錯(cuò)，在寫代碼時(shí)我也踩過這個(gè)坑。

通常的，當(dāng)我們要在對(duì)象方法內(nèi)調(diào)用函數(shù)，而這個(gè)函數(shù)需要用到this時(shí)，我們都會(huì)創(chuàng)建一個(gè)變量來保存對(duì)象中的this的引用. 通常, 這個(gè)變量名稱叫做self或者that。具體說下所示：

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

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

心細(xì)的同學(xué)可能已經(jīng)發(fā)現(xiàn)，這里的簡(jiǎn)單函數(shù)沒有將箭頭函數(shù)包括在內(nèi)，那么下一個(gè)環(huán)境是什么想必也能猜到啦，那么現(xiàn)在進(jìn)入下一個(gè)環(huán)境，看看this指向什么。

2.5 this在箭頭函數(shù)內(nèi)

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

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

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

最后，讓我們來看看最后一種環(huán)境 - 事件偵聽器.

2.6 this在事件偵聽器內(nèi)

在事件偵聽器內(nèi), this被綁定的是觸發(fā)這個(gè)事件的元素:

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

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

3. this綁定規(guī)則

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

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

當(dāng)一個(gè)函數(shù)被調(diào)用時(shí)，會(huì)建立一個(gè)活動(dòng)記錄，也稱為執(zhí)行環(huán)境。這個(gè)記錄包含函數(shù)是從何處（call-stack）被調(diào)用的，函數(shù)是如何被調(diào)用的，被傳遞了什么參數(shù)等信息。這個(gè)記錄的屬性之一，就是在函數(shù)執(zhí)行期間將被使用的this引用。this實(shí)際上是在函數(shù)被調(diào)用時(shí)建立的一個(gè)綁定，它指向什么是完全由函數(shù)被調(diào)用的調(diào)用點(diǎn)來決定的。

僅僅是規(guī)則

現(xiàn)在我們將注意力轉(zhuǎn)移到調(diào)用點(diǎn) 如何決定在函數(shù)執(zhí)行期間this指向哪里。

你必須考察call-site并判定4種規(guī)則中的哪一個(gè)適用。我們將首先獨(dú)立的解釋一下這4種規(guī)則中的每一種，之后我們來展示一下如果有多種規(guī)則可以適用調(diào)用點(diǎn)時(shí)，它們的優(yōu)先級(jí)。

3.1 默認(rèn)綁定規(guī)則

第一種規(guī)則來源于函數(shù)調(diào)用的最常見的情況：獨(dú)立函數(shù)調(diào)用。可以認(rèn)為這種this規(guī)則是在沒有其他規(guī)則適用時(shí)的默認(rèn)規(guī)則。我們給它一個(gè)稱呼“默認(rèn)綁定”.

現(xiàn)在來看這段代碼：

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

當(dāng)foo()被調(diào)用時(shí)，this.a解析為我們的全局變量a。為什么？因?yàn)樵谶@種情況下，對(duì)此方法調(diào)用的this實(shí)施了默認(rèn)綁定，所以使this指向了全局對(duì)象。

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

如果strict mode在這里生效，那么對(duì)于默認(rèn)綁定來說全局對(duì)象是不合法的，所以this將被設(shè)置為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綁定規(guī)則都是完全基于調(diào)用點(diǎn)，如果foo()的內(nèi)容沒有在strint mode下執(zhí)行，對(duì)于默認(rèn)綁定來說全局對(duì)象是唯一合法的；foo()的call-site的strict mode狀態(tài)與此無關(guān)。

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

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

3.2 隱式綁定

另一種要考慮的規(guī)則是：調(diào)用點(diǎn)是否有一個(gè)環(huán)境對(duì)象（context object），也稱為擁有者（owning）或容器（containing）對(duì)象。

讓我們來看這段代碼：

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

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

當(dāng)一個(gè)方法引用存在一個(gè)環(huán)境對(duì)象時(shí)，隱式綁定規(guī)則會(huì)說：是這個(gè)對(duì)象應(yīng)當(dāng)被用于這個(gè)函數(shù)調(diào)用的this綁定。

只有對(duì)象屬性引用鏈的最后一層是影響調(diào)用點(diǎn)的。比如：

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

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

隱式綁定的隱患

當(dāng)一個(gè) 隱含綁定丟失了它的綁定，這通常意味著它會(huì)退回到默認(rèn)綁定，根據(jù)strict mode的狀態(tài)，結(jié)果不是全局對(duì)象就是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的引用，但實(shí)際上它只是另一個(gè)foo自己的引用而已。另外，起作用的調(diào)用點(diǎn)是bar()，一個(gè)直白，毫無修飾的調(diào)用，因此默認(rèn)綁定適用于這里。

這種情況發(fā)生的更加微妙，更常見，更意外的方式，是當(dāng)我們考慮傳遞一個(gè)回調(diào)函數(shù)時(shí)：

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

function doFoo(fn){
	fn();
}

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

參數(shù)傳遞僅僅是一種隱含的賦值，而且因?yàn)槲覀冊(cè)趥鬟f一個(gè)函數(shù)，它是一個(gè)隱含的引用賦值，所以最終結(jié)果和我們前一個(gè)代碼段一樣。同樣的，語(yǔ)言內(nèi)建，如setTimeout也一樣，如下所示

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

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

把這個(gè)粗糙的setTimeout()假想實(shí)現(xiàn)當(dāng)做JavaScript環(huán)境內(nèi)建的實(shí)現(xiàn)的話：

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

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

3.3 顯示綁定

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

但是，如果你想強(qiáng)制一個(gè)函數(shù)調(diào)用使用某個(gè)特定對(duì)象作為this綁定，而不在這個(gè)對(duì)象上放置一個(gè)函數(shù)引用屬性呢？

js有提供call()、apply()方法，ES5中也提供了內(nèi)置的方法 Function.prototype.bind,可以引用一個(gè)對(duì)象時(shí)進(jìn)行強(qiáng)制綁定調(diào)用。

考慮這段代碼：

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

通過foo.call(..)使用明確綁定來調(diào)用foo，允許我們強(qiáng)制函數(shù)的this指向obj。

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

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

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

但有一個(gè)技巧可以避免出現(xiàn)這些問題

考慮這段代碼：

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

我們創(chuàng)建了一個(gè)函數(shù)bar()，在它的內(nèi)部手動(dòng)調(diào)用foo.call(obj)，由此強(qiáng)制this綁定到obj并調(diào)用foo。無論你過后怎樣調(diào)用函數(shù)bar，它總是手動(dòng)使用obj調(diào)用foo。這種綁定即明確又堅(jiān)定，該方法被開發(fā)者稱為 硬綁定(顯示綁定的變種)（hard binding）

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

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

另一種表達(dá)這種模式的方法是創(chuàng)建一個(gè)可復(fù)用的幫助函數(shù):

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

由于硬綁定是一個(gè)如此常用的模式，它已作為ES5的內(nèi)建工具提供，即前文提到的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(..)返回一個(gè)硬編碼的新函數(shù)，它使用你指定的this環(huán)境來調(diào)用原本的函數(shù)。

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

3.4new 綁定

第四種也是最后一種this綁定規(guī)則

當(dāng)在函數(shù)前面被加入new調(diào)用時(shí)，也就是構(gòu)造器調(diào)用時(shí)，下面這些事情會(huì)自動(dòng)完成：

一個(gè)全新的對(duì)象會(huì)憑空創(chuàng)建（就是被構(gòu)建）
這個(gè)新構(gòu)建的對(duì)象會(huì)被接入原形鏈（[[Prototype]]-linked）
這個(gè)新構(gòu)建的對(duì)象被設(shè)置為函數(shù)調(diào)用的this綁定
除非函數(shù)返回一個(gè)它自己的其他對(duì)象，這個(gè)被new調(diào)用的函數(shù)將自動(dòng) 返回這個(gè)新構(gòu)建的對(duì)象。

考慮這段代碼：

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

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

3.5 優(yōu)先級(jí)

new綁定
顯示綁定
隱式綁定
默認(rèn)綁定(嚴(yán)格模式下會(huì)綁定到undefined)

4. 箭頭函數(shù)

箭頭函數(shù)并非使用function關(guān)鍵字進(jìn)行定義，而是通過所謂的“大箭頭”操作符：=>，所以不會(huì)使用上面所講解的this四種標(biāo)準(zhǔn)規(guī)范，箭頭函數(shù)從封閉它的（function或global）作用域采用this綁定，即箭頭函數(shù)會(huì)繼承自外層函數(shù)調(diào)用的this綁定。

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

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

5. 小結(jié)

this是JavaScript的一個(gè)關(guān)鍵字，this不是編寫時(shí)綁定，而是運(yùn)行時(shí)綁定。它依賴于函數(shù)調(diào)用的上下文條件。this綁定和函數(shù)聲明的位置無關(guān)，反而和函數(shù)被調(diào)用的方式有關(guān)。為執(zhí)行中的函數(shù)判定this綁定需要找到這個(gè)函數(shù)的直接調(diào)用點(diǎn)。找到之后，4種規(guī)則將會(huì)以這個(gè) 優(yōu)先順序施用于調(diào)用點(diǎn)：

被new調(diào)用？使用新構(gòu)建的對(duì)象。
被call或apply（或 bind）調(diào)用？使用指定的對(duì)象。
被持有調(diào)用的環(huán)境對(duì)象調(diào)用？使用那個(gè)環(huán)境對(duì)象。
默認(rèn)：strict mode下是undefined，否則就是全局對(duì)

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

在線咨詢

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

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

推薦閱讀

在網(wǎng)頁(yè)開發(fā)中，我們需要掌握的...

這個(gè)投訴通道真有用，7天解決各...

好奇！僅 13kB 大小的游戲，...

Z-BlogPHP主題導(dǎo)航高亮的方法（...

經(jīng)典技術(shù)回顧和借鑒-JSP編程

HTML是什么？

詞典筆大推薦：哪款更適合小學(xué)...

18個(gè)精選開源免費(fèi)的文件管理工具

程序員用javascript200多行代碼...

我是如何初識(shí)HTML，入前端的

如何做一個(gè)網(wǎng)站的優(yōu)化看這篇...

如何在鴻蒙ArkTS中動(dòng)態(tài)添加Tab內(nèi)容？

Chrome 95.0.4638.69發(fā)布：重點(diǎn)修復(fù)

簡(jiǎn)單網(wǎng)頁(yè)設(shè)計(jì)模板html

FFWBMS飛鴻網(wǎng)站簡(jiǎn)介

Django 3 + Vue.js 前后端分離Web開發(fā)實(shí)戰(zhàn)

知道這些后，再也不會(huì)“濫用”...

閑魚PC網(wǎng)頁(yè)版強(qiáng)勢(shì)回歸：重塑二...

鄭州機(jī)場(chǎng)橫版燈箱廣告媒體尺寸...

磁力鏈接前面加個(gè)magnet是什么意思

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

整合營(yíng)銷服務(wù)商

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

. 前言

2. 創(chuàng)建數(shù)據(jù)倉(cāng)庫(kù)

3. 在 Vue 組件中獲得 Vuex 狀態(tài)

4. mapState 輔助函數(shù)

5. 對(duì)象展開運(yùn)算符

6. 小結(jié)

選擇文本

select 事件

取得選中的文本

選中部分文本

輸入過濾

屏蔽字符

處理剪貼板

自動(dòng)切換

HTML5

必填字段

更多輸入類型

數(shù)值范圍

輸入模式

檢測(cè)有效性

禁用驗(yàn)證

總結(jié)

1. this是什么？

2. this指向

2.1 this在全局范圍內(nèi)

2.2 this在對(duì)象的構(gòu)造函數(shù)內(nèi)

2.3 this在對(duì)象方法內(nèi)

2.4 this在簡(jiǎn)單函數(shù)內(nèi)

2.5 this在箭頭函數(shù)內(nèi)

2.6 this在事件偵聽器內(nèi)

3. this綁定規(guī)則

僅僅是規(guī)則

3.1 默認(rèn)綁定規(guī)則

3.2 隱式綁定

3.3 顯示綁定

3.4new 綁定

3.5 優(yōu)先級(jí)

4. 箭頭函數(shù)

5. 小結(jié)

您的項(xiàng)目需求