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就是最近调用它的对象