箭头函数以及指向问题

1.普通函数改写箭头函数写法

/*
  let fn = function(a,b){
    return {x:a,y:b};
  } 
  */
// 改写为箭头函数：
// 1） function 替换为箭头
// 2）假如只有一个形参，则圆括号可省略。
// 3）假如只有一行代码，则大括号可省略
// 4）假如只有一行代码，并且是return语句，则return也可省略
// 5）假如只有一行代码，并且是return一个对象，为了避免歧义，则需要用圆括号包起来。
let fn = (a,b) => ({x:a,y:b});

例子 可以感受下

 let obj = {
   name:"jack",
   say:function(){
     console.log( this );
   }
 }

 obj.say()

2 箭头函数中this永远指向其外部最近的this (指向其外部环境)

<script>
  // 箭头函数中this永远指向其外部最近的this (指向其外部环境)
    console.log(this); //window
    btn.onclick = () => {
      console.log(this);
    }

</script>

<script>
    // 箭头函数中this永远指向其外部最近的this (指向其外部环境)
    function Person(){
      let fn = () => {
        console.log( this );
      }
      fn();
    }
// 当Person作为普通全局函数调用时，函数内部this指向window,那么箭头函数内this也指向window
    // Person(); // window

// 当Person作为构造函数使用时，构造函数内部this指向实例对象，那么箭头函数内部this也指向实例对象
    new Person();  // {}
</script>

再来感受一下  指向外部的this

<script>
  // 箭头函数中this永远指向其外部最近的this (永远指向其外部环境，环境只能是全局或函数内 )
  // 
/*   console.log( this );
  let obj = {
    name:"jack",
    // 箭头函数
    say:()=>{
      console.log( this );
    },
    // 普通函数的简写
    fn(){
      console.log( this );
    }
  }

  obj.say()
 */

  let obj = {
    name:"jack",
    oo:{
      name:"rose",
      fn(){
        // console.log(this);
        return {
          op:()=>{
            console.log( this.name );
          }
        }
      }
    }
  }

  let a = obj.oo.fn();
  a.op()

</script>