day10JS-this的使用规则

1. this情况总结

开启严格模式：

 "use strict"; //开启严格模式

1.全局：非严格this--->window ，严格 this--->window。
2.普通函数执行：函数名() 非严格this-->window ，严格 this--->undefined。
3.自执行函数：非严格this-->window ，严格 this--->undefined。
4.回调函数：非严格this-->window ，严格 this--->undefined。
回调函数中特殊（有定时器）情况：setTimeout, setInterval 非严格this--->window ，严格 this--->window。
5.箭头函数：没有自己的this，出现this也是指向上级上下中文中的this。
6.函数调用：看前面有没有点, 有点就指向点前面的内容。
7.事件： this---->DOM元素

案例：看视频做笔记

1.全局下指的是window。

console.log(this);//Window

3.自执行的函数一般是window，严格模式下是undefined。

//'use strict';
(function () {
      console.log(this)//window
})()

4.回调函数：一般来说是window,除非在执行回调函数「内部方法」做了特殊处理。

<body>
  <div id="box">11111</div>
  <script>
    box.onclick = function () {
      console.log(this)
    }
  </script>
</body>

setTimeout(function (){
   console.log(this);
}, 1000);

6.函数调用的情况

函数执行就看函数前有没有点，如果有，点前面是谁，this就是谁，如果没有，this就是window，或者严格模式下的undefined。

//'use strict'
function fn(){
  console.log(this)
}
fn();//这里的this就是window，在严格模式下就是undefined

var obj={
  name:"li",
  fn:fn,
}

obj.fn();//这里的this就是obj

2.关于this的练习题

练习1：

<body>
    <script>
        var name = "培训";

        function fn() {
            console.log(this.name)
        }

        var obj = {
            name: "你好世界",
            fn: fn
        }

        obj.fn();

        fn();

        (function () {
            this.fn();
        })();
    </script>
</body>

------------------------------------
答案：你好世界  培训  培训

<body>
    <script>
        //EC(g) go: name "培训"  , obj---0x001{name: "你好世界",fn: fn}
        //      vo: fn --- 0x002
        var name = "培训";

        function fn() {
            //EC(fn)---0x002 
            //<EC(g),EC(fn)>
            //this.name---obj.name  this.name---window.name  this.name---window.name
            console.log(this.name)// "你好世界"  "培训" "培训"
        }

        var obj = {
            name: "你好世界",
            fn: fn
        }

        obj.fn();//this--obj  , "你好世界"

        fn();//this--window，"培训"

        (function () {
            //EC()----0x003
            //<EC(g),EC()>
            //this.fn()---window.fn()
            this.fn();
        })();
    </script>
</body>

练习2：

    <body>
        <script>
            var a = 10;
            function foo() {
                console.log(this.a)
            }
            foo();
        </script>
    </body>

---------------------
答案：10
    <body>
        <script>
            //EC(g)  go: a 10 
            //       vo: foo---0x001
            var a = 10;
            function foo() {
                //EC(foo)---0x001
                //<EC(g),EC(foo)>
                //this.a----window.a
                console.log(this.a)//10
            }
            foo();
        </script>
    </body>

练习3：

    <body>
        <script>
            var a = 10;
                console.log('this1', this)
                console.log(window.a)
                console.log(this.a)
            }
            console.log(window.foo)
            console.log('this2', this)
            foo();

        </script>
    </body>
-------------------------------
答案：函数体 window window 10 10
    <body>
        <script>
            //EC(g)  go:a 10
            //       vo: foo----0x001
            var a = 10;
            function foo() {
                //EC(foo)----0x001
                //<EC(g),EC(foo)>
                //this---window
                console.log('this1', this)//'this1',window
                console.log(window.a)//10
                console.log(this.a)//10
            }
            console.log(window.foo)//函数体foo----0x001
            console.log('this2', this)//'this2',window
            foo();

        </script>
    </body>

