一、在js非严格模式、非箭头函数下,不看函数在哪里定义,不看是怎么定义,只看函数的调用方式
即想知道this指向,就要看this哪个函数,这个函数是怎么调用的
- 普通调用
调用方式:函数名()
他们的调用者都是 window, this指向是window,this指向了函数调用者
这个在在控制台打印 window,func这个函数是window调用的,this指向window,
这个在在控制台打印 window而,首先执行fn1,fn1是window调用的,在fn1中有执行了fn2,fn2这个函数也是window调用,this指向window
这个在在控制台打印 window而,fn是由obj调用,fun是由window调用, this是在fun中打印,而this指向window
- 对象调用
调用方式:
对象.函数名()
函数调用者是 对象 this指向 对象 this指向了函数调用者
这个在在控制台打印 window而,fn是由obj调用,this指向obj
this是在fu函数内的obj对象的fn执行,对象obj的内的fn是由obj这个对象调用,控制台打印结果是obj,this指向了obj
- 事件处理函数
调用方式
事件源.on事件类型 = 事件处理函数 或者 事件源.addEventListener(事件类型, 事件处理函数)
事件源:在事件中,当前操作的那个元素就是事件源
当函数当作事件处理函数,那么函数内的this指向就只该事件源
当点击btn元素时候触发函数,然后执行函数,在控制台打印 btn这个元素,this这里指向btn
当点击btn元素时候触发函数,然后执行函数,在控制台打印 btn这个元素,this这里指向btn
这里obj.fn不知直接别调用,而是交给了事件,当成了事件处理函数,在控制台打印 btn这个元素,this这里指向btn
这里obj.fn不知直接别调用,而是交给了事件,当成了事件处理函数,在控制台打印 btn这个元素,this这里指向btn
- 定时器调用
调用方式
setTimeout(function () {}, 1000) 、 setInterval(function () {}, 1000)
函数被当做定时器处理函数使用, this 指向 widnow
函数直接交个定时器调用 控制台打印window ,this 指向 widnow
这里obj.fn不知直接别调用,而是交给了定时器, 控制台打印window ,this 指向 widnow
- 构造函数调用
调用方式
new 函数名()
只要和 new 关键字调用了, 并且没有返回值或者返回值不是对象,this 指向实例对象
Fn函数和关键字new在一起,控制台打印Fn{},这里的 this指向了Fn函数的实例对象f
obj.fn也是因为和关键字new在一起,这里的this指向obj.fn函数的实例对象x
二、严格模式全局函数 this指向undefined
严格模式下,全局函数没有 this,是个 undefiend
三、箭头函数内没有自己的 this,箭头函数内的 this 就是外部作用域的 this
fn是箭头函数,没有自己的this,他的this是其外部作用域的 this,所以这里this指向了window
这里交给事件的函数是箭头函数,他的this是其外部作用域的 this,所以这里this指向了window
fun是箭头函数,他的this指向他外部作用域即fn函数,而fn是由obj调用的,所以this指向了obj
总结:
一、在js非严格模式、非箭头函数下
1、普通调用,对象调用this指向了函数调用者
2、事件处理函数this指向就只该事件源
3、定时器调用this指向widnow
4、构造函数调用并且没有返回值或者返回值不是对象,this 指向实例对象
二、严格模式全局函数 this指向undefined
三、箭头函数内没有自己的 this,箭头函数内的 this 就是外部作用域的 this
标签:调用,obj,函数,指向,window,JS,谈谈,fn From: https://www.cnblogs.com/gerrytong/p/17197900.html