js之this指向简单小案例带你领路this风采

1. 当你使用了this的时候，不管你的this在哪，只要不触发调用this的对象或者时间，你永远都不知道this到底指向的是谁，因为在事件中 我们是可以通过方法改变this的指向的
2. This=指本元素，其实指的就是触发事件的元素（对象）以及函数
3. 函数的this指向 看调用、不看声明
4. (1)普通函数调用
   ①函数名() this->windown
   (2)事件处理函数调用(事件处理函数是由浏览器在事件触发的时候自动调用的)
   ①oDiv.onclick = function(){} this->添加事件的元素
   (3)全局中this值为window
   (4)对象的方法函数
   ①Var obj = {fn:function(){}}
   ②当对象中某一属性值是函数的时候，这个属性是对象的一个方法
   ③对象名.方法名() obj.fn(); this->调用方法的对象（对象名）obj

1.函数this默认指向window

 function fun(){
    
    
            console.log(this)  //window
        }        
  fun()  //相当于window.fun()

2.对象的方法 对象.方法调用this指向该方法

let obj={
    
    
         name:'六卿',
         age:"18",
         speak(){
    
    
             console.log(this.name+'今年'+this.age,this)  
             //六卿今年18   this指向这个对象
            }
        }
obj.speak()  //谁调用这个方法指向谁

3.函数谁调用指向谁

function constructorFun(name='虹猫蓝兔七侠传',age='16'){
    
    
        this.name=name;
        this.age=age;
        this.speak=function(){
    
    
             console.log(this.name+'的年龄是'+this.age,this)
            }
        }
        let childObj = new constructorFun('胡歌',20)
        childObj.speak()  
        //胡歌的年龄是20  this指向childObj这个对象 
        //this指向实例
        //比如：vue实例  就是new出来的 在使用中通常会使用this点方法名来使用方法，这些方法都是vue这个类上面的方法。

4.事件对象 谁触发事件指向谁

 <div id="box">我是id=box盒子</div>
 
 let boxid = document.getElementById('box')
 boxid.onclick=function(){
    
    
        console.log(this)  //指向box这个dom对象
         his.innerHTML='我是用this改变后的innerHTML'
    }

5.箭头函数this指向外层作用域的this

<div class="box">我是class=box盒子</div>

 let boxclass = document.getElementsByClassName('box')[0]
        boxclass.onclick=()=>{
    
    
            console.log(this)  //当前作用域外层this指向window
            this.alert('我是window对象')
        }

总的来说：
①方法函数：对象.方法() ; this->调用方法的对象
②普通函数：( window.) 函数名() this->window
③事件处理函数： oDiv.οnclick= function(){} oDiv.onclick() this->添加事件的元素
④全局中的this就是window