✨ this

window 뜻함

⒈ strict mode일때

IE 10버전 이상에서 'use strict'라고 적어주면 strict mode로 자바스크립트 작성 가능
이 모드에서는 var 없이 변수 선언하는 행위 방지해준다.
이때 this를 함수안에서 부르면 undefined라는 값으로 강제 지정

⒉ Object 자료형 내에서

var obj = {
  data : 'Youngki',
  func : function(){ console.log(this) } 
}

obj.func();

위와 같이 작성할 경우 this 출력시킬 경우 {data:'Youngki',func:f} 이런식으로 출력됨
메서드 안에서 this 쓰면 this는 메서드를 가지고 있는 오브젝트를 뜻한다.

⒊ constructor 안에서

constructor 안에서 쓰면 constructor로 새로 생성되는 오브젝트 뜻한다

function con(){
	this.name='Youngki';
}

이렇게 작성해주면 여기서 this는 con에서 새로 생성될 오브젝트들을 의미한다.

⒋ eventlistener 안에서

document.getElementById('btn').addEventListener('click', function(e){
  console.log(this)
});

this는 e.currentTarget(현재 이벤트가 동작하는 곳)을 의미하게 된다.

✨ 예시

📍 이벤트리스너 안에서 콜백함수 쓸 때

document.getElementById('btn').addEventListener('click', function(e){
  var arr = [1,2,3];
  arr.forEach(function(){
    console.log(this)
  });
});

이렇게 작성한다면 this를 출력했을 때, 이벤트리스너 안임에도 불구하고, function안에 있기 때문에 window를 출력하게 된다.

📍 오브젝트 안에서 콜백함수 쓸 때

var obj = {
  names : ['영긔', '승긔', '둥긔'];
  func : function(){
      obj.func.forEach(function(){
        console.log(this)
      });
  }
}

이렇게 작성했을때 this를 출력한다면 window가 나옴
→ this 값을 판단할 때는 가장 가까이 있는 함수를 봐야함. 여기서 this는 function()에 속해 있는데 이건 일반함수이므로 window를 나타내게 된다.

var obj = {
  names : ['영긔', '승긔', '둥긔'];
  func : function(){
      obj.func.forEach(()=>{
        console.log(this)
      });
  }
}

이렇게 작성하게 된다면, 내부의 this 값을 새로 바꿔주지 않기 때문에 this를 유용하게 사용할 수 있음

✨ 기존 function 생성법

function f(){
  ..
}

혹은

var f = function(){
  ..
}

이런 방식으로 써줬다. 그러나 ES6 문법을 사용하면 다음과 같이 함수를 작성할 수 있다.

🔎 Arrow fuction

var f = () => {
  ..
}

📍 입출력 직관적임

arrow function을 사용하면 함수의 입출력 기능을 직관적으로 표현할 수 있다.

var mul = (x) => { return x * 2 }

📍 소괄호 생략가능

파라미터가 하나일 경우 소괄호 생략할 수 있다.

var mul = x => { return x * 2 }

📍 중괄호 생략가능

중괄호 안에 return문 한줄뿐이면 중괄호, return 둘다 생략 가능

var mul = x => x * 2 ;

📍 밖의 this를 그대로 사용 (✨제일 중요한 이유)

var obj = {
  f : function(){ console.log(this) }
}

obj.f()

이때 this는 obj를 나타냄

var obj = {
  f :  () => { console.log(this) }
}

obj.f()

이때 this는 window 출력
this는 함수를 만나면 항상 변하지만 arrow function 안에서는 변하지 않고 밖에 있던 this를 그대로 쓴다. 이때 obj밖에 있던 this는 window이므로 window를 출력한다.

✨ 구현해보기

💡 간단한 메서드 만들기

var person = {
  naming: '영긔',
}

person.sayHi(); //안녕 나는 영긔

위 코드를 수정해서 '안녕 나는 영긔'라고 출력되게 작성하기

    var person = {
      naming: "영긔",
      sayHi: function () {
        console.log("안녕 나는 " + this.naming);
      }
    };

    person.sayHi();

위와 같이 작성했다.

이처럼 콘솔창에 잘 나타나는 것을 확인할 수 있다.

💡 오브젝트 내 데이터 전부 더해주기

        var datas = {
            data: [1, 2, 3, 4, 5]
        };

        datas.add();

위 코드를 수정해서 datas.data안의 모든 숫자를 더해주도록 짰다.

        var datas = {
            data: [1, 2, 3, 4, 5]
        };
        datas.add = function () {
            var sum=0;
            this.data.forEach(function(x){
                sum+=x;
            });
            console.log(sum);
        }
        datas.add();

여기서 this는 datas를 가르킨다.

이런 식으로 콘솔에 잘 출력된다.

💡 setTimeout 사용하기

setTimeout(콜백함수, ms단위의 시간)

이렇게 작성한다면 특정 함수를 일정한 시간 뒤에 실행할 수 있다.
예를 들어,

setTimeout(function(){ console.log('배고픔') }, 1000)

이렇게 작성한다면 1초뒤에 콘솔을 출력하도록 할 수 있다.

이런 setTimeout을 사용해보자.

<button id="버튼">버튼이에요</button>

<script>

  document.getElementById('버튼').addEventListener('click', function(){
    console.log(this.innerHTML)
  });

</script>

위의 코드를 수정하여 1초후에 콘솔창에 출력되도록 작성해보자.

    <button id="버튼">버튼이에요</button>
    <script>
        document.getElementById('버튼').addEventListener('click', function () {
            setTimeout(()=>{console.log(this.innerHTML)},1000);
        });
    </script>

위와 같은 방식으로 작성할 수 있다. this.innerHTML을 제대로 출력하기 위해 arrow function을 작성했다.

잘 작동하는 것을 확인할 수 있다.

잘 보여주게 하기 위해 alert를 사용해 작성해보았다.