JavaScript에서 개인 변수 구현

월드 와이드 웹을 강화하는 프로그래밍 언어 인 JavaScript는 1995 년 5 월 Brendan Eich가 창설 한 이래로 널리 사용되고 다재다능한 기술이되었습니다. 성공에도 불구하고 상당한 비판, 특히 일부 기능을 받았습니다. 예를 들어, 인덱스로 사용하면 객체가 문자열로 캐스팅됩니다. 1 == "1"은 True를 반환 하거나이 this 혼란스럽게합니다. 그러나 특히 흥미로운 특징 중 하나는 가변 개인 정보를 구현하는 다양한 기술의 존재입니다.

현재 JavaScript에서 개인 변수를 직접 생성 할 수있는 방법이 없습니다. 다른 언어에서는 private 키워드 또는 이중 밑줄을 사용할 수 있으며 모든 것이 잘 작동하지만 JavaScript에서는 가변적 인 개인이 예상 기능보다 언어의 출현 기능과 더 유사하게 만드는 기능이 있습니다. 먼저 우리의 질문의 배경을 소개합시다.

var 키워드

2015 년까지 기본적으로 변수를 만드는 방법은 기본적으로 있었으며 var 키워드였습니다. var 은 함수 스코프 링 이므로이 키워드와 관련된 변수는 함수 내 코드로만 액세스 할 수 있습니다. 함수가 외부 또는 본질적으로 "글로벌"인 경우 변수는 정의 된 후에 실행 된 모든 것에 의해 변수에 액세스 할 수 있습니다. 정의 전에 동일한 범위에서 변수에 액세스하려고하면 오류 대신 undefined 되지 않게됩니다. var 키워드의 "업그레이드"방법 때문입니다.

 // 글로벌 범위에서 "A"를 정의합니다
var a = 123;

// 함수 범위에서 "b"를 정의합니다
(기능() {
  Console.log (b); // => 프로모션으로 인해 오류 대신 "정의되지 않은"이 반환됩니다.
  var b = 456;
}) ();

Console.log (a); // => 123
Console.log (b); // "b"는 함수 스코프 외부에서 "b"에 액세스 할 수 없으므로 "referenceError"예외를 던집니다.

ES6 변수의 탄생

2015 년에 ES6/ES2015는 공식적으로 출시되었으며 두 가지 새로운 변수 키워드 인 let and const . 둘 다 블록 스코프 링이므로 이러한 키워드로 생성 된 변수는 동일한 브래킷 쌍 내에서 무엇이든 액세스 할 수 있습니다. var 과 동일하지만 let 및 const 변수는 루프, 기능, 문, 괄호 등과 같은 블록 스코프 외부에 액세스 할 수 없습니다.

 const a = 123;

// 블록 스코프 예제 #1
if (true) {
  Const B = 345;
}

// 블록 스코프 예제 #2
{
  const c = 678;
}

Console.log (a); // 123
Console.log (b); // "b"는 블록 스코프 외부에서 "b"에 액세스 할 수 없기 때문에 "참조 기"를 던집니다.
Console.log (C); // "b"는 블록 스코프 외부에서 "b"에 액세스 할 수 없기 때문에 "참조 기"를 던집니다.

범위를 벗어난 코드는 변수에 액세스 할 수 없으므로 사생활의 출현을 얻습니다. 우리는 다른 방식으로 구현하는 몇 가지 기술을 소개 할 것입니다.

기능 사용

JavaScript의 함수도 블록이므로 모든 변수 키워드와 함께 작동합니다. 또한 "모듈"이라는 매우 유용한 설계 패턴을 구현할 수 있습니다.

모듈 디자인 모드

Google은 옥스포드 사전에 의존하여 "모듈"을 정의합니다.

이 프로그램은 IT로부터 구성되거나 다수의 상호 상호 관련된 복잡한 활동 단위를 분석 할 수 있습니다.

- "모듈"정의 1.2

