this

this(1)

아무데서나 or 일반(전역)함수에서 this를 써보면?

console.log(this); //Window객체

function 함수(){
  console.log(this) // Window객체
}

strict mode가 적용되지 않고

객체가 없을 때의 this는

브라우저 환경에서는 Window라는 전역 객체를 참조하기 때문에

둘 다 결과는 Window라는 오브젝트가 출력된다.

Window가 최상위 객체라고 보면 됨.

script 최상단에 'use strict' 써놓으면?

'use strict'

console.log(this); //Window객체

function 함수(){
  console.log(this) // undefined
}

오브젝트 내의 함수에서 써보면?

var 오브젝트 = {
  data : 'Kim',
  함수 : function(){
    console.log('안녕')
  }
}

console.log(오브젝트.data); // "Kim"
오브젝트.함수(); // "안녕"
// 오브젝트의 함수 사용할 때는 소괄호 붙여줘야 함.

오브젝트 내의 함수를 메소드라고 부른다. 이 때 메소드 내에서 this를 콘솔창에 띄워보면 메소드가 포함되어있는 객체를 가리킨다.

var 오브젝트 = {
  data : 'Kim',
  함수 : function(){
    console.log(this)
  }
}
오브젝트.함수(); // 오브젝트 객체

중첩된 객체의 함수에서 this를 실행해보면?

var 오브젝트 = {
  data : {
    함수 : function(){
      console.log(this)
    }
  }
}
오브젝트.data.함수() // 객체 data를 출력

객체 내에서 Arrow function를 이용하여 this를 출력해보면?

var 오브젝트 = {
  data : {
    함수 : ()=>{
      console.log(this)
    }
  }
}
오브젝트.data.함수() // Window

신 문법 Arrow function의 경우 this를 함수 밖에 있던 것을 그대로 가져와서 사용함.

객체 내에 함수 프로퍼티 신문법

함수 : ()~ 이렇게 안하고 아래 코드처럼 키 없이 함수 자체를 넣어도 됨.

var 오브젝트 = {
  data : {
    함수()=>{
      console.log(this)
    }
  }
}

요약

• 우리가 js에서 변수나 함수를 생성하면 Window라는 전역 객체에 보관하는 것이다.

function 함수(){
  console.log('함수수');
}
함수();
window.함수();  둘 다 똑같이 작동함.

결국 this는 나를 담고 있는 객체를 가리킨다.

this(2)

constructor

• 기본적인 객체 만드는 코드

var 새오브젝트 = {}; //빈 객체인 오브젝트라는 객체 생성

• 함수 안에 쓰면 새로 생성되는 obj를 가리킴.(인스턴스)

function 기계(){
  this.이름 = 'Kim'
}

• 함수에서 오브젝트 생성하는 방법

기본

function 기계(){
  this.이름 = 'Kim'
}

var 오브젝트 = new 기계();
// 이름: "Kim" 프로퍼티를 가진 객체가 생성됨

응용

function 기계(name){
  this.이름 = name;
}

var 오브젝트 = new 기계("호랑이");
// 이름: "Kim" 프로퍼티를 가진 객체가 생성됨

addEventLisntener에서 사용하면?

document.getElementById().addEventListener('click', function(){
  this; // === e.currentTarget; 지금 event가 동작하는 곳
})

콘솔 찍어보면 html 태그가 나옴

주의!

콜백함수

  var 어레이 = [1,2,3];
  어레이.forEach(function(a){
    console.log(this);
  });
})

콜백함수는 일반함수 -> 일반함수에서의 this는 Window 가리킴

오브젝트 내에서 콜백함수를 사용한다면?

var 오브젝트 = {
  이름들 : ['김','이','박'],
  함수 : function(){
    console.log(this); // 오브젝트
    오브젝트.이름들.forEach(function(){
      console.log(this); // Window
    })
  }
}

콜백함수를 Arrow function으로 바꿔본다면?

arrow function은 외부 this의 값을 가져와서 쓴다고 했음.
따라서 오브젝트의 this와 똑같이 출력됨.

var 오브젝트 = {
  이름들 : ['김','이','박'],
  함수 : function(){
    console.log(this); // 오브젝트
    오브젝트.이름들.forEach(()=>{
      console.log(this); // 오브젝트
    })
  }
}

Arrow function

설명

function 함수(){}

const 함수 = function(){}

const 함수 = ()=>{}

• 함수 사용의 목적

1. 코드들을 기능으로 묶고 싶을 때

2. 입출력 기계를 만들고 싶을 때
   const 함수 = (a) => { return a+10}
   a를 주면 결과를 리턴

Arrow function 장점

1. 입출력 기계를 만들 때 보기 쉬움.
2. 소괄호 생략 가능.(파라미터가 하나일 때)
3. return 한 줄이면 중괄호 생략 가능
   const 함수 = a => a+10

    const 함수 = (a,b) => {
	  솰라솰라
      솰랄
       return thkffk
    }

Arrow function 예시

1. forEach 콜백함수

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

2. 이벤트 리스너
   주의!

document.getElementById('버튼'),
  addEventListner('click',(e)=>{this});

이렇게 쓰면 화살표함수의 this는 외부의 this를 가져와서 쓰기 때문에 window를 가리킴.

document.getElementById('버튼'),
  addEventListner('click',function(){
this}); //이렇게 사용하거나

document.getElementById('버튼'),
  addEventListner('click',(e)=>{e.currentTarget});

3. 오브젝트 안의 함수

var 오브젝트 = {
  함수 : ()=>{
  this} // window 
}

따라서 오브젝트를 가리키고 싶으면 함수 선언식 function() 쓰면 됨.

연습문제

1. 간단한 메소드 만들기

var 사람 = {
  name: '손흥민',
}

사람.sayHi(); //안녕 나는 손흥민

답 보기

  var 사람 = {
  name: '손흥민',
  sayHi: function(){
    console.log(`안녕 나는 ${this.name}`)
    },
  }
사람.sayHi()

2. 오브젝트 내 데이터 전부 더하기

var 자료 = { 
  data : [1,2,3,4,5],
  전부더하기 : function(){
    let sum = 0;
    for(let i=0; i< this.data.length; i++){
      sum = sum + this.data[i];
    }
    console.log(sum)
  }
}


자료.전부더하기()

조건 : 자료 객체 내에 코드 ㄴㄴ

var 자료 = { 
  data : [1,2,3,4,5],
  
}


자료.전부더하기 = function(){
  var 합 = 0;  
  this.data.forEach(function(a){
     합 += a;
    })
  console.log(합)
  }

자료.전부더하기()

3. setTimeout 이용하기
   버튼 누르면 1초 뒤에 버튼 태그 내용 콘솔창에 출력.

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

만약 setTimeout 의 콜백함수로 일반함수를 썼으면 window가 나온다. 그래서 이 때는 화살표함수를 사용하면 this는 버튼 태그를 가리킨다.