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 默认绑定规则

第一种规则来源于函数调用的最常见的情况：独立函数调用。可以认为这种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. 小结

您的项目需求