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

JavaScript의 객체 리터럴 내에서 "this" 키워드가 작동하는 방식

JavaScript에서 "this" 키워드는 현재 객체를 나타냅니다. 함수가 호출된 위치입니다. 그러나 "this"의 바인딩은 특히 객체 리터럴 내에서 사용될 때 혼란스러울 수 있습니다.

객체 리터럴 내에서 "this"의 값은 객체 자체에 바인딩되지 않고 전역 객체( 브라우저의 창). 이로 인해 다음 코드에서 볼 수 있듯이 예기치 않은 동작이 발생할 수 있습니다.

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

이 예에서 "this.foo"는 전역 객체를 참조하기 때문에 MyDate 생성자 내에서 정의되지 않습니다. "foo"라는 속성이 없습니다.

이 문제를 해결하려면 바인딩()을 사용하여 객체 리터럴 내에서 "this"를 명시적으로 바인딩할 수 있습니다. 메서드:

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

이렇게 하면 MyDate 생성자 내부의 "this"가 올바른 개체(obj4)를 참조하도록 보장됩니다.

또는 화살표 함수를 사용하여 "this"를 바인딩할 수도 있습니다. 객체에:

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

화살표 함수에서 "this"는 정의 시점에 주변 범위에 바인딩됩니다. 이 경우 객체 그 자체입니다.

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