这是我参与「第四届青训营 」笔记创作活动的第14天

1.块级作用域

1.let和const

0. let用于当变量需要改变时
1. const变量不需要改变

2.var没有块级作用域的问题

1.if的块级

<script>
var func；
    if(true){
        var name = 'abc';
        func = function(){
            console.log(name)
            }
        }
    func()
    console.log(name)
</script>

2. 全局和函数内部都可以输出name，因为if没有块级作用域的概念

2.for的块级

    <button type="button">按钮1</button>
    <button type="button">按钮2</button>
    <button type="button">按钮3</button>
    <button type="button">按钮4</button>
    <button type="button">按钮5</button>
    <script>
    var btns = document.getElementsByTagName('button')
        for(var i = 0;i<btns.length;i++){
            btns[i].onclick = function(){
                console.log('第' + i + '个被点击')
                //输出的是第五个按钮被点击
            }
        }
    </script>
​

2. 原因：i一直被改变；for没有块级作用域
3. 解决方法：闭包，因为函数是一个作用域
4. 或者将var改成let，let是有if和for的块级作用域

2.const的使用与注意事项

0. 使用const修饰的标识符为常量，不可以再次赋值
1. 当我们修饰的标识符不会被再次赋值时，就可以使用const来保证数据的安全性
2. const修饰的标识符在定义时必须赋值
3. 常量的含义是指向的对象不能修改，但可以改变对象内部的属性

<script>
const obj = {
      name: 'why',
      age :18
    }
    obj.name = 'abc';
    obj.age = 20;
</script>

3.对象字面量增强写法

1.属性的增强写法

<script>
    const name = 'abc';
    const age = 18;
    //ES5的写法
    const obj = {
      name : name;
      age : age;
    }
    //ES6的写法
    const obj = {
      name,
      age
    }
</script>

2.函数的增强写法

<script>
    //ES5的写法
    const obj = {
      run: function() {
      
    }
    //ES6的写法
    const obj = {
      run() {
      
      }
    }
</script>

4.箭头函数的使用

1.箭头函数的基本使用

<script>
//ES5中定义函数的方式：function
const aaa = function() {
}
//ES5中还有对象字面量中定义函数的方式
​
​
//箭头函数
const ccc = (参数列表) =>{
}
​
</script>

2.箭头函数参数和返回值

0. 参数

<script>
//放入两个参数
const sum = (num1,num2) => {
return num1 + num2
}
​
​
//放入一个参数时，小括号可以省略
const power = num => {
return num*num
}
</script>

2. 返回值

<script>
//函数代码块中有多行代码，正常写
const test = ()=> {
console.log('hello');
console.log('good');
}
​
//函数代码块中只有一行代码,会自动执行代码并将返回值返回数据
const mul = (num1,num2) =>num1 + num2
</script>

3.箭头函数中this的使用

0. 什么时候使用箭头函数：当我们准备把一个函数作为参数传入另外一个函数的时候
1. this的使用

<script>
//1、打印出来的是window
setTimeout(function() {
console.log(this)
},1000)


//2.打印出来的是window
setTimeout(()=>{
console.log(this)
},1000)


//3.
const obj = {
aaa() {
setTimeout(function() {
console.log(this);//在对象里面打印this，是window
})

setTimeout(()=>{
console.log(this)//打印obj对象
})
}
</script>

3. 箭头函数中的this是如何查找的： 向外层作用域中，一层层查找this，直到有this的定义
4. 示例

<script>
    const obj= {
      aaa() {
        setTimeout(function() {
          setTimeout(function() {
            console.log(this);//window
          })

          setTimeout(()=>{
            console.log(this);//window
          })
        })

          setTimeout(()=>{
            setTimeout(function() {
              console.log(this);//window
            })

            setTimeout(()=> {
              console.log(this);//obj
          })
        })
      }
    }
    obj.aaa();
  </script>