`this`와 JavaScript의 직접 객체 참조: 중첩 함수에 대해 어떤 접근 방식이 더 안전한가요?

자체 키 함수의 객체 리터럴 참조: 의미 평가

JavaScript에서는 객체 리터럴 내에 함수를 포함하는 것이 일반적입니다. 데이터와 동작을 캡슐화하는 방법. 그러나 이러한 함수 내에서 개체 속성에 액세스할 때 난관이 발생합니다. 이것을 사용해야 할까요, 아니면 개체 리터럴을 직접 참조해야 할까요?

이것을 사용하는 것과 직접 개체 참조를 사용하는 것

The 문제 설명에 제공된 첫 번째 예는 이것을 사용하여 객체 리터럴을 참조합니다.

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

그러나 두 번째 예는 이를 우회하고 객체를 직접 참조합니다.

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

두 접근 방식의 잠재적인 함정

두 접근 방식 모두 문제를 일으킬 수 있습니다.

• 이 참조: 객체의 메소드로 호출되지 않는 경우 (obj.key2()), 이는 전역 객체와 같은 다른 것을 참조할 수 있습니다.
• 직접 객체 참조: 함수가 실행되는 동안 객체가 재할당되면 함수는 잘못된 값에 액세스할 수 있습니다.

함정

이러한 함정을 피하려면 다음과 같은 몇 가지 옵션이 있습니다.

• ES6 Const: 객체 재할당을 방지하려면 const를 사용하세요.
• 클로저: 객체를 로컬 범위에 저장합니다. 클로저.
• bind(): 함수를 객체에 바인딩하여 항상 올바른 객체를 참조하도록 합니다.

안전한 구현

다음 코드는 클로저를 사용한 안전한 구현을 보여줍니다.

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

위 내용은 `this`와 JavaScript의 직접 객체 참조: 중첩 함수에 대해 어떤 접근 방식이 더 안전한가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!