JavaScriptの中のthis

グローバルコンテキスト
全体のコンテキストで、thisは全体のオブジェクトを指します.

console.log(this.document === document); // true
console.log(this === window); //true

関数のコンテキスト
DOMイベントハンドリング関数の中のthis
一般に、thisの値は、イベントをトリガする要素の参照である.

button.addEventListener('click',function(e){
    console.log(this === e.currentTarget); // true
})

jQueryの中のthis
jQueryが処理プログラムを起動すると、thisキーワードは現在実行中のイベントの要素を指します.直接イベントに対してthisは結合イベントの要素を表します.エージェントイベントに対してthisは、selectorに整合する要素を表している.

// HTML

  click me

// CSS
.div{
    width:200px;
    height:200px;
    background:#3CA0D0;
    display:flex;
    justify-content:center;
    align-items:center;
}
// JS
$('div').on('click',function(e){
    console.log(this === e.currentTarget);
    console.log(this === e.target);
})

buttonをクリックすると、前の方がtrueで、後の方がfalseです.divをクリックすると、trueです.thisがe.current Targetであることが分かります.
callとappy
関数の関数体にthisキーが使用されている場合、すべての関数がFunctionオブジェクトのプロトタイプから引き継がれるコール()方法とapply()メソッドから呼び出した場合、その値は指定されたオブジェクトに結び付けられます.
簡単に言えば、thisはcallとappyの最初のパラメータです.

function add(c, d){
  return this.a + this.b + c + d;
}
var o = {a:1, b:3};
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16
add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34

どのようにthisを確定しますか
1.co.nsole.logs 2.ソースコードを見る3.APIドキュメントを見る
例を見ます

var name = 'jack';
var object = {
    name:'lucy',
    sayHi:function(){
        console.log('hi,' + this.name)
    }
}
var fn = object.sayHi;
fn(); // fn.call() //hi,jack
object.sayHi(); // obeject.sayHi.call(object)//hi,lucy

// HTML
click me
// JS
var button =document.querySelector('button');
var name = 'jack';
var object = {
    name:'lucy',
    sayHi:function(){
        button.onclick = this.onClick
    },
    onClick:function(){
        console.log(this.name)
    }
}
object.sayHi();

buttonがクリックする時、thisの方向はbuttonで、印刷してくるのはbtnです.

var button = document.querySelector('button');
var name = 'jack';
var object = {
    name: 'lucy',
    sayHi: function() {
        var that = this;
        button.onclick = function() {
            console.log(that.name);
        }
    },

}
object.sayHi();

この時、buttonをクリックして、プリントアウトしたのはlucyです.