前端this指向问题

前端this指向问题

一、this指向Window

function zr(){
    var username = "睿睿";
    console.log(this.username ); //undefined
    console.log(this); //Window
}
zr();
//相当于
window.zr();

二、this指向调用者
fn是通过zr.fn()执行的，那this指向就是对象zr

var zr = {
    username:"睿睿",
    fn:function(){
        console.log(this.username);  //睿睿
    }
}
zr.fn();

var zr = {
    a:1,
    b:{
        a:2,
        fn:function(){
            console.log(this.a); //2
        }
    }
}
zr.b.fn();

三、构造函数的this

function Fn(){
    this.username = "睿睿";
}
var zr = new Fn();
console.log(zr.username ); //睿睿

对于new的方式来说，this被永远绑定在了c上面，不会被任何方式改变this

四、箭头函数

function a() {
  return () => {
    return () => {
      console.log(this)
    }
  }
}
console.log(a()()())

首先箭头函数其实是没有this的，箭头函数中的this只取决包裹箭头函数的第一个普通函数的this。在这个例子中，因为包裹箭头函数的第一个普通函数是a，所以此时的this是window。另外对箭头函数使用bind这类函数是无效的。

题外：
不管我们给函数bind几次，函数中的this永远由第一次bind决定

盗图：