普通函数和箭头函数this区别

普通函数和箭头函数的this指向问题

1. 普通函数的this指向：

​ 普通函数的this指向是普通函数的调用者

// 普通函数的this指向是普通函数的调用者
// function里面的this指向是function函数的调用者，也就是obj对象
var obj = {
    name: 'yanle',
    sing: function () {
        console.log(this);
    }
}
obj.sing();         //Object

2. 箭头函数this指向：

​ 箭头函数本身没有this指向，而是捕获上下文的this指向当作自己的this

案例1

// 箭头函数本身没有this指向，而是捕获上下文的this指向当作自己的this

// 箭头函数里的this,捕获的是obj{}这个对象环境; 
// obj的this指向是window，那么箭头函数指向也是window
var obj1 = {
    name: 'yanle',
    sing: () => {
        console.log(this);
    }
}
obj1.sing();        //window

案例2

// 箭头函数定义在fn函数作用域内，则箭头函数的this指向和所在作用域的this指向一致;
// 普通函数fn的this指向是window，则箭头函数的this指向也是window
function fn () {
    return () => {
        console.log(this);
    }
}
const A = fn();
A();                // window   bin

3. 箭头函数面试题

var age = 100;			//在window下定义全局变量age
var obj = {
    // obj不能产生作用域，所以箭头函数被定义在全局作用域下
    age: 20,
    say: () => {
        console.log(this.age);		//this指向window
    }
}
obj.say();  //100