vue学习之箭头函数

箭头函数

1、箭头函数的语法

1、普通函数和箭头函数的区别

• 普通函数

  • var fun1 = function(a, b){
    	return a + b
    }
    

• 箭头函数

  • var fun2 = (a, b) => {
    	return a + b
    }
    

  • 箭头函数时通过"=>"连接参数列表和函数体，（）参数；{}方法体，是可以直接是返回的表达式

2、箭头函数的参数列表和返回值

• 当函数的参数只有一个的时候，括号可以进行省略，但是没有参数时，括号则不能进行省略。

  • // 无参
    var fun1 = function(){}
    var fun1 = () => {}
    
    // 一个参数
    var fun2 = function(a){}
    var fun2 = a => {}
    
    //两个参数
    var fun3 = function(a, b){}
    var fun3 = (a, b) => {}
    
    // 可变参数
    var fun4 = function(a, b, ...args){}
    var fun4 = (a, b, ...args) => {}
    

• 箭头函数在只有一条语句的时候可以省略{}， 但是包含多条语句的时候，{}就不能被省略了

  • // 一条语句
    () => return 'hello world'
    (a, b) => a + b
    
    // 多条语句
    (a) =>{
        a++
        return a
    }
    

• 注意：对于箭头函数的返回值，如果是一个return一个对象的话，需要进行注意，如果是单表达式返回自定义的对象的时候，一定要加上括号，不加括号就会报错，会和函数体{…}有语法冲突

  • x => {key: x} //报错
    x => ({key: x}) // 正确
    // 注意， 用小括号包括大括号则是对象的定义，而非函数主体
    

注意：箭头函数内部this的作用域是由上下文确定的，箭头函数中的this是向外层作用域中一层层的查找this的指向，直到查到有this的定义为止。

2、箭头函数中的this

在将箭头函数之前先看一下普通函数中的this的指向：

普通函数的this在声明的时候指向的是window,在调用的时候是指向他的调用者，如果是直接调用的时候，是指向的window

• function fun(){
      console.log(this)  // window
  }
  fun()
  

• function fun(){
  	console.log(this) // obj对象
  }
  var obj = {
      name: '幼儿园扛把子',
      fun: fun
  }
  obj.fun()
  

箭头函数在声明的时候是指向window，在调用的时候指向所在的上下文的this。就是箭头函数中的this是向外城作用域一层一层的查找this，查到所有的this的定义为止

• var obj = {
    data: [],
    getData: function() {
      setTimeout(() => {
        // 模拟获取到的数据
        var res = ["abc", "cba", "nba"];
        this.data.push(...res);  // obj
      }, 1000);
    }
  }
  
  obj.getData();
  

• var obj = {
    data: [],
    getData: () => {
      setTimeout(() => {
        console.log(this); // window
      }, 1000);
    }
  }
  
  obj.getData();