js的this指向总结

this对象

js严格模式下没有window

一、普通函数

• 非严格模式 普通函数全局调用和局部调用都是指向window
• 严格模式 严格模式下没有window，this为undefined

1.非严格模式

function Afun(){
    console.log(this)
}
Afun() // window

function Bfun(){
    function Cfun(){
        console.log(this)
    }
    Cfun()
}
Bfun()  // window

2.严格模式

"use strict";
function Afun(){
    console.log(this)
}
Afun() // undifined

function Bfun(){
    function Cfun(){
        console.log(this)
    }
    Cfun()
}
Bfun()  // undifined

二、匿名函数

匿名函数this指向window

(function(){
    console.log(this)   // window
})()

三、构造函数

构造函数this指向新创建的实例对象

function Afun(){
    this.name = 'Afun'
}
let B = new Afun()
console.log(B.name)  // Afun

四、对象里面的方法

this取决于直接调用该方法的对象

var name = 'window'
var obj = {
    name:'obj',
    fun1:function(){
        console.log(this.name)
    },
    fun2:function(){
        return function Bfun(){
            console.log(this.name)
        }
    }
}
var fun1 = obj.fun1;
obj.fun1();     // obj
obj.fun2()();   // window
fun1()  // window

五、call/apply/bind函数

改变函数的this指向。如果传undefined/null进去，this为window

let A = {
    name:'A',
    getName:function(){
        console.log(this.name)
    }
}
let B = {
    name :'B'
}
A.getName()     // A
A.getName.call(B) // B

六、事件函数

this指向事件对象

let el = document.createElement("a")
el.text = '我是a标签'
el.onclick= function(e){
    console.log(this)
}
el.click()  // <a>我是a标签</a> 

七、定时器

定时器this指向window

setTimeout(function(){
    console.log(this)   // window
}, 100);

八、箭头函数

箭头函数没有自己的this，始终等于外层上下文的this

var name = 'window'
var obj = {
    name : 'obj',
    getName : function(){
        console.log(this.name)
    },
    getName2 : ()=>{
        console.log(this.name)
    },
    getName3 : function(){
        return ()=>{
            console.log(this.name)
        }
    },
    getName4 : ()=>{
        return ()=>{
            console.log(this.name)
        }
    },
    getName5 : ()=>{
        return function(){
            console.log(this.name)
        }
    }
}

obj.getName()   // obj
obj.getName2()  // window
obj.getName3()() // obj
obj.getName4()() // window
obj.getName5()() // window