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/appy/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,es 6の矢印関数の中の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'
  })