Javascript - this 키워드

인프런 자바스크립트 입문 수업을 듣고 중요한 내용을 정리했습니다.
개인 공부 후 자료를 남기기 위한 목적이므로 내용 상에 오류가 있을 수 있습니다.

this 키워드

this 키워드 이해하기

this는 사용하는 상황에 따라 의미가 달라진다는 것에 유의해야 한다.

<첫 번째 사용 예시>

console.log(this);

// 결과 : console.log(window);와 동일한 결과 값을 갖는다.
//이때의 this는 글로벌 오브젝트인 window와 동일한 의미로 사용된다.



function myFunction( ){

	console.log(this);

 }

myFunction();                  

// 결과 : console.log(this);를 함수 안에서 선언하든, 밖에서 선언하든 간에
//모두 console.log(window);과 동일한 결과 값을 갖는다.

<두 번째 사용 예시>

var person = {
	firstName: "John",
	lastName: "Kim",
	fullName: function( ){                               
	return this.firstName + " " + this.lastName;     
 }
};

console.log(person.fullName());

// 결과 : John Kim

//함수를 오브젝트안에 넣을 경우, 오브젝트의 키 값은 함수이 되고
//오브젝트의 벨류 값은 함수의 구조가 된다. 

//여기서 this는 바로 자신이 속한 오브젝트(person) 자체를 의미하며, 
//this.firstName는 person의 키 값이 firstName인 벨류 값(John)을 의미한다.

<세 번째 사용 예시>

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>
  <button type="button" onclick="this.style.backgroundColor='red';">클릭</button>   
  <!-- 여기서 this는 자신이 속한 html의 element 전체를 의미함 -->
    
    
  <button type="button" onclick="callFunc(this);">클릭2</button>
  <!-- 여기서 this는 자신이 속한 html의 element 전체를 의미함 -->
    
    
  <select onchange="changeSelect(this);">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <!-- 여기서 this는 자신이 속한 html의 element 전체를 의미함 -->


  <script> 
  function callFunc(obj){
    
  console.log(obj);
    
  }


// 결과 : <button type="button" onclick="callFunc(this);">클릭2</button> 

  //callFunc(this);에서 this는 callFunc( ) 함수의 전달인자이며,
  //자신이 속한 html의 element 전체를 의미한다.
        


  function changeSelect(obj){
    
  console.log(obj.value);
    
  }

  // 결과 : 선택박스에서 선택 값을 바꿀 때마다 콘솔창에 해당 결과가 나타난다.
    
  //select 태그 안의 changeSelect(this);에서 this는
  //<select onchange="changeSelect(this);"> 자체를 의미한다.
    
  //즉, 함수실행 시 changeSelect( ) 함수의 전달인자인 this가 파라미터인 obj로
  //들어가고 그 결과 콘솔창에는 select 태그의 선택된 value값이 결과 값으로 출력되는 것
  //이다.
  </script>
</body>
</html>

저작자표시 비영리 변경금지

'Javascript' 카테고리의 다른 글

Javascript - Default Function Parameter (0)	2021.09.27
Javascript - Scope (0)	2021.09.27
Javascript - 크롬 개발자 도구 (0)	2021.09.22
Javascript - Window 객체 (0)	2021.09.22
Javascript - JSON 객체 (0)	2021.09.22