函数正常调用的时候this指向window
函数要有对象去调用，方法也是需要对象去执行的

  1.     <!-- 如何改变函数内部的this关键字指向 -->
  2.     <script>
  3.         var name = "张三"
  4.         function show(){
  5.             console.log(this.name);
  6.         }
  7.         //函数正常调用的时候this指向window
  8.         function go(){
  9.             var name = "李四"
  10.             show();
  11.         }go();
  12.         //函数要有对象去调用，方法也是需要对象去执行的

call,applay

call 可以改变函数内部this关键字的指向 funName.call(obj)
applay funName.applay(obj)

        // call 可以改变函数内部this关键字的指向 funName.call(obj)
        // applay funName.applay(obj)
        var name = "王五";
        var obj = {
            name: "李四"
        }
        function go(){
            console.log(this.name);
        }
        go(obj);
        go.call(obj);
        go.apply(obj);

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

        /*
        应用场景：传递多个参数的情况
        call  依次去传递
        applay  需要传递数组
        */
        var name = "window"
        var zhang = {
            name: "张三"
        }
        function show(a,b){
            console.log(this.name);
            console.log(a + b);
        }
        // show()
        // show.call(zhang,2,3)
        show.apply(zhang,[1,2])

bind

bind绑定的函数不会马上执行，只是改变了函数上下文的执行环境
call,applay调用的时候马上执行

        /*
        bind绑定的函数不会马上执行，只是改变了函数上下文的执行环境
        call,applay调用的时候马上执行
        */
        var name = "window"
        var zhang = {
            name: "张三"
        }
        var show = function(a,b){
            console.log(this.name);
            console.log(a + b);
        }.bind(zhang);
        show(2,3);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">按钮</button>
    <script>
        var id = "1001"
        var btn = document.getElementById("btn");
        btn.onclick = function(){
            // console.log(this.id);
            setTimeout(function(){
                console.log(this.id)
            }.bind(btn),1000)
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">按钮</button>
    <script>
        var id = "1001"
        var btn = document.getElementById("btn");
        btn.onclick = function(){
            var self = this;
            setTimeout(function(){
                console.log(this.id)
            }.bind(self),1000)
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">按钮</button>
    <script>
        var id = "1001"
        var btn = document.getElementById("btn");
        btn.onclick = function(){
            setTimeout(function(){
                console.log(this.id)
            }.bind(this),1000)
        }
    </script>
</body>
</html>

使用场景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">按钮</button>
    <script>
        var id = "1001"
        var btn = document.getElementById("btn");
        btn.onclick = function(){
            // console.log(this.id);
            setTimeout(function(){
                console.log(this.id)
            },1000)
        }
    </script>
</body>
</html>

箭头

可以使用箭头函数解决this指向的问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">按钮</button>
    <script>
        //可以使用箭头函数解决this指向的问题
        var id = "1001"
        var btn = document.getElementById("btn");
        btn.onclick = function(){
            setTimeout(()=>{
                console.log(this.id);
            },1000)
        }
    </script>
</body>
</html>