js中的this指向

函数的this指向 看调用、不看声明
一、普通函数调用
①函数名() this->windown

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

二、事件处理函数调用
oDiv.onclick = function(){} this->添加事件的元素
对象的方法 ，对象.方法调用this 指向该对象

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

三、全局中this指向window对象
函数谁调用指向谁

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这个类上面的方法。

四、对象的方法函数
Var obj = {fn:function(){}}
对象名.方法名() obj.fn(); this->调用方法的对象（对象名）obj

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

五、箭头函数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对象

事件处理函数：
1.1 onclick　　点击事件
1.2 onload　　用户进入某个页面的时候触发（onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。）
1.3 onunload　　用户离开某个页面的时候触发（onload 和 onunload 事件可用于处理 cookie。）
1.4 onchange　　内容变化事件（常结合对输入字段的验证来使用）
1.5 onmouseover　　鼠标移动到HTML元素上方的事件
1.6 onmouseout　　鼠标移出HTML元素上方的事件
1.7 onmousedown　　鼠标按下的时候触发的事件
1.8 onmouseup　　鼠标弹起触发的事件（onmousedown，onmouseup和onclick区别，onclick是鼠标完成点击事件的时候触发的事件）
1.9 onfocus　　元素获取焦点事件
1.10 onblur　　元素失去焦点事件
1.11 onabort　　图像的加载失败
1.12 ondblclick　　双击事件
1.13 onerror　　当加载图像和文档时发生错误
1.14 onkeydown　　键盘按键被按下发生的事件
1.15 onkeyup　　键盘按键被松开发生的事件
1.16 onkeypress　　键盘按键按下并松开发生的事件
1.17 onmousemove　　鼠标移动
1.18 onresize　　窗口或者框架被重新调整大小
1.19 onselect　　文本被选中
1.20 onreset　　重置按钮被点击
1.21 onsubmit　　提交按钮被点击