一、this

this作为关键字，它的作用就是引用，并且它通常只写在函数内部就是函数体内，在js中this的引用对象随着函数的使用环境变化而变化。这里我们探讨一下普通函数和箭头函数中的this

二、普通函数

1. 定义

个人理解：普通函数的this与其定义位置无关，谁调用这个函数，this就指向谁。

2. 实例

在全局中：

window.name = 'window'
  function demo1() {
    console.log(this.name)
  }
  let a = {}
  a.name = 'a'
  a.speak = demo1
  demo1() // window
  a.speak() // a

直接执行demo1函数，虽然看上去没有其他东西去调用demo，实际上是window在调用，所以this指向window，第二次我们用a去调用，则this指向a
在对象属性中：

  let demo2 = {
    name: 'demo2',
    speak1:function () {
      console.log(this.name);
    }
  }
  let b = {
    name: 'b',
    speak2: demo2.speak1
  }
  demo2.speak1() // demo2
  b.speak2() // b

同理，demo2调用时this指向demo2，b调用时this指向b

类中：

  class Person {
    speak1 = function () {
      console.log(this.name);
    }
  }

  let c = new Person()
  c.name = 'c'
  let d = {
    name: 'd'
  }
  c.speak1() // c
  d.speak1 = c.speak1
  d.speak1() // d

同理，实例c调用时this指向实例c，对象b调用时this指向对象b

三、箭头函数

1. 定义

个人理解：箭头函数的this跟调用者无关，定义位置所在的作用域的this（函数作用域）是谁，箭头函数的this就指向谁

2. 实例

在全局中：

  window.name = 'window'
  let demo1 = () => {
    console.log(this.name);
  }
  demo1() // window
  let a = {
    name: 'a',
    speak: demo1
  }
  a.speak() // window

demo1定义所在的作用域是全局，而全局的this指向window，所以无论是直接调用（使用window调用）还是用对象a调用，最终this都是window

在对象属性中：

  window.name = 'window'
  let demo2 = {
    name: 'demo2',
    speak1: () => {
      console.log(this.name);
    }
  }
  let b = {
    name: 'b',
    speak2: demo2.speak1
  }
  demo2.speak1() // window
  b.speak2() // window

箭头函数speak1定义在对象demo2中，但是对象demo2的this仍然指向window，所以无论是demo2调用还是b调用，最终this都是指向window

在类中：

  class Person {
    speak1 = () => {
      console.log(this.name);
    }
  }

  let c = new Person()
  c.name = 'c'
  let d = {
    name: 'd'
  }
  c.speak1() // c
  d.speak1 = c.speak1
  d.speak1() // c

箭头函数speak1定义在类Person中，Person的this指向它的实例化对象，即实例对象c。所以无论是使用c调用还是d调用，最终this都指向c

四、两者混用

普通函数是谁调用this指向谁，而箭头函数的this指向定义所在作用域的this。所以如果我们将箭头函数定义在普通函数内部，那箭头函数中的this将指向普通的this，即谁调用普通函数就指向谁
具体案例：

  window.name = 'window'
  let demo = {
    name: 'demo',
    speak1:function () {
      console.log(this.name);
    },
    speak2: ()=> {
      console.log(this.name);
    },
    speak3: function () {
      return (()=> {
        console.log(this.name);
      })()
    }
  }
  demo.speak1() // demo
  demo.speak2() // window
  demo.speak3() // demo

如果理解了这个案例，那么应该就理解了普通函数和箭头函数this指向的区别了

1.箭头函数

用箭头 => 定义函数

 var fn = function(num){
    return num;
}

var fn1 = (num)=>num;

var fn3 = ()=>1;

var  fn4 = (num1,num2,num3)=>num

如果箭头函数的代码块部分有多条语句，就要使用大括号将它们括起来，并且使用 return 返回。

        var func = (a,b)=>{
            return a+b;
        }

由于花括号{} 被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外添加上花括号，否则会报错。

var func = (a,b)=>{name:a,age:b} //报错
var func4 = (a,b)=>{
    return {
      name: a,
      age :b
   } 
} // 不报错

箭头函数还有一个更主要的作用: 解决this的指向问题。

2.this指向

先说一下普通函数中的this，普通函数中的this表示调用此函数时的对象。而箭头函数是没有自己的this的，箭头函数里面的this会继承自外部的this。或者用代码

块的概念解释会更加直观：箭头函数中的this就是外层代码块的this。举一个例子：

一、函数的this指向

        this是每一个函数都 一定有的关键词

        this本质上是一个对象数据结构 用于指向数据

        通过this关键词，可以调用操作这个 数据

        1、this指向window    声明式函数 匿名函数 定时器 延时器 forEach循环

        2、this指向事件源     事件绑定中，事件处理函数 this指向默认是事件源，也就是绑定事件的标签对象

        3、this指向数组/对象 数组/对象 中存储的函数this指向是这个数组/对象

二、箭头函数的this指向

        箭头函数的this指向 是 父级程序的this指向

        如果没有父级程序 或者 父级程序没有指向 箭头函数的this指向是window

(1)匿名函数绑定的事件处理函数 this指向默认是事件源 也就是div标签对象

 oDiv.addEventListener('click' , function(){

         console.log(this);

  })

 （2）箭头函数的this指向，是父级程序的this指向，下面的箭头函数没有父级程序，所以this指向是window

oDiv.addEventListener('click' , ()=>{

            console.log(this);

 })

(3)对象中定义的函数 和箭头函数

  const obj = {

            name:'张三',

            age:18,

            sex:'男',

        //    对象中定义的函数 this指向是这个对象本身

             fun1:function(){

                console.log(this)

            },

        //     箭头函数,this指向是父级程序

        //     当前箭头函数,父级程序是对象

        //     对象是没有this的,箭头函数this指向是window

            fun2:()=>{

                 console.log(this)

            },

            fun3:function(){

        //         定义在对象中的函数fun3,this指向是对象本身

        //         函数fun4是一个箭头函数

        //         存储在 函数fun3 中 父级程序就是函数fun3

        //         函数fun3的this指向是存储fun3的对象obj

        //         箭头函数fun4 的this指向 和 父级程序fun3的this指向相同

        //         也就是 obj对象本身

               const fun4 = ()=>{

                    console.log(this);

                }

                fun4();

             }  

        };  

三、改变this指向 ==>通过JavaScript提供的函数方法

       1、调用执行函数时 改变this指向

       call

                函数调用.call(参数1，参数2，参数3......)

                参数1：要改变的指向

                之后的参数2，参数3......是原始函数需要的数据

             apply

                函数调用.apply(参数1，[参数2，参数3....])

                参数1：要改变的this指向

                之后的所有参数以数组的形式赋值 原始函数需要的数据

        call和apply执行程序的原理、结果都完全一致，只是给原始函数赋值参数的语法形式不同  

        2、【生成新的函数】时 改变this指向

        bind

                函数.bind(参数1，参数2，参数3....)

                参数1：新的this指向

                之后所有的参数 参数2，参数3......都是原始函数需要的参数数据