JavaScript 객체 리터럴에서 'this' 키워드는 어떻게 작동합니까?

JavaScript 객체 리터럴의 "this" 키워드 이해

JavaScript의 객체 리터럴 내에서 "this" 키워드의 동작은 상당히 다를 수 있습니다. 다른 프로그래밍 언어에서. 작동 방식에 대한 포괄적인 설명은 다음과 같습니다.

콜 타임 바인딩

다른 후기 바인딩 언어와 달리 JavaScript는 컴파일 중이 아닌 호출 시 "this"를 바인딩합니다. 시간 또는 런타임. 즉, "this"의 값은 함수가 호출되는 방식에 따라 달라집니다.

바인딩 규칙

JavaScript 객체 리터럴에서 "this"에 대한 바인딩 규칙은 다음과 같습니다. 다음:

1. 생성자 호출: 함수가 호출될 때 "new" 키워드를 사용하면 "this" 키워드가 새로 생성된 객체에 바인딩됩니다.
2. 객체 메서드: 객체 메서드로 호출되면 "this"가 객체에 메서드를 바인딩합니다. 마지막 점 이전의 객체에 속합니다.
3. 전역 범위: 함수 외부 또는 함수가 호출되는 경우 개체 컨텍스트가 없으면 "this"는 전역 개체인biasanya disebut "window" dalam 웹 브라우저에 바인딩됩니다.
4. 이벤트 핸들러: 이벤트 핸들러에서 "this"는 일반적으로 DOM에 바인딩됩니다. 이벤트를 트리거한 요소.
5. Call() 및 Apply() 메서드: "call()" 그리고 "apply()" 메소드를 사용하면 "this"를 임의의 객체에 명시적으로 할당하여 한 객체가 다른 객체의 메소드에 액세스할 수 있습니다.
6. Function.bind(): " Function.bind()" 메서드를 사용하면 "this"를 특정 객체에 명시적으로 바인딩하여 원하는 대로 새 함수 인스턴스를 생성할 수도 있습니다. 바인딩.

사용 사례 예시

다양한 바인딩 규칙을 설명하려면:

const obj = {
  foo: "Foo",
  bar() {
    console.log(this.foo); // "Foo" - "this" refers to the object
  },
};

obj.bar(); // Calls the method, binding "this" to the object

function MyDate(date) {
  this.date = date;
}

const obj1 = {
  foo: new Date(),
  bar: new MyDate(this.foo), // Error: this.foo is undefined
};

const obj2 = {
  foo: new Date(),
  bar: new MyDate(obj2.foo), // Works: "this" refers to obj2
};

첫 번째 예에서는 "this"는 해당 메서드를 개체 메서드라고 부르기 때문에 "obj" 개체를 참조합니다. 두 번째 예에서는 함수가 개체 컨텍스트 없이 호출되므로 "obj1"에서 "this"가 정의되지 않습니다. "obj2"에서 "this"는 "this" 개체를 사용하여 함수가 명시적으로 호출되므로 "obj2"를 참조합니다.

위 내용은 JavaScript 객체 리터럴에서 'this' 키워드는 어떻게 작동합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!