1、全局中的this

     console.log(this);//window

2、函数内的this

    // 非严格模式时，函数内的this指向window
    // 严格模式时，函数内this指向undefined

    // function fn(){
    //     console.log(this);
    // }
    // fn()
    // function fn1(){
    //     function fn2(){
    //         console.log(this);
    //     }
    //     fn2();
    // }
    // fn1();

    //  var obj={
    //     init(){
    //         // 方法里面还有个函数
    //         function fn3(){
    //             console.log(this) // window
    //         }
    //         fn3()
    //     }

    // }

    // obj.init();
    // var obj={
    //     a:2,
    //     // 方法
    //     init(){

    //             console.log(this)
    //         }

    //     }

    // obj.init(); // this指向对象

3、对象中this

    // 属性上的this指向对象外的this指向
    // 方法中this指向当前对象
    //    var a=222
    //     var obj = {
    //         a: 1,
    //         b: this,
    //         f:this.a,
    //         //方法
    //         c: function () {
    //             console.log(this)
    //         }
    //     }
    //   console.log(obj.b);//this指向 window
    //   console.log(obj.f); //Obj外面没变量就是 undefined ,有变量a就是222
    // obj.c() //{a: 1, b: Window, f: 222, c: ƒ}

4、事件中的this

    // 事件回调函数中的this指向侦听事件的对象
    // document.addEventListener("click",clickHandler);
    // function clickHandler(e){
    //     console.log(this);
    // }

    // 5、普通回调函数中的this
    // 非严格模式时，函数内的this指向window
    // 严格模式时，函数内this指向undefined
    // function fn(f){
    //     f();
    // }
    // function fn1(){
    //     console.log(this);
    // }

    // fn(fn1);

时钟

    // // this指向window
    // setTimeout(function () {
    //     console.log(this)
    // }, 1000)
    // // 都是 this指向window
    // var arr = [1, 2, 3];
    // arr.forEach(function () {
    //     console.log(this);
    // })

6、部分数组的方法中有一个thisArg的参数，

    //   当设置这个参数后，this将会指向这个thisArg
    // forEach、map、every、some、filter、find、findLast、findIndex、findLastIndex、flatMap
     var arr=[1,2,3];
     arr.forEach(function(){
         console.log(this);//指向这个对象 {a: 1}
     },{a:1})

        var arr = [1, 2, 3];
        arr.forEach(() => {
            console.log(this);//箭头函数外面this是啥就是啥，不一定window
        })
     
     
       var arr = [1, 2, 3];
        arr.forEach(function () {
            console.log(this);//指向window
        })

7、当使用arguments调用回调函数时

    // 指向当前回调函数上下文中arguments对象，也就是下面的这个fn中的arguments
    /**
     * arguments对象是所有（非箭头）函数中都可用的局部变量。你可以使用arguments对象在函数中引用函数的参数。此对象包含传递给函数的每个参数，第一个参数在索引 0 处。
     *
     *arguments对象不是一个 Array 。它类似于Array，但除了 length 属性和索引元素之外没有任何Array属性。例如，它没有 pop 方法。但是它可以被转换为一个真正的Array

    * arguments.length来确定传递给函数参数的个数
    */
    // function fn(){
    //     arguments[0]();// 调用第一个传进来的函数
    //   // 要是传入第二个实参 那就是  arguments[1]
    // }
    // function fn1(){
    //     console.log(this)//this指向 Arguments [ƒ, callee: ƒ, Symbol(Symbol.iterator): ƒ]
    // }
    // fn(fn1);

8、箭头函数

    // 箭头函数内的this指向箭头函数外的this指向

    // var obj = {
    //     // 指向对象
    //     play() {
    //         console.log(this); //{play: ƒ, clickHandler: ƒ}
    //         var f = () => {
    //             console.log(this)//{play: ƒ, clickHandler: ƒ}
    //         }
    //         f();
    //         document.addEventListener("click", e => this.clickHandler(e));
    //     },
    //     clickHandler(e) {

    //     }
    // }
    // obj.play()


    //     var obj={
    //         // 对象方法写法
    //         a:function(){
    //             console.log(this)//{a: ƒ, b: ƒ, c: ƒ}
    //         },
    //         b(){
    //             console.log(this);//{a: ƒ, b: ƒ, c: ƒ}
    //         },
    //           // 这个箭头函数指向对象外面就是 // window
    //         c:()=>{
    //             console.log(this); // window
    //         }
    //     }
    //   console.log(obj);//{a: ƒ, b: ƒ, c: ƒ}
    //     obj.a()
    //     obj.b()
    //     obj.c();

9、call\apply\bind

    // 严格模式时，第一个参数传入什么this指向什么
    // 非严格模式时，null和undefined传入第一个参数，this指向window，除此外所有非对象类型转换为对象类型

10、ES6类中的this

    // class Box {
    //     static a = 1;
    //     static b = this.a//静态属性 this指向Box类名
    //     num = 4;
    //     sum = this.num;//非静态属性，就是实例化对象属性，this指向实例化的对象 b=new Box() b就是实例化对象，谁调用这个sum,this指向谁
    //     constructor() {
    //         // this  构造函数中this指向实例化对象
    //         console.log(this)// Box {num: 4, sum: 4}

    //     }
    //     // 实例化对象方法 b=new Box() b.play()
    //     // this指向实例化对象
    //     run() {

    //         console.log(this) // Box {num: 4, sum: 4}
    //     }

    //     static play() {
    //         // 静态方法

    //         console.log(this);//this指向Box类名
    //     }
    // }
    // var f = new Box()
    // // console.log(f.sum);//4
    // // console.log(Box.b); //1
    // console.log(f); //Box {num: 4, sum: 4}
    // //  console.log(Box.play()); //undefined
    // // console.log(f.run()); //undefined

11、ES5类中的this

    // function Box(){
    //     console.log(this);//就是ES6中的constructor函数中this
    // }
    // // 静态属性
    // Box.a=1;
    // // 这个this是全局的this 指向 window
    // Box.b=this.a;
    // // 静态方法
    // Box.play=function(){
    //     console.log(this);//this指向Box这个类名
    // }

    // Box.prototype.num=1;
    // // 这个this是全局的this 指向window
    // Box.prototype.sum=this.num
    // // 实例化对象方法 b=new Box() b.play()
    // Box.prototype.run=function(){
    //     console.log(this) // this指向实例化对象
    // }