text: (window.webpackJsonp=window.webpackJsonp||[]).push([[60],{334:function(s,t,a){"use strict";a.r(t);var n=a(28),e=Object(n.a)({},(function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ContentSlotsDistributor",{attrs:{"slot-key":s.$parent.slotKey}},[a("h1",{attrs:{id:"变量声明"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#变量声明"}},[s._v("#")]),s._v(" 变量声明")]),s._v(" "),a("h2",{attrs:{id:"变量声明方式"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#变量声明方式"}},[s._v("#")]),s._v(" 变量声明方式")]),s._v(" "),a("h3",{attrs:{id:"伴随js诞生的var"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#伴随js诞生的var"}},[s._v("#")]),s._v(" 伴随js诞生的var")]),s._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// 语法  var varName = value")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("var")]),s._v(" a "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("1")]),s._v("  "),a("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// 这样子你就得到了一个变量")]),s._v("\n")])])]),a("h3",{attrs:{id:"var缺陷场景分析"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#var缺陷场景分析"}},[s._v("#")]),s._v(" var缺陷场景分析")]),s._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("var")]),s._v(" specialUser "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[s._v('"cj"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// 在A文件定义")]),s._v("\n \n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("var")]),s._v(" specialUser "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[s._v('"fk"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// A文件很大，你没去寻找是否定义此变量，直接定义")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"token function"}},[s._v("getImportantInformation")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),s._v("specialUser"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// 在B文件定义")]),s._v("\n\n")])])]),a("p",[s._v("我们在定义一个变量，通常是"),a("strong",[s._v("跳过检查是否已经定义了此变量")]),s._v("，尤其在编写局部代码时，这就更加"),a("strong",[s._v("容易导致了命名引起的重复定义，导致一些核心变量被覆盖，造成系统重大破坏")]),s._v("，在上面的例子，就会因为spcialUser变量导致系统使用到该变量的地方全部行为异常，人"),a("strong",[s._v("要学会偷懒，是否定义此变量，编译器能够知道")]),s._v("，为什么要我们程序员去定义变量前，还要在项目文件下查找此变量是否定义呢，"),a("strong",[s._v("代码编译时，如果有此变量的定义，直接告诉我们冲突，我们根据需要更换就好")]),s._v("。")]),s._v(" "),a("h3",{attrs:{id:"js规范为了操碎了心，let的诞生了"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#js规范为了操碎了心，let的诞生了"}},[s._v("#")]),s._v(" js规范为了操碎了心，let的诞生了")]),s._v(" "),a("p",[s._v("其实上述覆盖掉了核心变量，我是在业务上遇到过的，估计不少程序猿遇到这种事情，"),a("strong",[s._v("然后ECMAScript官方就出来了，所有js语言的解释器，必须实现新的变量声明方式，帮助我们省下覆盖变量的操心。")])]),s._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("let")]),s._v(" name "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[s._v('"cj"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// 无论在何处定义")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("let")]),s._v(" name "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[s._v('"cj"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// 如果此变量在此作用域找了let name 这样的，编译器就会说，你这个名字用过了，要换个名字。")]),s._v("\n")])])]),a("p",[a("img",{attrs:{src:"https://s2.ax1x.com/2019/09/12/nDrJln.png",alt:"nDrJln.png"}})]),s._v(" "),a("p",[s._v("如果变量定义作用域有了同名的变量，解释器就会告诉你，你和别人重名了，需要换名字，"),a("strong",[s._v("有了let从此就不用再担心原先的变量被覆盖了，放心定义变量即可，很舒服。")])]),s._v(" "),a("h3",{attrs:{id:"不止如此，var反常行为"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#不止如此，var反常行为"}},[s._v("#")]),s._v(" 不止如此，var反常行为")]),s._v(" "),a("p",[s._v("在我们学习变量时，老师就会说，变量要先定义再访问，我们不服输，尝试一下先访问再定义")]),s._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[s._v("console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[s._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),s._v("name"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v("  "),a("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// 咦？ 为什么不会报错")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("var")]),s._v(" name "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[s._v('"cj"')]),s._v("\n")])])]),a("p",[s._v("嗯？此时js与老师的教导出现了冲突，没错，是老师错了，js可是个反常识的东西，当初为啥这样设计呢，不得而知，但是这里，可是增加了变量的使用成本，为什么这样说呢")]),s._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[s._v("code "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("1")]),s._v("\ncode "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("2")]),s._v("  "),a("span",{pre:!0,attrs:{class:"token comment"}},[s._v("//")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("var")]),s._v(" name "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("1")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// code 2 定义的变量，")]),s._v("\n")])])]),a("p",[s._v("有一天我们想在code1引用这个变量，也许会去搜索这个变量是否在code1前定义的，这是为了code1能够正常访问name,好的，你没猜错，我们又可以让编译器这个工具帮我们处理这件事，如果我们在定义变量之前访问变量，让编译器通知我们这里不能访问")]),s._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[s._v("console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[s._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),s._v("name"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v("  \n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("let")]),s._v(" name "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[s._v('"cj"')]),s._v("\n")])])]),a("p",[a("img",{attrs:{src:"https://s2.ax1x.com/2019/09/12/nDshD0.png",alt:"nDshD0.png"}})]),s._v(" "),a("p",[a("strong",[s._v("看到这熟悉的提示，喔，原来我们在定义变量之前访问了变量，这时候我们就修改一下代码调用顺序，其实，这种机制也保证了代码的显式调用顺序的健壮")])]),s._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[s._v("console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[s._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),s._v("name"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v("   "),a("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// 嗯？ 不行？")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("let")]),s._v(" name "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[s._v('"cj"')]),s._v("\n\nconsole"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[s._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),s._v("name"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v("  "),a("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// 这样才对")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("let")]),s._v(" name "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[s._v('"cj"')]),s._v("\n")])])]),a("h3",{attrs:{id:"不受控制的var"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#不受控制的var"}},[s._v("#")]),s._v(" 不受控制的var")]),s._v(" "),a("p",[s._v("由于程序少则几百行，我们公司大就几十万行，这就出现了人的名字的管理问题，如何解决重名问题呢，在此基础上拓展新的标识是一个不错的方法，"),a("strong",[s._v("比如中国很多重名的，地址就是一个额外标记的好东西")]),s._v("，我们程序也在内存里分块，但是这不是重点，在内存上一层的抽象，"),a("strong",[s._v("语言有一个叫做作用域的东西，相当于把程序分成不同的城市")]),s._v("，"),a("strong",[s._v("一般来说变量被限制在这些块里，通过这种方式，我们很多通用的变量名得以大量使用而不冲突")]),s._v("，因为它们不属于一个块，想象一下，如果中国只有一个城市，那么同名的人就可能得叫支付宝-1 支付宝-2了，变量在这种情况下也是一样，需要大量前缀，所以作用域的作用可想而知，当然作用域的设计来源复杂多，嘻嘻，以后有空研究下，")]),s._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("if")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),s._v("condition"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("var")]),s._v(" a "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("11")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("var")]),s._v(" a "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("33")]),s._v("  "),a("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// 此时我想在if外面的作用域定义了一个变量，却以不小心覆盖了if内部的变量a，导致程序异常")]),s._v("\n")])])]),a("p",[s._v("上述代码还有致命问题，"),a("strong",[s._v("一般来说，我们在不同作用域定义变量是互不影响的，但是上面的代码却违反了这个规则")]),s._v("，倒置变量可能的异常，"),a("strong",[s._v("上述代码在同步场景下，基本没什么影响，在异步场景就会因为后者定义覆盖的问题导致程序异常")])]),s._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("if")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),a("span",{pre:!0,attrs:{class:"token boolean"}},[s._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("var")]),s._v(" a "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("3")]),s._v("\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[s._v("setTimeout")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),s._v("  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=>")]),s._v("  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n      console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[s._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),s._v("a"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[s._v("//  5而不是3")]),s._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("var")]),s._v(" a "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("5")]),s._v("\n")])])]),a("p",[s._v("let 就使得js拥有了真正的块作用域")]),s._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("if")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),a("span",{pre:!0,attrs:{class:"token boolean"}},[s._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("let")]),s._v(" a "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("3")]),s._v("\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[s._v("setTimeout")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),s._v("  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=>")]),s._v("  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n      console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[s._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),s._v("a"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[s._v("//  3")]),s._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("let")]),s._v(" a "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("5")]),s._v("\n")])])]),a("h3",{attrs:{id:"let遗漏的场景"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#let遗漏的场景"}},[s._v("#")]),s._v(" let遗漏的场景")]),s._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("let")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token constant"}},[s._v("PI")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("3.14")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"token constant"}},[s._v("PI")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("3.14132")]),s._v("\n")])])]),a("p",[a("strong",[s._v("有时候我们需要定义一个变量，在很多地方使用，但是由于这个变量很重要，所以后续有对它的修改，都是会对程序造成破坏")]),s._v("，我们不希望，但是，"),a("strong",[s._v("当我们对一个变量赋值时，怎么知道其是不能修改的呢，嗯，只能阅读源码，确定其重要性，这样费事费力")]),s._v("，能让我们的工具人编译器帮助我们吗，是的，它做到了")]),s._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("const")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token constant"}},[s._v("PI")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("3.14")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token constant"}},[s._v("PI")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("3.14132")]),s._v("\n")])])]),a("p",[a("img",{attrs:{src:"https://s2.ax1x.com/2019/09/13/nDcZ4S.png",alt:"nDcZ4S.png"}})]),s._v(" "),a("p",[s._v("在我们想修改一些值时，如果"),a("strong",[s._v("作者有使用const标记为不可修改变量，那么我们修改时，编译器就会告诉我们，嘿，兄弟，动了这个变量系统就会挂掉，真是棒极了。")])]),s._v(" "),a("h2",{attrs:{id:"总结"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#总结"}},[s._v("#")]),s._v(" 总结")]),s._v(" "),a("p",[a("strong",[s._v("在新的语法大环境下，大家尽可能使用let 去定义变量，在这基础上，如果是不需要改变的变量，可以使用const去定义")]),s._v("，一方面可以避免别人修改，一方面也可以提升编译器效率。")])])}),[],!1,null,null,null);t.default=e.exports}}]);