JavaScript中this指向

113 阅读1分钟

普通函数this指向

1、函数中直接使用(this指向window)
2、函数作为对象的方法使用(谁调用指向谁)

// 1、示例 
var name = '222';
var a = {
  name: '111',
  say: function () {
        console.log(this.name);
  },
}
var b = {
  name: '333',
  say: function (fn) {
        fn(); // fn.call(window) // 222  // this 指向全局
  },
}

var fun = a.say;
fun(); // fun.call(window) // 222 // this指向全局
a.say(); // a.say.call(a) // 111 // this指向 a 

b.say(a.say); // a.say只相当于传参 
b.say = a.say;
b.say(); // b.asy.call(b) // 333 // this指向 b

箭头函数this指向

1、箭头函数的this是定义函数时绑定
2、箭头函数中,this的指向固定化,因为箭头函数没有this,导致内部的this就是外层代码块的this,所以也就不能用作构造函数

// 1、示例一
var name = 111;
var a = {
    name: 222,
    say: () => {
        console.log(this.name);
    }
}

a.say(); // 111  // a.say()和a.name为同级,箭头函数this指向外部this,即为window,window.name = name = 111
//备注:定义时候绑定,即为this是在继承父执行上下文中的this

// 2、示例二 (new Date.getFullYear: 2021年)
var birth = 2000;
var obj = {
    birth: 1000,
    getAge: function () {
        var b = this.birth; // 1000
        var fn = () => new Date.getFullYear - this.birth; // this指向obj对象
        return fn();
    }
}

obj.getAge() // 箭头函数和b是同级,所以this指向父级为obj,2021-1000 = 1021  // 1021