this的指向问题

1.this   不要关注在哪定义，要关注哪里调用

        "use strict";
        // 1.直接调用 1.window  2.undefined
        let test = function() {
            console.log(this);
        }
        test();

 2.通过事件来调用 指向事件源 

 document.onclick = test;

 3.对象里的this

let obj = {
    name: "张三"，
    fn(){
        console.log(this);
    }
}

// 通过对象.函数 
// obj.fn();
// 赋值给变量调用
let myfn = obj.fn;
myfn();

4.定时器里的this

        1.如果是回调函数 会指向window

        2.箭头函数 ：没有this绑定 ，箭头函数的this绑定是上层的this绑定

document.onclick = function(){
            let that =  this;
            setTimeout(function(){
                console.log(this); //window
                console.log(that);  //document
            }, 1000);
        }

        document.onclick = ()=>{
            setTimeout(()=>{
                console.log(this); //window
            }, 1000);
        }

5.构造函数或者是类里的this :        指向实例化对象；

        //function Person(name){
        //    this.name = name;
        //    console.log(this);  
        //}
        //Person.prototype.fn = function(){
        //    console.log(this);
        //}

        // // Person();
        //let zhangsan = new Person("张三");
        //zhangsan.fn();

        class Person{
            constructor(name){
                this.name = name;
                console.log(this);
            }
            fn(){
                console.log(this);
            }
        }
        let zhangsan = new Person("张三");
        zhangsan.fn();

6.箭头函数没有this绑定 ，箭头函数的this是上层的this；

7.模块化里的this :          在前端模块化下 是自动变成严格模式

    import "./a.js";

8.call apply bind:        都是改变this指向的函数 ；

        function fn(a,b){
            console.log(this,a,b);
        }

        fn(1,2); //window 1 2
        // 改变fn里的this指向
        // 1.call: 直接传参 
        fn.call({name:"张三"},3,4); //{name: '张三'} 3 4

        // 2.apply： 参数需要放在一个数组里
        fn.apply({name:"李四"},[5,6]);  //{name: '李四'} 5 6

        // 3.bind :需要执行2次 （科里化：curry，把多元参数转成一元参数）;
        fn.bind({name:"王五"})(7,8);  //{name: '王五'} 7 8

           function mybind(a){
                return function(b){
                    return function(c){
                        return a+b+c;
                    }
                }
            }

           console.log(mybind(1)(2)(3)); //6

9.静态方法里的this,静态成员通过 static 修饰 ：

     1.静态属性 2.静态方法；

        class Person{
            static num = 10;  //静态属性
            constructor(){
                this.name = "111";
                this.age = 20;
                this.height = "178cm";
                console.log(this)
            }
            static fn(){  //静态方法 ，调用不用实例化
                console.log(this);
            }
            myfn(){
                console.log(this);
            }
        }

        console.log( Person.num); //10
        Person.fn();  //静态方法里的this指向 类的本身；
        let zhangsan = new Person();
        let lisi = new Person();

统计实例化对象的次数

        let num = 0;
        class Person{
            static num=0;
            constructor(name){
                this.name = name;
                Person.num++;
                // num++;
                // this.num = 0;
                // this.num++;
                // console.log(this.num);
            }
        }

        let zhangsan = new Person("张三");
        let lisi = new Person("李四");
        // console.log(num);
        console.log( Person.num); //2