箭头函数的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
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页