this

1.this在函数中的指向
1.1 作为对象的属性时，this指当前对象。
1.2 单纯就是个函数时，this指向window。

	let obj = {
      monicker: '张三',
      showName () {
        console.log(this) //obj
        function showThis () {
          console.log(this) //window
        }
        showThis()
      }
    }
    obj.showName()

2.改变this指向
2.1通过定义常量来改变

	let obj = {
      monicker: '张三',
      arr: ['js','css','html'],
      showName () {
        const self = this //把this存到self中然后传下去
        let newArr = this.arr.map(function(value){
          return `${self.monicker}---${value}`
        })
        console.log(newArr)
      }
    }
    obj.showName()

2.2特殊函数中可以通过传入this改变当前函数中的this

	let obj = {
      monicker: '张三',
      arr: ['js','css','html'],
      showName () {
        let newArr = this.arr.map(function(value){
          return `${this.monicker}---${value}`
        },this)
        console.log(newArr)
      }
    }
    obj.showName()

2.3使用箭头函数，箭头函数中的this就是上一级中的this

let obj = {
      monicker: '张三',
      arr: ['js','css','html'],
      showName () {
        let newArr = this.arr.map(value => `${this.monicker}---${value}`)
        console.log(newArr) //输出结果一样
      }
    }
    obj.showName()

2.4使用箭头函数时，当前this就会变成上一级中的this，如果又想要当前this又想要上一级中的this有两种办法。
2.4.1 普通函数配合常量
普通函数中this代表当前对象，常量代表指定的对象

	let obj = {
      name: '张三说',
      bind () {
        const rain = document.querySelector('button')
        const self = this
        rain.addEventListener('click',function(){
          console.log(self.name+this.innerHTML)
        })
      }
    }
    obj.bind()

2.4.2 箭头函数配合event
箭头函数中this指向上一级，event指向当前事件对象
总之就是两头都要有
但是要注意使用箭头函数时如果上一级就是个普通函数，那么this就会是window

    let obj = {
      name: '张三说',
      bind () {
        const rain = document.querySelector('button')
        rain.addEventListener('click',event => {
          console.log(this.name+event.target.innerHTML)
        })
      }
    }
    obj.bind()

3.call改变this
不会改变原有的函数this，但会产生一个新的

	function User (name) {
      console.log(this)
      console.log(name)
    }
    User() //window '张三'
    let obj = {num: 1}
    User.call(obj,'张三') //{num: 1} '张三'

4.apply
apply跟call的功能一样，只是第二个参数必须是数组的形式，系统会自动将数组中的元素分配给形参

	function User (name,age,gender) {
      console.log(this)
      console.log(name+age+gender)
    }
    User()
    let obj = {num: 1}
    User.apply(obj,['张三',18,'男']) //{num: 1} 张三18男

5.bind函数
bind和call,apply差不多，只是不会立即执行，而是会返回一个新的函数，并且可以实现两次传参，但一旦在bind调用时就传参，后面调用新函数传的参数会被覆盖掉。

 <button>今天在下雨</button>
  <script>
    document.querySelector('button').addEventListener('click', function (event) {
      document.write(event.target.innerHTML+this.text)
    }.bind({text: '落得好大啊'}))
  </script>

5.1使用bind函数来完成随便变色

  <script>
    function Colors (elem) {
      this.elem = elem
      this.colors = ['#4a69bd', '#fa983a', '#3c6382', '#079992', '#f8c291', '#b8e994']
      this.run = function () {
        setInterval(function () {
          let i = Math.floor(Math.random() * this.colors.length)
          this.elem.style.backgroundColor = this.colors[i]
        }.bind(this),1000)
      }  
    }
    let obj = new Colors(document.body)
    obj.run()
  </script>