匿名函数、普通函数、箭头函数的this作用域

匿名函数

// 匿名函数的this指向具有全局性 当this在函数内找不到时，会去全局查找
var name = "张三";
var obj = {
    name: "李四",
    getNameFun: function(){
        return function(){
            return this.name;
        }
    }
};
console.log(obj.getNameFun()()); // 张三

// 换种写法
// 箭头函数的this由定义该箭头函数的作用域的this指向决定，因此下面定义箭头函数的作用域是obj obj的this指向window 所以打印张三
var name = '张三'
var obj = {
    name: "李四",
    getNameFun: () => {
        return this.name;
    }
};
console.log(obj.getNameFun()); // 张三

普通函数

// 普通函数的this指向当前定义的函数内部，但是当函数被其他对象调用时this指向调用者的内部
var val = 1;
var obj = {
    val: 2,
    dbl: function(){
        this.val *= 2;
        val *= 2;
        console.log(`val的值是${val}`); // 2
        console.log(`this.val的值是${this.val}`); // 4
    }
};
obj.dbl(); // dbl函数内的this指向调用者obj本身
var func = obj.dbl;
func(); // dbl函数内的this指向全局变量func调用者本身

function getAge() {
    var y = new Date().getFullYear();
    return y - this.birth;
}
// 换种写法
var xiaoming = {
    name: '小明',
    birth: 1990,
    age: getAge
};

xiaoming.age(); // 25, 正常结果
getAge(); // NaN

如果以对象的方法形式调用，比如xiaoming.age()，该函数的this指向被调用的对象，也就是xiaoming，这是符合我们预期的。
如果单独调用函数，比如getAge()，此时，该函数的this指向全局对象，也就是window。

箭头函数

// 箭头函数的this定义：箭头函数的this是在定义函数时绑定的，不是在执行过程中绑定的。简单的说，函数在定义时，this就继承了定义函数的对象。
var obj = {
    funA: function(){
        console.log(this);
    },
    funB: function(){
        setTimeout(()=>{
          console.log(this);  
        })
    }
};
obj.funA(); // obj
obj.funB(); // obj