this的应用及指向问题

Posted 2022-02-05 xiaohanga

this的应用及指向问题

? 总的原则，那就是this指的是调用函数的那个对象，即谁调用函数，this指向谁

//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'

改变this的指向

想让this指向谁就指向谁的方法，this是整个js很重要的关键字

//函数下面的三个方法：call，apply，bind都可以改变this的指向

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
      使用场景:由于很多时候函数不是直接调用的,而是通过事件或定时器触发