箭头函数的this和普通函数的this有何不同

在我们讲解之前先以一道题引入：

const shape = {
  radius: 10,
  diameter() {
    return this.radius * 2;
  },
  perimeter: () => 2 * Math.PI * this.radius
}

shape.diameter() // 20
shape.perimeter() // NaN

经过多番查阅资料，得出以下结论：

• 箭头函数里是没有this的，而普通函数是有this的
• 箭头函数中的this是在定义函数时绑定，普通函数是在执行函数时绑定

针对以上两点，普通函数在被调用的时候它内部的this会指向调用它的那个对象，而箭头函数本身没有this，所以它内部的this是继承自父执行上下文中的this

然后我们来解释例子中的this，diameter是普通函数，this指向调用它的对象shape，所以this.radius是10；perimeter是箭头函数，内部本身无this，它所在的对象是shape，shape的父执行上下文是window，所以箭头函数内的this.x指向window.x (undefined)

对于函数的this指向问题，我总结了下面两句话：

1. 箭头函数的this永远指向其上下文的 this，任何方法都改变不了其指向，如call(), bind(), apply()
2. 普通函数的this指向调用它的那个对象

---

理解了上面的知识点之后，我们思考一下下面的x、y值是多少

// 普通函数
var a = 11
function test1() {
  this.a = 22
  let b = function(){
    console.log(this.a);
  }
  b()
}
var x = new test1() // 11

// 箭头函数
var b = 11
function test2(){
  this.b = 22
  let c = ()=> {
  	console.log(this.b)
  }
  c()
}
var y = new test2() // 22