一篇文章告诉你JavaScript的作用域和函数该这样理解

<script>
  // 声明 counter 函数
  function counter(x, y) {
    // 函数内部声明的变量
    let s = x + y;
    console.log(s); // 18
  }
  // 调用 counter 函数
  counter(10, 8);
  // 访问变量 s
  console.log(s); // 报错 外部无法访问函数内部的变量
</script>

<script>
  {
    // age 只能在该代码块中被访问
    let age = 18;
    console.log(age); // 正常
  }
  // 超出了 age 的作用域
  console.log(age); // 报错
  let flag = true;
  if(flag) {
    // str 只能在该代码块中被访问
    let str = 'hello world!';
    console.log(str); // 正常
  }
  // 超出了 age 的作用域
  console.log(str); // 报错
  for(let t = 1; t <= 6; t++) {
    // t 只能在该代码块中被访问
    console.log(t); // 正常
  }
  // 超出了 t 的作用域
  console.log(t); // 报错
</script>

<script>
  // 必须要有值
  const version = '1.0';
  // 不能重新赋值
  // version = '1.1';
  // 常量值为对象类型
  const user = {
    name: '小明',
    age: 18
  }
  // 不能重新赋值
  user = {};
  // 属性和方法允许被修改
  user.name = '小小明';
  user.gender = '男';
</script>

<script>
  // 此处是全局
  function sayHi() {
    // 此处为局部
  }
  // 此处为全局
</script>
<script>
  // 此处是全局
  function sayHi() {
    // 此处为局部
  }
  // 此处为全局
</script>

<script>
    // 全局变量 name
    let name = '小明';
  	// 函数作用域中访问全局
    function sayHi() {
      // 此处为局部
      console.log('你好' + name);
    }
    // 全局变量 flag 和 x
    let flag = true;
    let x = 10;
  	// 块作用域中访问全局
    if(flag) {
      let y = 5;
      console.log(x + y); // x 是全局的
    }
</script>

<script>
  // 全局作用域
  let a = 1;
  let b = 2;
  // 局部作用域
  function f() {
    let c;
    // 局部作用域
    function g() {
      let d = 'yo';
    }
  }
</script>

<script>
  // 全局作用域
  let a = 1;
  let b = 2;
  // 局部作用域
  function f() {
    let c;
    // let a = 10;
    console.log(a); // 1 或 10
    console.log(d); // 报错
    // 局部作用域
    function g() {
      let d = 'yo';
      // let b = 20;
      console.log(b); // 2 或 20
    }
    // 调用 g 函数
    g()
  }
  console.log(c); // 报错
  console.log(d); // 报错
  f();
</script>

<script>
  function foo() {
    let i = 0;
    // 函数内部分函数
    function bar() {
			console.log(++i);
    }
    // 将函数做为返回值
    return bar;
  }
  // fn 即为闭包函数
  let fn = foo();
  fn(); // 1
</script>

<script>
  // 访问变量 str
  console.log(str + 'world!');
  // 声明变量 str
  var str = 'hello ';
</script>
let和var都有提升，但是let定义的变量没有赋值之前是不可以使用、var可以使用是undefined

<script>
  // 调用函数
  foo();
  // 声明函数
  function foo() {
    console.log('声明之前即被调用...');
  }
  // 不存在提升现象
  bar();
  var bar = function () {
    console.log('函数表达式不存在提升现象...');
  }
</script>

<script>
  // 设置参数默认值
  function sayHi(name="小明", age=18) {
    document.write(`<p>我叫${name}，我今年${age}岁了。</p>`);
  }
  // 调用函数
  sayHi();
  sayHi('小红');
  sayHi('小刚', 21);
</script>

<script>
  // 求生函数，计算所有参数的和
  function sum() {
    // console.log(arguments);
    let s = 0;
    for(let i = 0; i < arguments.length; i++) {
      s += arguments[i];
    }
    console.log(s);
  }
  // 调用求和函数
  sum(5, 10); // 两个参数
  sum(1, 2, 4); // 两个参数
</script>

<script>
  function config(baseURL, ...other) {
    console.log(baseURL);
    // other 是真数组，动态获取实参
    console.log(other);
  }
  // 调用函数
  config('Http://baidu.com', 'get', 'JSON');
</script>

<script>
  // 箭头函数
  let foo = () => {
    console.log('^_^ 长相奇怪的函数...');
  }
  // 调用函数
  foo();
  // 更简洁的语法
  let fORM = document.querySelector('form');
  form.addEventListener('click', ev => ev.preventDefault());
</script>