<template>
<div>
<el-button @click="click()">let用法：点击看控制台</el-button>
<el-button @click="clickConst()">const用法：点击看控制台</el-button>
</div>
</template>
<script>
export default {
name: "Base",
methods: {
click: function () {
/*1、let作用域:自己最近的{}*/
let a = 10;//只在let命令所在的代码块内有效（在click方法外引用就会报错）。适用于for循环。
var c = [];
for (let i = 0; i < 10; i++) {
/*i用var定义,输出结果都是10，也就是说，所有数组c的成员里面的i，
指向的都是同一个i，导致运行时输出的是最后一轮的i的值，也就是10。*/
c[i] = function () {
console.log(i);
};
}
c[7]();//结果7，使用let定义时i是几输出就是几
//2、变量提升*/
for (let j = 0; j < 3; j++) {
// let j = 'abc';
console.log(j);//输出0 1 2
}
let bar = 2;
console.log("let:" + bar); // 必须先声明再使用，输出2
console.log("var:" + foo); // 变量先使用再声明会报错undefined
var foo = 2;
/*3、暂时性死区:意味着typeof不再是一个百分之百安全的操作。
本质：只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，
只有等到声明变量的那一行代码出现，才可以获取和使用该变量。
*/
if (true) {
// TDZ开始
tmp = 'abc';
console.log("tmp:" + tmp); // abc
let tmp; // TDZ结束
console.log("let声明：" + tmp); // undefined
tmp = 123;
console.log("tmp赋值：" + tmp); // 123
//eg.
typeof x;
console.log("typeOf：" + x);// undefined
let x;
console.log("x：" + x);// undefined
console.log(typeof undeclared_variable);// undefined 如果一个变量根本没有被声明，使用typeof反而不会报错。
}
function bar1(x = y, y = 2) {//此处x已声明，但是y没有声明，处于死区
console.log([x, y]);
}
bar1(); // undefined
function bar2(x = 3, y = x) {//此处x和y已声明，使用这两个变量没问题
console.log([x, y]);
}
bar2(); // [3,3]
var x1 = x1;
console.log(x1);// undefined
//let x1 = x1;
console.log(x1);// 报错(在变量x的声明语句还没有执行完成前，就去取x的值，导致报错”x 未定义“。)
/*4、不允许重复声明变量或参数，否则报错*/
/*5、变量嵌套定义时的特点：
* 1）外层无法读取内层作用域定义的内部变量,如变量 insane
* 2）内层可以定义与外层作用域同名的变量,如变量 insane1*/
{
{
{
{
{
let insane = 'Hello World'
}
//console.log("insane:"+insane); // 报错insane is not defined"
}
}
}
}
{
{
{
{
let insane1 = 'Hello World';
console.log("insane1:" + insane1); // 输出Hello World
{
let insane1 = 'Hello World1';
console.log("insane1:" + insane1); // 输出Hello World1
}
}
}
}
}
/*写法习惯*/
// IIFE 写法
(function () {
var tmp = ...;
...
}());
// 块级作用域写法
{
let tmp = ...;
...
}
/*块级作用域之中，函数声明语句的行为类似于let，在块级作用域之外不可引用。*/
function f() {
console.log('I am outside!');
}
(function () {
if (false) {
// 重复声明一次函数f
function f() {
console.log('I am inside!');
}
}
f();//I am outside!似乎if内声明的函数一直没有调用到
}());
},
clickConst: function () {
/*1、定义：const声明一个只读的常量。一旦声明，常量的值就不能改变。
* const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。
* */
const PI= 3.1415926;//不变的常量
// PI=3;//报错，不能重新赋值
// const foo;//const只声明不赋值也报错
/*2、const 作用域
* const的作用域与let命令相同：只在声明所在的块级作用域内有效。如下示例
* */
if (true) {
const MAX = 5;
}
//console.log(MAX);//MAX is not defined"
/*也有暂时性死区，声明的位置需要在使用前面，否则报错；
* 不能重复声明变量
* */
var message = "Hello!";
//const message = "Goodbye!";//报错，不能重复声明同一个变量
/*3、const本质：
* const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。
* 对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。
* 但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指向实际数据的指针，
* const只能保证这个指针是固定的（即总是指向另一个固定的地址），至于它指向的数据结构是不是可变的，
* 就完全不能控制了。因此，将一个对象声明为常量必须非常小心。*/
/*4、声明变量的方法
* var命令和function命令声明的全局变量，依旧是顶层对象的属性；
* 另一方面规定，let命令、const命令、class命令声明的全局变量，不属于顶层对象的属性。
* */
}
}
}
</script>
<style>
</style>