练习4：

    <body>
        <script>
            let a = 10
            const b = 20

            function foo() {
                console.log(this.a)
                console.log(this.b)
            }
            foo();
            console.log(window.a)
        </script>
    </body>

-----------------------------------
答案：undefined undefined undefined
    <body>
        <script>
            //EC(g)  go:
            //       vo: foo----0x001 , a=10, b = 20  
            let a = 10
            const b = 20

            function foo() {
                //EC(foo)----0x001
                //<EC(g),EC(foo)>
                //this.a----window.a  this.b----window.b
                console.log(this.a)//undefined
                console.log(this.b)//undefined
            }
            foo();
            console.log(window.a)//undefined
        </script>
    </body>

练习5：

    <body>
        <script>
            var a = 1
            function foo() {
                var a = 2
                console.log(this)
                console.log(this.a)
            }
            foo();
        </script>
    </body>

----------------------------------
答案：window 1
    <body>
        <script>
            //EC(g)  go: a=1
            //       vo: foo---0x001
            var a = 1
            function foo() {
                //EC(foo)---0x001
                //<EC(g),EC(foo)>
                //ao: a=2
                //this----window
                var a = 2
                console.log(this)//window
                console.log(this.a)//1
            }
            foo();
        </script>
    </body>

练习6：

    <body>
        <script>
            var obj1 = {
                a: 1
            }
            var obj2 = {
                a: 2,
                foo1: function () {
                    console.log(this.a)
                },
                foo2: function () {
                    setTimeout(function () {
                        console.log(this)
                        console.log(this.a)
                    }, 0)
                }
            }
            var a = 3

            obj2.foo1()
            obj2.foo2()
        </script>
    </body>

-------------------------------------
答案：2 window 3

   <body>
        <script>
            //EC(g)  go: obj1---0x001{a: 1} ,obj2----0x002{ a, foo1, foo2}, a=3
            //       vo:
            var obj1 = {
                a: 1
            }
            var obj2 = {
                a: 2,
                foo1: function () {
                    //EC(foo1)---0x003
                    //<EC(g),EC(foo1)>
                    //this.a---obj2.a
                    console.log(this.a)//2
                },
                foo2: function () {
                    //EC(foo2)---0x004
                    //<EC(g),EC(foo2)>
                    //this---obj2
                    //遇到定时器重定向this,重定向为this---window
                    setTimeout(function () {
                        console.log(this)//window
                        console.log(this.a)//window.a=3
                    }, 0)
                }
            }
            var a = 3

            obj2.foo1()//this---obj2
            obj2.foo2()//this---obj2
        </script>
    </body>

练习7：

    <body>
        <script>
            let obj = {
                name: "li",
                fn: (function (n) {
                    console.log(this);
                    return function () {
                        console.log(this);
                    }
                })(10),
            }
            obj.fn();
        </script>
    </body>
--------------------------

答案：window  对象obj

    <body>
        <script>
            //EC(g)  go:
            //       vo: obj----0x001 {name: "li",fn:...}
            let obj = {
                name: "li",
                fn: (function (n) {
                    //EC(fn)----0x002
                    //<EC(g),EC(fn)>
                    //ao: n=10
                    //this---obj因为是自调用函数，this重定向为---window
                    console.log(this);//window
                    return function () {
                        //EC()----0x003
                        //<EC(fn),EC()>
                        //它是普通函数，所以this---window，但是这个函数又在对象obj中，所以this---obj
                        console.log(this);//obj
                    }
                })(10),
            }
            obj.fn();//this---obj
        </script>
    </body>

练习8：

    <body>
        <script>
            function fn() {
                console.log(this);
            }
            box.onclick = function () {
                console.log(this);
                fn()
            }
        </script>
    </body>

