>웹 프론트엔드 >JS 튜토리얼 >JavaScript 객체 리터럴에서 `this` 키워드는 어떻게 작동합니까?

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

Patricia Arquette
Patricia Arquette원래의
2024-12-13 21:48:21624검색

How Does the `this` Keyword Behave in JavaScript Object Literals?

Javascript 객체 리터럴의 "this" 키워드 동작

객체 리터럴 내에서 "this" 키워드는 객체에 대한 자리 표시자 역할을 합니다. 그 자체. 그러나 해당 동작은 호출되는 조건에 따라 달라질 수 있습니다.

코드에서:

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

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

var obj2 = {};
obj2.foo = new Date();
obj2.bar = new MyDate(this.foo);  //  this.foo is undefined

var obj3 = {
    foo: new Date(),
    bar: new MyDate(obj3.foo)
};

var obj4 = {};
obj4.foo = new Date();
obj4.bar = new MyDate(obj4.foo);

"this" 바인딩 이해

Javascript의 "this" 키워드는 지연 바인딩을 나타냅니다. 즉, 해당 값은 함수가 호출될 때까지 결정되지 않습니다. 귀하의 경우:

시나리오 1 및 2:

  • "obj1" 및 "obj2"에서 "new MyDate" 내의 "this" 키워드 함수는 특정 개체의 메서드로 호출되지 않기 때문에 전역 개체(예: "창")를 참조합니다. 전역 개체에 "foo"라는 속성이 없으므로 정의되지 않은 오류가 발생합니다.

시나리오 3 및 4:

  • In "obj3" 및 "obj4", "new MyDate" 함수가 다음과 같이 호출되므로 "this" 키워드는 해당 개체를 성공적으로 참조합니다. 이러한 개체의 메서드입니다. 따라서 "this.foo"는 각 객체 내의 "foo" 속성에 올바르게 액세스합니다.

결론

객체 내에서 "this" 키워드의 동작 리터럴은 함수가 호출되는 컨텍스트에 따라 달라집니다. 객체에 명시적으로 바인딩되지 않은 경우 기본값은 전역 객체입니다. 그러나 객체의 메소드로 호출되면 해당 특정 객체를 참조하여 객체의 속성과 메소드에 대한 적절한 액세스를 보장합니다.

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.