this指向和相关问题

一、this指向
1、普通函数调用，this====>window
function fn(){console.log('11111111')}
fn();//this====>window

2、通过new关键字调用的函数 this===>新创建出来的对象
function Fnn(){this.name='aa';console.log(this)}
var of=new Fnn()//this=====>of

3、通过call，apply，bind调用函数，this--->方法的第一个参数对象
function  fn2(){console.log(this)}
fn2.call(document)//this--->document

4、回调函数，一般this指向window，箭头函数特例
function fn3(fn){fn()}
fn3(function(){
    console.log(this);//this-->window
})

 5、对象内部的方法 this--->当前对象
var obj={
    name:'zz',
    say:function(){
        console.log(this.name)
    }
}
obj.say()//this--->当前对象 obj

6、有箭头函数定义的方法，其内部的this永远指向函数在定义时this关键字的指向单位，与该函数的调用对象无关。
btn1.onclick = function() {
    var count = 0;
    setInterval(()=> {
        count++
    this.innerHTML=count
        console.log(this) //this--->btn
                     
    }, 1000)
             
}

二、this丢失
1、函数嵌套调用，回调函数会导致this指向丢失
解决：将this暂存，然后函数内部用that
btn.οnclick=function(){
    var count=0;
    // 解决办法：将this暂存，然后函数内部用that
    var that=this
    setInterval(function(){
        this
        that
        count++
        console.log(this)//this--->window
        console.log(that)//this--->btn
    },1000)
    fn2.call(this)//通过call保持this指向
    fn3()
    function fn3(){
        console.log(this)//window
    }
    var obj={
        name:this,//this---->btn
        bb:function(){
            console.log(this)//this--->window
        }
    }
    console.log(obj.name)
    obj.bb()
                 
}
function fn2(){
    console.log(this)
}
2、方法赋值,导致this丢失
var obj1={
    fn1:function(){
        console.log(this)
    }
}
obj1.fn1()//this====>obj1
var fn=obj1.fn1///this===>window
fn()