改变this指向、let和const关键字、箭头函数、箭头函数this指向问题、函数传递参数时的默认值、解构赋值、展开运算符、对象字面量简写

一、改变this指向

 事件处理函数中this -> 事件源

           

            + 普通函数中this -> window

            + 定时器this -> window

            + 自调用函数 this -> window

            + 对象Object方法中this -> 当前对象-> 调用该方法的引用变量指向的对象

        改变this指向

          函数方法call方法

             函数.call(this指向的新对象，参数1，参数2...)

          apply方法

            函数名.apply(this指向新对象,[参数1，参数2...])

          bind方法

            var新函数=函数名.bind(this指向新对象 )

 <button>按钮</button>

<script>
        var obj={
            name:'jack'
        }
        // var btn =document.querySelector('button')
        // btn.addEventListener('click',function(){
        //     console.log('this->',this)
        // })

        function fun(m,n){
            console.log('m',m,'n',n)
            console.log('this->',this)
        }
        // fun()
        // fun.call(obj ,10,20)
        // fun.apply(obj,[10,20])
        var newFun=fun.bind(obj)
        newFun(10,20)
    </script>

案例1：

    <script>
        var obj1={
            name:'rose'
        }
        var obj={
            name:'jack',
            say:function(){
                console.log('this->',this)  //改变当前this（Jack）指向（rose）obj1
            }
        }
        obj.say.call(obj1)
    </script>

案例2  充电宝示例

    <script>
        var jackObj = {
            name: 'jack',//姓名
            phoneBattery: 70,//手机电池电量70%
            // 给手机电池充电
            change: function (batteryNum) {
                this.phoneBattery = batteryNum
            },
        }

        var roseObj={
            name:'rose',//姓名
            phoneBattery:10,//电池电量10%

        }
        // rose 想借用Jack的充电宝充电  实际是使用jackobj 对象的change方法
        console.log('rose充电前电池电量',roseObj.phoneBattery);
        jackObj.change.call(roseObj,70)

        console.log('rose充电后电池电量',roseObj.phoneBattery);

    </script>

二、let和const关键字

        ES6新特性

        1.let和const关键字

           声明变量

           var num

           let num

           const num

  面试 2.区别

          let和var

             1.let没有变量提升(预解析) let声明变量必须先声明后使用

               console.log(num)

               var num=100

             2.let声明的变量，不能重复声明变量

               var num=100

               var num=200

             3.let具有块作用域

               全局作用域

               局部作用域

               块作用域  let

         const和let

            const声明的变量称为常量，只能赋值一次

            const num=100

            num=200 报错

        3.应用场景

          1.考虑兼容问题

             使用var

          2.变量可以多次改变值

            let

          3.变量只赋值一次后，不再改变

            const

             

            const button=documnet.querySelector('button')

           

  <script>
    function test1() {
      let num = 100
      console.log(num)
    }
    // test1()
    function test2() {
      let num = 100
      let num1 = 200 // Identifier 'num' has already been declared
      console.log(num)
    }
    // test2()
    function test3() {
      if (true) {
        let a = 100  //块作用域

      }
      for (var i = 0; i < 10; i++) {
        let b=200
        console.log('b',b);

      }
      console.log('b',b);//b is not defined

    }
    // test3()
    function test4(){
      const num=100
      // num=200  //Assignment to constant variable.
      console.log(num);
    }
    test4()
  </script>

三、箭头函数

 箭头函数

           function fn(){}//声明式

           var fn =function(){}函数表达式

          作用： 简化函数(匿名函数)的书写

           语法：

           ()=>{}

           function(){  

           }

        简写：

          1.形参只有一个，括号可以省略

          (m)=>{}

          m=>{}

          2.函数体只有一行代码 大括号可以省略

            ()=>{                            

                console.log('>>>')   ===>   ()=> console.log('>>>')

            }

          3.只有一行代码，并且代码是return语句，大括号和return都可以省略

             ()=>{return 100  } ===>()=>100

<button>按钮</button>  
    <script>
        const f1=()=>console.log('f1>>>')
        const f2=()=>100
        let v=f2()
        console.log('v',v)
        const getMax=(m)=>{
            let n=45
            var max=m
            if(n>max){
                max=n
            } 
            return max

        }
        const fun=function(){
            console.log('fun>>')
        }
        const fun1=()=>{
        // 函数体
            console.log('fun1>>>')
        }
        // fun1()
        const btn =document.querySelector('button')
        btn.addEventListener('click',()=>{
            console.log('函数体代码');

        })
        const obj={
            name:'jaclk',
            say:()=>{
                console.log('say');
            }
        }
    </script>

四、箭头函数this指向问题

          1.在事件处理函数中，this->事件源

          2.箭头函数中this指向  应用上下文中this对象

              应用上下文this对象

 <button>按钮</button>
    <script>
        const btn = document.querySelector('button')
        console.log('this->', this)//应用上下文this对象

        function test1() {
            btn.addEventListener('click', () => {
                console.log('this->', this)
            })
            const obj = {
                name: 'jack',
                say: () => {
                    console.log('obj this->', this)
                },


            }
            obj.say()

        }
        // btn.addEventListener('click', () => {
        //     console.log('this->', this)
        // })
        btn.addEventListener('click', function () {
            console.log('this->', this)//事件源btn

            // 对象方法中this所在的上下文环境  是 事件处理函数中
            const obj = {
                name: 'jack',
                say:()=>{

                // say: function () {
                    console.log('obj this->', this)//对象方法中this->对象
                },
            }
            obj.say()

        })

    </script>

五、函数传递参数时的默认值

     函数默认值

          ES5 实现方式

            m=m||100

          ES6实现方式

            function fun(m=100){}

 <script>
        function fn(m){
            m=m||100//没有传值m 默认为100
            console.log('m',m)
        }
        // fn(200)
        function fun(m=100){ //默认值m=100
            console.log('m',m)
        }
        fun(200)
    </script>

六、解构赋值

            快速从对象或者数组中取出成员的一个语法方式

            let{name,age}=obj

              注：大括号中变量名必须与对象属性名相同

 <script>
        function test2() {
            const arr = [1, 2, 3]
            // let a=arr[0]
            // let b=arr[1]
            // let c=arr[2]
            let [a, b, c] = arr//数组结构赋值
            console.log('a:', a, 'b:', b, 'c:', c)
        }
        test2()
        function test1() {
            const obj = {
                name: 'jack',
                score: 98,
                num: 1001,
                age: 18
            }
            // let name =obj.name//jack
            // let age=obj.age //age
            let { name, age, score, num } = obj  //结构对象赋值 给大括号中变量name和age
            console.log('name', name, 'age', age)
        }test1()
    </script>

七、 展开运算符

          let arr=[1,2,3]

          ...arr->1,2,3

          作用：数组合并

   <script>
        function test1(){
            let arr=[4,2,3]
            // console.log(...arr)
            let arr2=[4,5]
            let arr3=[...arr,...arr2]//[1,2,3,4,5]
            // let arr3=arr.concat(arr3)
            console.log('arr3',arr3);
        }
        // test1()
        function test2(){
            let obj1={
                name:'jack',
                age:18
            }
            let obj2={
                ...obj1,
                gender:'男'
            }
            console.log("obj2:",obj2)
        }
        test2()
    </script>

八、对象字面量简写

          对象属性名和值变量名相同时，只写一个

 <script>
        let name='jane'
        let age=18
        // let obj={
        //     name:'jack',
        //     age:18
        // }
        let obj={name,age}
        console.log(obj)//{nmae：'jane',age,'18'}
    </script>