this와 함수 선언

정태민·2025년 1월 9일
0

this 는 자신을 가리키는 자기 참조 변수이다

this는 암묵적으로 생성되며, 코드 어디서든 참조할 수 있다.

this는 동적으로 바인딩된다

전역 문맥(Global Context)

	console.log(this); // window

객체 메서드(Object Method) - 해당 객체를 참조합니다.

	const obj = {
      name: "waaaa",
      greet() {
        console.log(this.name); // "Alice"
      }
    };
    obj.greet(); // "waaaa"

함수 호출 - 전역 객체를 참조합니다.

      name: "waaaa",
      arrr: [1,2,3,4],
      greet() {
        console.log(this.name); // "Alice"
      }
	  checkthis() {	
      		this.arr.forEach(function showThis() {
      			console.log(this);
    		})
    	}
    }
    checkthis(); // 브라우저에서는 Window, strict 모드에서는 undefined

생성자 함수 - 새로 생성된 객체를 참조합니다.

	function Person(name) {
      this.name = name;
    }
    const alice = new Person("waaa");
    console.log(alice.name); // "waaa"

화살표 함수(Arrow Function)

화살표 함수에서는 this가 렉시컬 컨텍스트를 따릅니다.

	const obj = {
      name: "waaa",
      greet: () => {
        console.log(this.name);
      }
    };
    obj.greet(); // undefined (렉시컬 컨텍스트로 인해 this는 Window를 참조)

함수 표현식과 선언문

함수선언식(function문)

지정된 파라미터를 갖는 함수를 정의함.
주요 코드 흐름 중간에 독자적인 구문 형태로 존재.

function functionName() {
     console.log("Can Hoisting");
}

호이스팅 가능. 선언 전에도 호출 가능.

  • 실행 전 초기화 단계에서 함수선언 방식으로 정의한 함수가 생성됨.
  • 함수가 선언된 코드블록 안에서만 유효함

함수표현식(function expression)

표현식이나 구문구성 내부에 생성됨. (주로 할당 표현식 '=' 우측에)
클로저로 사용하거나 콜백으로 사용할 수 있다.

var functionName = function() {
       console.name("Can NOT Hoisting");
}

호이스팅 불가. 에러발생.
실행 흐름이 해당 함수에 도달했을 때 함수가 생성됨.

즉시 실행 함수 표현식

정의와 동시에 실행되는 함수.

	(function() {
   console.log("I am an IIFE!");
 })();

축약 메서드

	const obj = {
     greet(name) {
       return `Hello, ${name}!`;
     }
   };
   console.log(obj.greet("waaaaa")); // "Hello, waaaaa!"
   
   class Person {
     constructor(name) {
       this.name = name;
     }

     greet() {
       return `Hello, ${this.name}!`;
     }
   }
   
   const alice = new Person("wjjjjj");
   console.log(alice.greet()); // "Hello, wjjjjj!"

0개의 댓글