箭头函数

箭头函数

/*
语法规则：
    function 函数名称(函数){
      函数体
      return 返回值
    }

    箭头函数是一个匿名函数，一般作为参数(回调)
    (参数)=>{
      函数体
      return 返回值
    }

    函数声明的补充说明
      1 如果没有参数，就不用传递
      ()=>{
        函数体
      }
      2 如果只有一个参数，也可以不加()
      name => {
        函数体
      }
      3 如果函数体只有一句话，那么可以不添加{}
      name => console.log(name)
      4 如果没有{},那么默认会将函数体的执行结果返回
        如果有{}，想返回值必须添加return
        name => name === name => {return name}
*/

function text(callback) {
  var name = 'Iris'
  var temp = callback(name);
  console.log(temp + "你好");
}

text(name => name)

/*
text(name => {
  return name
}) 
*/

/* 
text((name)=>{
  console.log(name);
  return name
}) 
*/

为什么使用箭头函数

/* 
  函数的四种调用模式
    1 函数调用模式：直接调用函数本身：this指向window
    2 方法调用模式：对象.函数：this指向当前调用函数的对象
    3 构造函数调用模式：new Function():this指向当前构造函数指向的实例
    4 上下文调用模式：函数.call(this) 函数.apply(): this指向传入的参数对象
*/

/* var Obj = {
  name : 'Iris',
  age : 18,
  sayHi : function () {
     console.log(this.name + ":" + this.age);
  }
}


//对象.函数
// Obj.sayHi()
//函数调用模式
var fn = Obj.sayHi;
fn() //undefined:undefined  this值改变，使用输出的值为undefined */

//返回一个箭头函数
var obj = {
  name:'Iris',
  age:18,
  sayHi:function () {
    //在定义之后，this的指向不会随意改变，它对this的指向更明确
    //箭头函数中的this指向定义当前箭头函数的上下文的所在对象
     return ()=>{
       console.log(this.name + ":" + this.age );  //this指向obj
     }
  }
}

var fn = obj.sayHi()
// fn()
var obj2 = {
  name:'guagua',
  age:18
}
fn.call(obj2)
//输出结果为 Iris:18