모듈 디자인 패턴은 공개 및 개인 구성 요소를 결합하고 프로그램을 더 작은 구성 요소로 분류 할 수 있으므로 JavaScript에서 매우 유용합니다. "캡슐화"라는 프로세스를 통해 다른 프로그램 부분 만 액세스 할 수있는 것만 노출시킬 수 있습니다. 이런 식으로, 우리는 사용하는 데 필요한 것을 노출시키고 볼 필요가없는 것을 숨 깁니다. 기능 범위를 활용하여이를 수행 할 수 있습니다.

 const carmodule = () => {
  MilesDriven = 0을하자;
  속도 = 0을하자;

  const Accelerate = (금액) => {
    속도 = 양;
    마일드 드라이브 = 속도;
  }

  const getmilesdriven = () => milesdriven;

  // "반환"키워드를 사용하면 노출 된 내용과 숨겨진 컨텐츠를 제어 할 수 있습니다. 이 경우 Accelerate () 및 getMilesDriven () 함수 만 노출시킵니다.
  반품 {
    가속,
    getmilesdriven
  }
};

const testcarmodule = carmodule ();
testCarmoDule.Accelerate (5);
testCarmoDule.Accelerate (4);
console.log (testCarmoDule.getMilesDriven ());

이런 식으로 우리는 마일리지와 가속도를 얻을 수 있지만,이 경우 사용자는 액세스 속도가 필요하지 않기 때문에 accelerate() 및 getMilesDriven() 메소드 만 노출하여 숨길 수 있습니다. 기본적으로 speed 는 개인 변수입니다. 동일한 범위 내에서 코드로만 액세스 할 수 있기 때문입니다. 이 경우 개인 변수의 이점이 분명해지기 시작합니다. 변수, 기능 또는 기타 내부 구성 요소에 액세스 할 수있는 기능을 삭제하면 사용해서는 안되는 다른 사람들이 실수하여 다른 사람이 잘못 사용하는 표면적을 줄입니다.

또 다른 방법

이 두 번째 예에서는 this 키워드가 추가되는 것을 알 수 있습니다. ES6 화살표 함수 (=>)와 기존 함수 () {} 사이에는 차이가 있습니다. function 키워드를 사용하면 기능 자체에 바인딩하는 this 기능을 사용할 수 있으며 화살표 기능은 this 키워드의 모든 유형을 사용할 수 없습니다. 둘 다 모듈을 만드는 효과적인 방법입니다. 핵심 아이디어는 액세스해야 할 부품을 공개하고 상호 작용하지 않아야 할 다른 부품을 유지하는 것이므로 공개 및 개인 데이터가 모두 있습니다.

 함수 carModule () {
  MilesDriven = 0을하자;
  속도 = 0을하자;

  //이 경우 대신 "이"키워드를 사용합니다.
  // CarModule을 나타냅니다
  this.accelerate = (금액) => {
    속도 = 양;
    마일드 드라이브 = 속도;
  }

  this.getMilesDriven = () => MilesDriven;
}

const testcarmodule = 새 carmodule ();
testCarmoDule.Accelerate (5);
testCarmoDule.Accelerate (4);
console.log (testCarmoDule.getMilesDriven ());

ES6 클래스

클래스는 ES6의 또 다른 새로운 기능입니다. 클래스는 본질적으로 구문 설탕입니다. 즉, 여전히 기능이지만 더 쉽게 표현 된 형태로 "아름답게"할 수 있습니다. 클래스의 경우 코드에 대한 주요 변경 사항이 없으면 가변적 인 사생활 (현재)은 거의 불가능합니다.

수업의 예를 살펴 보겠습니다.

 클래스 CarModule {
  /*
    마일드 드라이브 = 0;
    속도 = 0;
  */
  생성자 () {
    this.milesdriven = 0;
    이 .speed = 0;
  }
  가속 (금액) {
    이 .speed = 금액;
    this.milesdriven = this.speed;
  }
  getMilesDriven () {
    이것을 반환하십시오.
  }
}

const testcarmodule = 새 carmodule ();
testCarmoDule.Accelerate (5);
testCarmoDule.Accelerate (4);
console.log (testCarmoDule.getMilesDriven ());

