JavaScript学习之路（一）

JS学习一

一、let&const暂时性死区

test1.1：

<script>
  var web="hao123.com";
  function func(){
    console.log(web);
  }
  func();
</script>

输出：hao123.com

test1.2：

<script>
  let web="hao123.com";
  function func(){
    console.log(web);
  }
  func();
</script>

输出：hao123.com

test2.1

<script>
  var web="hao123.com";
  function func(){
  	var web="baidu.com";
    console.log(web);
  }
  func();
</script>

输出：baidu.com

test2.2

<script>
  var web="hao123.com";
  function func(){
  	let web="baidu.com";
    console.log(web);
  }
  func();
</script>

输出：baidu.com

test2.3

<script>
  let web="hao123.com";
  function func(){
  	let web="baidu.com";
    console.log(web);
  }
  func();
</script>

输出：baidu.com

test2.4

<script>
  let web="hao123.com";
  function func(){
  	var web="baidu.com";
    console.log(web);
  }
  func();
</script>

输出：baidu.com

test3.1

<script>
  function func(){
    console.log(web);
  	var web="baidu.com";
  }
  func();
</script>

输出：undefined

test3.2

<script>
  function func(){
    console.log(web);
  	let web="baidu.com";
  }
  func();
</script>

输出：error

Uncaught ReferenceError: Cannot access 'web' before initialization
    at func (test1.html:14)
    at test1.html:17

test4.1

<script>
  function func(){
    const WEB="baidu.com";
    console.log(WEB);
  }
  func();
</script>

输出：baidu.com

test4.2

<script>
  function func(){
    console.log(WEB);
    const WEB="baidu.com";
  }
  func();
</script>

输出：error

Uncaught ReferenceError: Cannot access 'WEB' before initialization
    at func (test1.html:13)
    at test1.html:16

test4.3

<script>
  function func(){
    const WEB;
    WEB="baidu.com";
    console.log(WEB);
  }
  func();
</script>

输出：error

Uncaught SyntaxError: Missing initializer in const declaration

test4.4

<script>
  function func(){
    const WEB="baidu.com";
    WEB="hao123.com";
    console.log(WEB);
  }
  func();
</script>

输出：error

Uncaught TypeError: Assignment to constant variable.
    at func (test1.html:14)
    at test1.html:17

test5.1

<script>
  function func(){
    let web="baidu.com";
    let web="hao123.com";
    console.log(web);
  }
  func();
</script>

输出：error

Uncaught SyntaxError: Identifier 'web' has already been declared

test5.2

<script>
  function func(){
    var web="baidu.com";
    let web="hao123.com";
    console.log(web);
  }
  func();
</script>

输出：error

Uncaught SyntaxError: Identifier 'web' has already been declared

test5.3

<script>
  function func(){
    let web="baidu.com";
    var web="hao123.com";
    console.log(web);
  }
  func();
</script>

输出：error

Uncaught SyntaxError: Identifier 'web' has already been declared

test5.4

<script>
  function func(){
    var web="baidu.com";
    var web="hao123.com";
    console.log(web);
  }
  func();
</script>

输出：hao123.com

test2.1~test2.4对照说明同一个变量可以在不同作用域重复定义；在函数体内定义的变量优先级要大于函数体外。
test3.1~test3.2对照说明var定义的变量有提前声明的效果；let定义的变量则没有，必须先声明后使用。在函数参数声明时也一样。
test4.1~test3.3对照说明const也必须先声明后使用，而且必须声明时赋值，赋值后不能改变（但在不同作用域可以重复声明赋值）。
test4.1~test5.4对照说明var有变量提前声明的效果，不能在同一作用域重复定义，不过可以使用var重复定义（但最好不要）。

二、var|let|const共同点

在不同作用域都可以重复定义。

三、可怕的全局污染

<script>
  function func(){
    web="baidu.com";
  }
  func();
  console.log(web);
</script>

输出：baidu.com
这是非常可怕的，如果引用了其他的文件，可能会改变自己定义的变量值，因此一定要加var|let|const。

<script>
  function func(){
    var web="baidu.com";
  }
  func();
  console.log(web);
</script>

输出：error

Uncaught ReferenceError: web is not defined
    at test1.html:16

加上之后函数内部就无法破坏函数外部了。或者使用严格声明：

<script>
  function func(){
  	"use strict";
    web="baidu.com";
  }
  func();
  console.log(web);
</script>

不声明会报错：

Uncaught ReferenceError: web is not defined
    at func (test1.html:14)
    at test1.html:16

四、块级作用域

<script>
  var i=99;
  for(var i=0;i<5;i++){
  }
  console.log(i);
</script>

输出：5
var定义的i把外面的i污染了。

<script>
  var i=99;
  for(let i=0;i<5;i++){
  }
  console.log(i);
</script>

输出：99

let定义的i只在for中使用，并不影响到外面的i。
在{}中使用let，let只在{}有用，外部访问不到，而{}中的var仍然是全局变量。

五、const声明对象时

<script>
  const WEB={};
  WEB.M="hao123.com";
  console.log(WEB);
</script>

输出：{M: “hao123.com”}

<script>
  const WEB={};
  WEB.M="hao123.com";
  WEB.M="baidu.com";
  console.log(WEB);
</script>

输出：{M: “baidu.com”}
均没有问题，神奇~
如果不希望修改的话可以使用严格声明。

window的变量

var声明的变量会被window存储，如果自己声明赋值了window的screenLeft等属性这会是一件很可怕的事情。（不过我在*console.log(window.screenLeft);*时一直是0，不知道是什么情况，尚未解决）