5.函数内部this关键字的指向

5.1函数中this的指向

函数正常调用时，this指向window

                 var name="张三"
        function show(){
            console.log(this.name)
        }
        function go(){
            var name="李四"
            console.log(this.name)
        }
        go();//  张三  window.go();

5.2改变函数内部关键字的指向

如何改变this关键字的指向 call, apply, bind

5.2.1 call 改变函数内部this关键字指向 funName.call(obj)

call，apply调用的时候马上执行

                var name="王五";
        var obj={
            name:"李四"
        }
        function go(){
            console.log(this.name)
        }
        go();//王五
        go.call(obj);//李四

5.2.2apply funName.apply(obj)

var name="王五";
        var obj={
            name:"李四"
        }
        function go(){
            console.log(this.name)
        }
        go();//王五
        go.apply(obj);//李四

5.2.3 bind

bind** 绑定的函数不会马上执行，只是改变了函数上下文的执行环境**

                 var name="window"
        var meng={
            name:"孟"
        }
        var show=function(a,b){
            console.log(this.name);//孟
            console.log(a+b);//5
        }.bind(meng);
        show(2,3);

应用场景

        <button id="btn">按钮</button>
    <script>
        var id="1000";
        var btn=document.getElementById("btn")
        btn.onclick=function(){
            console.log(this.id)//btn
        }

        <button id="btn">按钮</button>
    <script>
        var id="1000";
        var btn=document.getElementById("btn")
        btn.onclick=function(){
          window.setTimeout(function(){
                console.log(this.id)//1000
           },1000)
        }

使用bind

                var id="1000";
        var btn=document.getElementById("btn")
        btn.onclick=function(){
           window.setTimeout(function(){
                console.log(this.id)//btn
            }.bind(btn),1000)
        }
                var id="1000";
        var btn=document.getElementById("btn")
        btn.onclick=function(){
            var self=this;
            window.setTimeout(function(){
            console.log(this.id)//btn
            }.bind(self),1000)
        }

使用定时器

                var id="1000";
        var btn=document.getElementById("btn")
        btn.onclick=function(){
            setTimeout(()=>{
                console.log(this.id)//btn
            },1000)
        }

call 和apply的区别

应用场景：传递多个参数的情况
call依次去传递
apply 需要传递数组

                var name="window"
        var meng={
            name:"孟"
        }
        function show(a,b){
            console.log(this.name);
            console.log(a+b)
        }
        show(1,2)
        show.call(meng,2,3);
        show.apply(meng,[2,3])