가장 먼저 주목해야 할 것은 milesDriven 및 speed 변수가 constructor() 함수에 있다는 것입니다. 코드 주석에 표시된 것처럼 생성자 외부의 변수를 정의 할 수도 있지만 어쨌든 기능적으로 동일합니다. 문제는 이러한 변수가 공개되며 클래스 외부의 요소로 액세스 할 수 있다는 것입니다.

이 문제에 대한 몇 가지 해결책을 살펴 보겠습니다.

밑줄을 사용하십시오

사립이 공동 작업자가 밑줄 (_)을 가변 접두사로 사용하는 치명적인 실수를 막지 못하도록하는 상황에서는 여전히 외부에 "볼 수있는"이지만 개발자에게 "이 변수를 터치하지 마십시오"라는 신호를 보내기에 충분합니다. 예를 들어, 이제 다음과 같은 것이 있습니다.

 // 이것은 클래스의 새로운 생성자입니다. 생성자 () 외부의 다음 내용으로 표시 될 수도 있습니다.
/*
  _milesdriven = 0;
  _speed = 0;
*/
생성자 () {
  this._milesdriven = 0;
  this._speed = 0;
}

이것은 특정 사용 사례에 효과적이지만, 여러 가지면에서 이상적이지 않다고 말하는 것이 여전히 안전합니다. 여전히 변수 에 액세스 할 수 있지만 변수 이름도 수정해야합니다.

생성자에 모든 것을 넣으십시오

기술적으로, 클래스에서 개인 변수를 사용하는 방법이 있습니다. 이는 모든 변수와 메소드를 constructor() 함수에 넣는 것입니다. 봅시다.

 클래스 CarModule {
  생성자 () {
    MilesDriven = 0을하자;
    속도 = 0을하자;

    this.accelerate = (금액) => {
      속도 = 양;
      마일드 드라이브 = 속도;
    }

    this.getMilesDriven = () => MilesDriven;
  }
}

const testcarmodule = 새 carmodule ();
testCarmoDule.Accelerate (5);
testCarmoDule.Accelerate (4);
console.log (testCarmoDule.getMilesDriven ());
Console.log (TestCarmoDule.Speed); // 정의되지 않은 - 이제 실제 가변 개인 정보가 있습니다.

이 접근법은 의도적으로 공개되지 않은 변수에 직접 액세스 할 수 없기 때문에 진정한 가변 개인 정보를 구현합니다. 문제는 우리가 지금 우리와 비교할 때 좋은 코드를 보지 못하고 있으며 클래스를 사용할 때 구문 설탕의 이점을 깨뜨린다는 것입니다. 이 시점에서는 function() 메소드를 사용할 수도 있습니다.

약점 사용

또한 WeakMap() 사용하는 개인 변수를 만드는보다 창의적인 방법이 있습니다. Map 와 비슷하게 들릴 수 있지만 두 사람은 매우 다릅니다. 매핑은 모든 유형의 값을 키로 가져갈 수 있지만, WeakMap 쓰레기가 객체 키를 수집 할 때 객체를 받아들이고 WeakMap 에서 값을 삭제합니다. 또한 WeakMap 반복 할 수 없으므로 값에 액세스하려면 객체 키에 대한 참조에 액세스해야합니다. 변수는 실제로 보이지 않기 때문에 개인 변수를 만드는 데 매우 유용합니다.

 클래스 CarModule {
  생성자 () {
    this.data = 새로운 약점 ();
    this.data.set (this, {
      Milesdriven : 0,
      속도 : 0
    });
    this.getMilesDriven = () => this.data.get (this) .milesdriven;
  }

  가속 (금액) {
    //이 버전에서는 약점을 생성하고 // "이"키워드를 키로 사용합니다.
    const data = this.data.get (this);
    const speed = data.speed 금액;
    const milesdriven = data.milesdriven data.speed;
    this.data.set ({speed, milesdriven});
  }

}

const testcarmodule = 새 carmodule ();
testCarmoDule.Accelerate (5);
testCarmoDule.Accelerate (4);
console.log (testCarmoDule.getMilesDriven ());
Console.log (TestCarmoDule.Data); // => 약점 {[Items Unknown]} -이 데이터는 외부에서 쉽게 액세스 할 수 없습니다!

