vue-箭头函数的使用和this的指向

  平时在script标签或JS文件定义一个函数是这样的:

const fn = function(){
  consolo.log("")  
}

  如果是在对象字面量中定义函数的话,有如下两种方式:

const fn = {
  fn1: function(){},
  fn2(){}    
}

  而在ES6中又引入了一种对函数的定义方式:箭头函数,标准示例如下:

const jiantou = (num1,num2) => {
  console.log(num1+num2)
  return num+num2    
}

  上面的(num1+num2)是参数列表,后面的{ }是方法体;但主要说的并不是这种方式,他还有特别的写法:

  当只有一个参数,方法体中的代码只有一行时,他可以下面的写法:

const jiantou = num => num

  上面代码意思是:参数是num,方法体是return num;做一个总结:当参数只有一个时,()是可以省去的(无参是不可以省去的),当方法体只有一行代码时,{}是可以省去的,并且记住这行代码实际上前面会跟上一个return的,但很多人在想,那我这个函数没有返回值,他返回什么呢?那他返回就是一个undefined

  说完箭头函数,再说一下箭头函数中的this和普通定义的函数中this有什么区别吧,看到下面的代码:

 

   当我们调用obj.add()函数时,function()中的this指向的是window对象;而箭头函数指向的是obj,这是怎么回事呢?

  对于function()中的this,指向的是最外层的对象,即 window

  而箭头函数中的this他是指向的最近作用域的对象,也就是说最近调用它的对象,在上面的例子,obj就是最近调用它的对象

posted @ 2021-03-31 11:53  爱编程DE文兄  阅读(2327)  评论(0编辑  收藏  举报