22장 this, 23장 실행 컨텍스트

[Turtle-Hwan]

늦어서 죄송합니다
양이 상당하네요

[whddltjdwhd]

챕터 양이 상당이 많네요. . . 정리하느라 고생하셨습니다..!

[whddltjdwhd]

그럼 다음과 같이 let을 var로 변경했을 때는 별도의 렉시컬 환경이 생기지 않는 걸까요??

var x = 1;

if (true) {
  var x = 10; // -> 렉시컬 환경이 새로 생기나?
  console.log(x); // 10
}

console.log(x); // 1

[whddltjdwhd]

let 또는 const 의 경우엔 아예 초기화 자체가 되질 않아서 접근할 수 없죠!

그리고 함수 표현식으로 선언한 함수의 경우엔, 해당 함수가 평가될 때 함수의 이름과 똑같은 이름의 식별자를 객체 환경 레코드에 바인딩된 BindingObject를 통해 전역 객체에 키로 등록하고 생성된 함수 객체를 즉시 할당한다! 라고 하네요

-> 그럼 전역 렉시컬 환경이 아닌, 함수 또는 블록 렉시컬 환경에서는 전역 객체의 키로 등록하는 과정만 빠지는걸로 이해하면 될까요?

[clicelee]

이게 2.2 에서 메서드가 다른 변수에 할당된 후 호출되면 일반 함수처럼 동작하여 this가 전역 객체를 가리키기 때문에 나온 해결책이군요

[clicelee]

고생하셨습니다! 감기 조심하세요~

[clicelee]

apply와 call에서 함수를 실행할 때 호출 시 첫 번째 인수로 전달된 객체를 this로 바인딩합니다.
명시적 바인딩을 해줘도 bind가 아닌 call, apply의 경우에는 콜백함수가 실행되는 시점에 글로벌 컨텍스트로 바인드됩니다
하지만 호출 후 반환된 값은 함수 실행의 결과이고, this는 다시 호출 컨텍스트에 따라 변경될 수 있습니다.

call, apply는 명시적으로 실행한 결과값을 반환하고 bind는 this를 묶은 함수를 리턴해준다.
apply, call은 함수를 호출한 결과를 반환하고 기존 함수는 this가 다시 끊깁니다

반면 bind로 반환한 함수가 호출될 때 this가 묶인 함수이므로 제대로 된 결과값을 반환합니다

const obj = {
  value: 42,
  hello: function () {
    setTimeout(function () {
      console.log(this.value); // 42
    }.bind(this), 100); // bind로 고정된 this를 가진 새 함수를 반환
  },
};

obj.hello();

const obj = {
  value: 42,
  hello: function () {
    setTimeout(function () {
      console.log(this.value);
    }.call(this), 100); // 여기서 this는 명시적으로 전달되지만, 함수 실행 후 사라짐
  },
};

obj.hello(); // undefined

제가 생각하는게 맞겠죠~~? 다른분들 생각도 궁금합니다

[Turtle-Hwan]

const person = {
	name: 'Lee',
	foo(callback) {
		setTimeout(callback, 100);
	}
};

person.foo(function() {
	console.log(`Hi! my name is ${this.name}.`);
})

const person2 = {
    name: "123",
	bar() {
		console.log(`Hi! my name is barbar ${this}.`);
	}
}

person.foo(person2.bar);

이 예제에서 person2.bar로 호출했을 때 this가 전역 객체인 window가 되는 이유가 무엇일까요~~?

@MinboyKim @junepil 학생! 숙제입니다!!

[clicelee]

스터디 중 나온 질문: apply 와 call은 매개변수의 차이 같은데 왜 두개가 존재할까요?

[clicelee]

그냥 진짜 매개변수의 차이인듯...
call apply 공개 영상

[whddltjdwhd]

10분 테코톡 - JS 실행 컨텍스트 이 영상에서 개념적으로 조금 쉽게 잘 설명해주고 있어요!