이 솔루션은 우발적으로 데이터 사용을 방지하는 데 능숙하지만, this CarModule 로 교체하여 외부에서 액세스 할 수 있기 때문에 실제로 개인은 아닙니다. 또한, 그것은 약간의 복잡성을 추가하므로 가장 우아한 솔루션이 아닙니다.

충돌을 방지하기 위해 기호를 사용하십시오

목적이 이름 충돌을 방지하는 경우 Symbol 사용하여 유용한 솔루션을 제공 할 수 있습니다. 이들은 본질적으로 고유 한 값으로 작용할 수있는 사례이며 고유 한 인스턴스를 제외하고는 다른 값과 결코 같지 않습니다. 실제 응용 프로그램의 예는 다음과 같습니다.

 클래스 CarModule {
  생성자 () {
    this.speedkey = Symbol ( "Speedkey");
    this.milesdrivenkey = Symbol ( "Milesdrivenkey");
    이 [this.speedkey] = 0;
    this [this.milesdrivenkey] = 0;
  }

  가속 (금액) {
    //이 데이터는 예기치 않게 액세스하기가 거의 불가능합니다. 그것은 결코 사적인 것이 아닙니다.
    // 그러나이 모듈을 구현할 사람과 떨어져 있습니다.
    이 [this.speedkey] = 금액;
    this [this.milesdrivenkey] = this [this.speedkey];
  }

  getMilesDriven () {
    이 [this.milesdrivenkey]를 반환하십시오.
  }
}

const testcarmodule = 새 carmodule ();
testCarmoDule.Accelerate (5);
testCarmoDule.Accelerate (4);
console.log (testCarmoDule.getMilesDriven ());
Console.log (TestCarmoDule.Speed); // => 정의되지 않은 - 변수에 액세스하려면 내부 키에 액세스해야합니다.

밑줄 솔루션과 마찬가지로,이 접근법은 혼란을 방지하기 위해 명명 규칙에 다소 의존합니다.

TC39 개인 계급 필드 제안

최근에, 개인 변수를 클래스에 도입 할 새로운 제안이 제안되었습니다. 간단합니다 : 변수 이름을 전제하고 비공개가됩니다. 추가 구조적 변화가 필요하지 않습니다.

 클래스 CarModule {
  #speed = 0
  #milesdriven = 0

  가속 (금액) {
    //이 데이터는 예기치 않게 액세스하기가 거의 불가능합니다.
    ##속도 = 양;
    #milesdriven = 속도;
  }

  getMilesDriven () {
    이것을 반환하십시오.#Milesdriven;
  }
}

const testcarmodule = 새 carmodule ();
testCarmoDule.Accelerate (5);
testCarmoDule.Accelerate (4);
console.log (testCarmoDule.getMilesDriven ());
Console.log (TestCarmoDule.Speed); // => 정의되지 않은 - 변수에 액세스하려면 내부 키에 액세스해야합니다.

개인 수업 기능은 현실이되었으며 브라우저 지원이 매우 좋습니다.

결론적으로

이것은 JavaScript에서 개인 변수를 구현하는 다양한 방법에 대한 요약입니다. "올바른"접근법은 없습니다. 이 방법은 다른 요구 사항, 기존 코드베이스 및 기타 제약 조건에 적합합니다. 각 접근 방식에는 장점과 단점이 있지만 궁극적으로 모든 접근 방식은 문제를 효과적으로 해결하는 한 똑같이 효과적입니다.

읽어 주셔서 감사합니다! 이것이 JavaScript 코드를 개선하기 위해 범위와 가변 개인 정보를 적용하는 방법에 대한 통찰력을 제공하기를 바랍니다. 이것은 다양한 방법을 지원하고 코드를보다 쉽게 ​​사용하고 오류가 없도록하는 강력한 기술입니다. 더 나은 느낌을 얻으려면 몇 가지 새로운 예를 스스로 시도하십시오.

위 내용은 JavaScript에서 개인 변수 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!