this指向问题总梳理
(一)直接使用
console.log(this) 在script中直接写入的this,在任何模式下指向的都是window
(二)函数中使用
function() fn{
console.log(this);
}
// 非严格模式下指向的是window,严格模式下指向的是undefined
(三)箭头函数
不管是否是严格模式,箭头函数的this总是指向当前箭头函数函数外的上下文环境中的this 箭头函数的this指向不能改变
(四)对象中的this
1.对象中属性的this,指向的是对象外上下文环境的this
var obj={
a:this.a
}
2.对象方法(普通函数)中的this指向是谁执行该方法this就指向谁
var obj={
a:1,
b:function(){
console.log(this);
}
}
3.对象方法(箭头函数)中的this指向和箭头函数本身的相同,指向对象外上下文环境中的this
var obj={
a:1,
b:()=>{
console.log(this) // this--->window
}
}
(五)回调函数
1.setTimeout、setInterval回调函数 不管是否是严格模式都指向window
function fn(){
console.log(this);
}
setTimeout(fn,500);
2.在别的函数内执行当前函数的回调函数 和(二)在函数中使用指向相同,非严格模式指向window,严格模式指向undefined
function fn(){
console.log(this);
}
function fn1(f){
f();
}
fn1(fn);
递归函数 和(二)在函数中使用指向相同,非严格模式指向window,严格模式指向undefined
3.默认状态数组的部分遍历方法中回调函数的this与(二)相同 但如果是有this.Arg参数的方法并且在使用的时候在函数最后给了一个参数,那么this就一直指向这个参数
arr.forEach(function(){
console.log(this); // 非严格模式下指向window,,严格模式下指向undefined
})
arr.forEaach(function(){
console.log(this); // 一直指向{a:3}
},{a:3})
// 有this.Arg参数的方法都包括:forEach、filter、every、find、some、findIndex、Map、some
4.回调函数如果使用arguments对应项进行回调,那么this指向回调这个函数的那个函数中的arguments
function fn(){
console.log(this)
}
function fn1(){
arguments[0]()
}
fn1(fn);
// this指向fn1的arguments 是arguments这个整体
5.事件中的回调函数 this指向事件侦听的对象
document.addEventListener("click",clickHandler);
function clickHandler(e){
console.log(this)
}
// this指向document
(六)call、apply、bind中
call、apply、bind中的this和单纯的call、apply、bind中的this指向相同
- 如果说代入了第一个参数,那么这两个的this就都指向这个参数
- 如果说第一个参数代入的是null或者undefined,那么在非严格模式下this都指向window,严格模式下带入的第一个参数是什么就指向什么
(七)ES6中
- 构造函数中的this指向实例化当前类所产生的实例化对象
- 类中实例化方法中this指向调用这个函数的对象 谁调用,指向谁
- 类中静态方法的this指向的是该类或者是该构造函数(因为类就是该构造函数)
- 类中实例化方法如果是箭头方法,this指向当前实例化的对象
(八)ES5原型对象中中
在原型的方法中,this指向实例化当前构造函数的实例化对象 谁执行,就指向谁
如果是箭头函数,那就还和箭头函数一样
自执行函数(闭包)中
指向window