----------------------
答案：box元素  window
    <body>
        <script>
            //EC(g)  go:
            //       vo:fn---0x001
            function fn() {
                //EC(fn)----0x001
                //<EC(g),EC(fn)>
                //this---window
                console.log(this);//window
            }

            box.onclick = function () {
                //EC()---0x002
                //<EC(g),EC()>
                //this---box
                console.log(this);//box
                fn();
            }
        </script>
    </body>

练习9：

<body>
    <script>
        var num = 10;
        var obj = { num: 20 };
        obj.fn = (function (num) {
            this.num = num * 3;
            num++;
            return function (n) {
                this.num += n;
                num++;
                console.log(num);
            }
        })(obj.num);
        var fn = obj.fn;
        fn(5);
        obj.fn(10);
        console.log(num, obj.num)
    </script>
</body>

---------------------------------
答案：22 23 65 30
<body>
    <script>
        //EC(g) go:num 10 20*3=60 60+5=65, obj---0x001{ num: 20 20+10=30} ;
        //      vo:fn---
        var num = 10;
        var obj = { num: 20 };
        obj.fn = (function (num) {
            //EC(num) ----0X002      
            //<EC(g),EC(num)>    
            //ao: num=20 21 22 23   
            this.num = num * 3; //this---window(go).num 
            num++;
            return function (n) {
                //EC(n)-----0x003    
                //<EC(num),EC(n)>  
                //ao: n=5 10        
                this.num += n; //obj.num 
                num++;//没有，找上级
                console.log(num);//22 23
            }
        })(obj.num);

        var fn = obj.fn;//EC(n)-----0x003
        fn(5);//0x003(5)=22
        obj.fn(10);//this--->obj,EC(10)-----0x003
        console.log(num, obj.num)//65 30
    </script>
</body>

执行流程图：

练习10：

var obj = {
  name: 'obj',
  foo1: () => {
    console.log(this.name)
  },
  foo2: function () {
    console.log(this.name)
    return () => {
      console.log(this.name)
    }
  }
}
var name = 'window'
obj.foo1()
obj.foo2()()

-------------------------------
答案：window    obj   obj
    <body>
        <script>
            //EC(g)  go: obj---0x001{name: 'obj',foo1...,foo2...}
            //           name='window'
            //       vo:
            var obj = {
                name: 'obj',
                foo1: () => {
                    //EC(foo1)---0x002
                    //<EC(g),EC(foo1)>
                    //this是上级作用域window
                    console.log(this.name)//'window'
                },
                foo2: function () {
                    //EC(foo2)---0x003
                    //<EC(g),EC(foo2)>
                    //this---obj
                    console.log(this.name)//obj
                    return () => {
                        //EC()---0x004
                        //<EC(foo2),EC()>
                        //this是上级作用域
                        console.log(this.name)//obj
                    }
                }
            }
            var name = 'window'
            obj.foo1();//this---obj
            obj.foo2()();//this---obj
        </script>
    </body>

练习11：

    <body>
        <script>
            var name = 'window'
            var obj1 = {
                name: 'obj1',
                foo: function () {
                    //EC(foo)---0x003
                    //<EC(g),EC(foo)>
                    //this---obj1
                    console.log(this.name)//'obj1'
                }
            }

            var obj2 = {
                name: 'obj2',
                foo: () => {
                    console.log(this.name)//'window'
                }
            }
            obj1.foo()
            obj2.foo()
        </script>
    </body>

------------------------------
答案：obj1   window
    <body>
        <script>
            //EC(g)   go:name='window' ,obj1---0x001{name: 'obj1',foo:...},obj2 --0x002 {name: 'obj2',foo:...}
            //        vo:
            var name = 'window'
            var obj1 = {
                name: 'obj1',
                foo: function () {
                    //EC(foo)---0x003
                    //<EC(g),EC(foo)>
                    //this---obj1
                    console.log(this.name)//'obj1'
                }
            }

            var obj2 = {
                name: 'obj2',
                foo: () => {
                    //EC(foo)---0x004
                    //<EC(g),EC(foo)>
                    //this---obj1有因为是箭头函数，this重定向为上级作用域
                    console.log(this.name)//'window'
                }
            }

            obj1.foo()//this---obj1
            obj2.foo()//this---obj2
        </script>
    </body>

