this application and point to problems

this application and point to problems

The general principle, that this refers to the object that calls the function, that is, who call the function, this point who

//1.普通函数，定时器里面的函数，回调函数（函数做参数），自执行函数 --指向window（非严格模式）
    function fn(){
        alert(this)；
    }
    fn() 
    
    window.setInterval(function(){
        alert(this);
    },1000)
    
    var arr=[1,2,3];
    arr.forEach(function(){
        alert(this);
    });
    
    (function(){
        alert(this);
    })()
    
    !function(){
        alert(this);
    }();
//2.对象里面的方法 --谁调用指向谁
    var obj = {
        a:1,
        showa:function(){
            function fn(){
                console.log(this) //没人调用它，默认window调用，所以这里的this指向window
            }
            alert(this);
            alert(this.a);
        }
    }
    obj.showa(); //由于是obj调用这个函数，那么this指向obj

    var fn1 = obj.showa; //这里可以看成 var fn1 = function(){
                                                    function fn(){
                                                        console.log(this) 
                                                        }
                                                        alert(this);
                                                        alert(this.a);
                                                    }
    
    fn1();//此时window调用fn1(),所以this指向window
//3.事件处理函数
    document.onclick = function(){
        alert(this); //这里由于是document调用这个函数所以this指向document
    }

//4.构造函数
    //构造函数的特点 1.首字母大写  2.一定要new运算符调用一下
    function Abc(){   //Abc:构造函数
        alert(this);    // this 指向 a1,a2
        this.name = 'zxh'  //由于这个this有个属性name所以它的实例对象都具有这个属性
    }
    var a1 = new Abc() //实例对象a1 a1.name = 'zxh'
    var a2 = new Abc() //实例对象a2 a2.name = 'zxh'

Change this point

Who wants this point who will point to the method, this is very important keywords throughout js

// function following three methods: call, apply, bind to this point can be changed

var num=10000;
var obj={
    num：10,
    shownum:function(){
        alert(this.num)
    }
    show:function(num1,num2){
        alert(this.num + num1 + num2)
    }
}
obj.shownum() //输出的是10
obj.shownum().call(window) //输出10000

obj.show(20,30) //输出10+20+30 = 60
obj.show.call(window,20,30) //输出10000+20+30 = 10050

//总结 call()的第一个参数是代表this的指向对象，后面的参数代表函数本身的参数
      apply()唯一与call()不同的是 apply的第二个参数是一个数组 obj.show.call(window,[20,30]) //依然输出10050 
      bind():第一个参数代表this的指向对象,从第二个参数开始代表的是函数本身的参数,返回的是函数体，需要再次调用。
      解析：obj.show.bind(window,20,30) //输出的是一个函数体
           obj.show.bind(window,20,30)() //10050
      使用场景:由于很多时候函数不是直接调用的,而是通过事件或定时器触发