this, arrow function

この4つの意味
これは最近の関数で毎回変わることを覚えておいてください.

window自体
直接書くか普通の関数で書くとwindow
なぜなら、グローバル空間に関数や変数を作成すると、jsはwindowというオブジェクトに格納されるからです.

function 함수() {
        console.log(this)
    }
    //둘은 같다.
    함수();
    window.함수();

オブジェクト自体

let 오브젝트 = {
        data: 'kim',
        함수: function() { //오브젝트 안에, 함수도 넣을 수 있다.
            console.log(this) //메소드 안에서 this를 쓰면, 그 함수를 가지고 있는 오브젝트 그자체.
        }
    }
오브젝트.함수(); //사용하기 위해서, ()를 붙여야함.

1, 2를 종합하면 그 객체 자체이다.

マシン内で新しく生成されたオブジェクト.

function 기계() {
     this.이름 = 'kim'
}
let 오브젝트 = new 기계();

イベントリスナーのthis

document.getElementById('버튼').addEventListener('click', function(e) {
        //셋은 같다.
        this;
        e.currentTarget;
        document.getElementById('버튼')
    });

リファレンス

'use strict'; //엄격하게 사용한다. 변수를 무조건 제대로 선언해야한다.
function 생략
  함수(){ // function을 생략하는 신문법
            console.log(this) //객체 그 자체 this
   }

例
このような状況を把握して作成した例です.
1.コールバックは一般関数

document.getElementById('버튼').addEventListener('click', function(e) {
        let 어레이 = [1, 2, 3];
        어레이.forEach(function(a) { //함수안에 들어간 함수 = 콜백함수
            console.log(this) //콜백인 일반함수에 안에서 쓰였으므로 window다.
        });
    });

この違い

let 오브젝트 = {
        이름들: ['김', '이', '박'],
        함수: function() {
            console.log(this)//객체 자체인 오브젝트 출력
            오브젝트.이름들.forEach(function() {
                console.log(this) //그냥 일반함수 이므로, window 출력
            })
        }
    }

簡単な方法を作成する

let 사람 = {
            name: '손흥민',
            sayHi() { //function없이 표현할 수 있다.
                console.log(`안녕 나는 ${this.name}`)
            }
        }
        사람.sayHi(); //안녕 나는 손흥민

作成方法

オブジェクトのすべてのデータを追加

var 자료 = {
        data: [1, 2, 3, 4, 5]
    }
    자료.전부더하기 = function() {
        let sum = 0;
        this.data.forEach(function(a) { //여기서 this는 메소드 앞의 주인같은 느낌이다.
            sum += a;
        })
        console.log(sum)
    }
    자료.전부더하기();

settimeoutを使用して

を表示

document.getElementById('btn').addEventListener('click', function() {
	console.log(this.innerHTML) //버튼입니다.
        setTimeout(() => {
            console.log(this.innerHTML) //위와 동일, arrow function이라 바깥의 가장 가까운 this, 아래 참고
        }, 1000)
    });

arrow function

let 오브젝트 = {
        이름들: ['김', '이', '박'],
        함수: function() {
            console.log(this)//객체 자체인 오브젝트 출력
            오브젝트.이름들.forEach(() => { //arrow function
                console.log(this) //arrow function은 바깥의 가까운 오브젝트를 그대로 사용
            })
        }
    }

リファレンス
関数自体の機能
1.コードの組み合わせを成功させたい場合に使用
2.I/O機器の作成
矢印関数の利点

I/Oマシンの作成時に表示しやすい

let 함수 = (a) => { return a + 10};
    함수(5);

パラメータで、カッコ

を省略できます.

 let 함수 = a => { return a + 10};
    함수(5);

が返された場合、カッコ

は省略できます.

 let 함수 = a => return a + 10 ;
    함수(5);

矢印関数の例

forEachコールバック関数

[1, 2, 3, 4].forEach(function(a) {
        console.log(a);
    })

위에 식이, 아래처럼 바뀐다.

[1, 2, 3, 4].forEach(a => console.log(a));

イベントリスナー

document.getElementById('버튼').addEventListener('click', (e) => {
        this; //window다. arrow function이라, 바깥에 있던 this값을 내부에서 그대로 사용
    });

オブジェクトの関数

let 오브젝트 = {
        함수 : () => {
            this; //window다. 마찬가지로 바깥에 있던 window인 this를 그대로 사용한다. 
        }
    }