练习12：

var name = 'window'
var obj1 = {
  name: 'obj1',
  foo: function () {
    console.log(this.name)
    return function () {
      console.log(this.name)
    }
  }
}
var obj2 = {
  name: 'obj2',
  foo: function () {
    console.log(this.name)
    return () => {
      console.log(this.name)
    }
  }
}
var obj3 = {
  name: 'obj3',
  foo: () => {
    console.log(this.name)
    return function () {
      console.log(this.name)
    }
  }
}
var obj4 = {
  name: 'obj4',
  foo: () => {
    console.log(this.name)
    return () => {
      console.log(this.name)
    }
  }
}

obj1.foo()()
obj2.foo()()
obj3.foo()()
obj4.foo()()


-----------------------------------------
答案：
obj1.foo()() // 'obj1' 'window'
obj2.foo()() // 'obj2' 'obj2'
obj3.foo()() // 'window' 'window'
obj4.foo()() // 'window' 'window'

    <body>
        <script>
            //EC(g)   go:name='window' , obj1---0x001, obj2 --0x002 
            //           obj3---0x003, obj4 --0x004
            //        vo:
            var name = 'window'
            var obj1 = {
                name: 'obj1',
                foo: function () {
                    //EC(foo)---0x005
                    //<EC(g),EC(foo)>
                    //this---obj1
                    console.log(this.name)//'obj1'
                    return function () {
                        //EC()---0x006
                        //<EC(g),EC()>
                        //this---window
                        console.log(this.name)//'window'
                    }
                }
            }
            var obj2 = {
                name: 'obj2',
                foo: function () {
                    //EC(foo)---0x007
                    //<EC(g),EC(foo)>
                    //this---obj2
                    console.log(this.name)//'obj2'
                    return () => {
                        //EC()---0x008
                        //<EC(g),EC(foo)>
                        //this---obj1有因为是箭头函数，this重定向为上级作用域也是'obj2'
                        console.log(this.name)//'obj2'
                    }
                }
            }
            var obj3 = {
                name: 'obj3',
                foo: () => {
                    //EC(foo)---0x009
                    //<EC(g),EC(foo)>
                    //this---obj3有因为是箭头函数，this重定向为上级作用域也是window
                    console.log(this.name)//'window'
                    return function () {
                        //EC(foo)---0x010
                        //<EC(g),EC()>
                        //this---window
                        console.log(this.name)//'window'
                    }
                }
            }
            var obj4 = {
                name: 'obj4',
                foo: () => {
                    //EC(foo)---0x009
                    //<EC(g),EC(foo)>
                    //this---obj4有因为是箭头函数，this重定向为上级作用域'window'
                    console.log(this.name)//'window'
                    return () => {
                        //EC()---0x011
                        //<EC(g),EC(foo)>
                        //this---obj4有因为是箭头函数，this重定向为上级作用域'window'
                        console.log(this.name)//'window'
                    }
                }
            }

            obj1.foo()();//this---obj1,EC()---0x006()   'obj1' window
            obj2.foo()();//this---obj2,EC()---0x008()   'obj2' 'obj2'
            obj3.foo()();//this---obj3,EC(foo)---0x010()'window'  window
            obj4.foo()();//this---obj4,EC()---0x011()   'window''window'
        </script>
    </body>

练习13：

<body>
    <script>
        let x = 3,
        obj = {
            x: 5
        };
        obj.fn = (function () {
            this.x *= ++x;
            return function (y) {
                this.x *= (++x) + y;
                console.log(x);
            }
        })();

        let fn = obj.fn;
        obj.fn(6);
        fn(4);
        console.log(obj.x, x, window.x);
    </script>
</body>