深入理解this的理解和用法

什么是this？

JavaScript中函数的this对象是函数在执行时所处的作用域，是关键字，它比较灵活，只有在执行的时候知道它指向了谁！

5种指向

1，指向 window对象即全局对象
在全局作用域下，this指向全局对象。在浏览器中全局对象就是window对象

function test(){
 console.log(this);
}
test();  //window

2，指向最近的对象或声明的对象
当this关键字在一个声明对象内部使用，其值会被绑定到调用该this的函数的最近的父对象

var person = {
 first: 'John',
 last: 'Smith',
 full: function() {
  console.log(this.first + ' ' + this.last);
 },
 personTwo: {
  first: 'Allison',
  last: 'Jones',
  full: function() {
   console.log(this.first + ' ' + this.last);
  }
 }
};
person.full(); // John Smith
person.personTwo.full(); // Allison Jones

3，new 实例化时指向实例化对象
当使用new关键字构建一个新的对象，this会绑定到这个新对象

function Animal(name){
    this.name = name;
    console.log(this.name);
}
var cat = new Animal('cat');

4，call/apply/bind指向第一个参数对象

function add(c, d) {
 console.log(this.a + this.b + c + d);
}
add(3,4); // 
// 延伸一下
a + b + 2 // error  a/b 未定义 会报错
//this.a + this.b + 2 // NaN ，undefined 则不会报错
//说明 undefined + 2 == NaN
var  ten = {a: 1, b: 2}
add.call(ten, 3, 4) //10
add.apply(ten, [3, 4]) //10
// bind 场景
var small = {
 a: 1,
 go: function(b,c,d){
  console.log(this.a+b+c+d);
 }
}
var large = {
 a: 100
}
var bindTest = small.go.bind(large, 1, 2, 3)
bindTest()
// 还有一种写法
var bindTest = small.go.bind(large, 1) //已知部分参数
bindTest(2, 3) //剩余参数追加
small.go.bind(large, 1)(2,3)

5，es6中箭头函数中的this对象
定义到对象属性方法中，指向window
定义在原型链上的this，指向window
定义在构造函数中，会报错
定义在事件函数中，指向window

let names = 'window-names'
const obj = {
   name: 'es6',
    say: () => {
        console.log(this === window)
        console.log(this.names)  
    }
}
obj.say() //true
// 原型链上
 Cat.prototype.sayName = () => {
    console.log(this === window)
    return this.name
  }
  const cat = new Cat('mm');
  cat.sayName()
  // true     this为window
  // ""  window.name 为空 

  // 解决方法 ===> sayName 更改成普通函数  
  
  function Cat(name) {
    this.name = name;
  } 
  Cat.prototype.sayName = function () {
    console.log(this === ff)
    return this.name
  }
  const ff = new Cat('ff');
  ff.sayName();
// 事件函数 箭头函数在声明的时候就绑定了它的上下文环境，要动态改变上下文是不可能的。
const button = document.getElementById('mngb');
  button.addEventListener('click', ()=> {
    console.log(this === window) // true
    this.innerHTML = 'clicked button'
  })
  // 其实我们是要this执行被点击的button
  // 解决方法 --> 回调函数用普通函数
  const button = document.getElementById('mngb');
  button.addEventListener('click', function(e){
    console.log(this === button)
    console.log(e.target)
    this.innerHTML = 'clicked button'
  })