this指向、arguments、预解析

this 会不断的变化，根据函数场景的不同，指向的值会不同。

规律：this 指向它的调用者，就是看有无调用者。

1.普通函数中的 this 指向

image.png

    <script>
        var length = 100;
        // 普通函数 
        function f1() {
            console.log(this.length);  //this 指向  window
        }
        f1()   //100    实际上是 window.f1()
    </script>

var length = 100;
        // 普通函数 
        function f1() {
            console.log(this.length);  //100   this 指向  window
            console.log(this.a);  //undefined
            console.log(length);   //100
            f2()

            console.log(this.c);    //undefined
            function f2() {
                var c = 23
            }
        }
        f1()   

2.对象中的 this 指向

image.png

 <script>
        var length = 100;
        function f1() {
            console.log(this.length);
        }
        var obj = {
            length: 10,
            f2: f1,
            f3: function () {
                console.log(this===obj);
            }
        }
        obj.f2() //10  obj 是调用者
        obj.f3()  //true
    </script>

3.数组中的 this 指向

image.png

    <script>
        function f1() {
            console.log(this === arr);
        }
        var arr = [f1, 1, 2, 3]
        arr[0]()  //this 指向 arr 数组
    </script>

4.arguments 当前传入参数的集合，好处：不确定传了多少个参数，可以通过 arguments.length来获取当前传入参数的个数，arguments[0] 来获取第一个参数。
arguments 表示参数集合，类似数组，并不等同于数组。

<script>
        function f1() {
            console.log(arguments);
        }
        f1(1, 2, 3, 4)
    </script>

5.阿里面试题

image.png image.png

    <script>
        var length = 100;
        function f1() {
            console.log(this.length);
        }
        var obj = {
            length: 10,
            f2: function (f1) {
                f1()  //f1() 被执行了，它其实是没有调用者的，默认指向window     所以结果是 100
                arguments[0]()   //arguments[0] === f1  f1()    所以结果是 2
            }
        }
        obj.f2(f1, 1, 1, 2, 3, 7) 
    </script>

6.this 指向面试题

        var length = 100
        function f1() {
            length = 200;    //不是局部变量，只是改变了 全局变量的值
            console.log(this.length);  //200  因为length 是全局的，所以函数内部可以访问和修改
        }
        f1()

   var length = 100
        function f1() {
            console.log(this.length);  //100
        }
        f1()

全局变量和局部变量同名时候的坑：全局变量是不会作用于同名局部变量的作用域的。
就是

 var length = 100  //全局变量
        function f1() {
            var length = 200;  //局部变量
            console.log(this.length);  //100  f1 的 this 指向 window，所以结果为 100
            console.log(length);  //200 
        }
        f1()

var a = 10
        function test() {
            console.log(a);  //undefined
            a = 100
            console.log(this.a);  //10
            var a;   //在test() 里面，第一步 预解析a=undefined,再逐行执行
            console.log(a);  //100
        }
        test()  //undefined 10 100

<script>
        var a = 10
        function test() {
            a = 100
            console.log(a);  //100  因为 预解析 var a=undefined 之后给 a 赋值为 100
            console.log(this.a);  //10  因为 this 指向 window
            var a;  
            console.log(a);  //100
        }
        test()  //100 10 100


    </script>

7.预解析，先解析出 var=undefined 和 function ，再 js 代码从上到下逐行执行

image.png

        console.log(b);  //undefined
        var b=21

    执行过程

        var b;
        console.log(b);
        b=21

8.美团面试题

        var a = 10
        function f1() {
            var b = 2 * a
            var a = 20;
            var c = a + 1
            console.log(b);  //NaN
            console.log(c);  //21
        }
        f1()

        // 预解析执行顺序
        // 1 
        // 全局  var a=undefined
        // 局部  f1=f f1() {...} var b,a,c=undefined 
        // 2
        // b=z*undefined   c=20+1
        

改一下

 <script>
        var a = 10
        function f1() {
            var b = 2 * a
            var a = 20;
            var c = a + 1
            console.log(this.a);  //this 指向window  10
            console.log(b);  //NaN
            console.log(c);  //21
        }
        f1()

        // 预解析执行顺序
        // 1 
        // 全局  var a=undefined
        // 局部  f1=f f1() {...} var b,a,c=undefined 
        // 2
        // b=z*undefined   c=20+1


    </script>