JavaScript 개체 리터럴 함수에서 \'this\'를 개체 리터럴 이름으로 바꿀 수 있나요?

객체 리터럴 함수 참조의 모호함: 'this'를 객체 리터럴로 대체

객체 리터럴을 사용할 때 중요한 질문이 발생합니다. 객체 내의 함수는 'this' 대신 리터럴 이름을 사용하여 상위 객체를 참조합니까? 이것이 겉으로는 작동하는 것처럼 보이지만 의도하지 않은 결과를 초래할 수 있습니다.

다음 예를 고려하십시오.

var obj = {
    key1: "it",
    key2: function() {return this.key1 + " works!"}
};
alert(obj.key2());

key2 함수 내의 'this'가 전역을 참조하기 때문에 이 코드는 콘솔 오류를 트리거합니다. obj 개체 대신 개체(창)입니다. 이 오류는 함수에서 객체 리터럴을 직접 사용하여 방지할 수 있습니다.

var obj = {
    key1: "it",
    key2: function() {return obj.key1 + " works!"}
};
alert(obj.key2());

그러나 이 접근 방식도 문제에 영향을 받지 않습니다. 이중 추가 시나리오를 분석해 보겠습니다.

1. 외부 함수 호출:

var obj = {
    key1: "it",
    key2: function() { return this.key1 + " works!" }
};
var func = obj.key2;
alert(func()); // error

key2 함수를 독립형 함수로 호출(메서드가 아님) obj)의 'this' 참조가 중단되어 예상치 못한 오류가 발생할 수 있습니다. 결과.

2. 참조 교환:

var obj = {
    key1: "it",
    key2: function() { return obj.key1 + " works!" }
};
var newref = obj;
obj = { key1: "something else"; };
alert(newref.key2()); // "something else works"

obj 참조를 보조 참조에서 변경하면 올바른 key2 함수의 내부 참조가 무효화될 수 있습니다.

이러한 잠재적인 문제를 해결하기 위한 몇 가지 솔루션은 다음과 같습니다. 사용 가능:

• const가 있는 ES6: 'this' 참조를 깨뜨릴 수 있는 객체 돌연변이를 방지합니다.
• ES5 클로저: 객체 캡슐화 외부 참조를 피하기 위해 함수 내에서
• 바인딩: key2 함수를 obj 객체에 바인딩하여 'this' 참조가 항상 올바른지 확인하세요.

가장 적절한 솔루션을 선택하는 것은 다음과 같습니다. 특정 상황과 설명된 문제가 발생할 가능성에 대해 설명합니다. 그럼에도 불구하고 객체 리터럴 함수를 사용할 때는 잠재적인 함정을 인식하고 필요한 예방 조치를 취하는 것이 중요합니다.

위 내용은 JavaScript 개체 리터럴 함수에서 \'this\'를 개체 리터럴 이름으로 바꿀 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!