this指向

(1).普通函数

function fn()  { 
 
  console.log(this)
}

window.fn() ;  指向window 
复制代码

(2).对象的方法

let obj = {  
  hi:function (){
    console.log(this)
  }
} 
obj.hi() ; 指向obj函数调用者


复制代码

(3).构造函数

function Fu(name){
  this.name=name;
  console.log(this)
}
let li = new Fu('李'); 指向实例化对象  原型对象里面方法指向实例化对象

原型对象里方法也是一样
Fu.prototype.date=function(){
  console.log(this)
}

复制代码

(4).时间函数

setTimeout(function(){ 
  console.log(this)
})
指向window.setTimeout
复制代码

(5).立即执行函数

指向window
(
function (){
  console.log(this)
}
)()
复制代码

(6).事件绑定方法

btn.onclik =function(){
  console.log(this)
}
指向函数调用者btn

复制代码

总结如图：

2.手动指定this的指向三种方法

(1).call()

• 语法： 函数.call(this指向谁,传参)

• 特性：会调用函数。手动指定this,传参任何类型

复制代码

(2).apply()

• 语法： 函数.call(this指向谁,[传参只能数组类型其他报错])
• 特性：会调用函数。手动指定this,[传参只能数组类型其他报错]
• 应用：可配合数学内置对象算数组最大值或最小值,例如：let arr= [1 , 2 ,4]; Math.max.apply(Math,arr)

复制代码

(3).bind()

• 语法： 函数.call(this指向谁,传参)
• 特性： 不会调用函数(返回原函数拷贝),。手动指定this,传参任何类型
• 应用：在事件绑定方法中的settimeout(function(){}.bind(this),2000 )可以改变this并且调用实现某种便利

复制代码