JavaScript_javascript 팁의 개인/정적 속성 소개

•블록 수준 범위 시뮬레이션
자바스크립트에는 블록 수준 범위 개념이 없다는 것은 누구나 알고 있습니다. 다음 예를 참조하세요.

코드 복사 코드는 다음과 같습니다.

(function () {
for (var i = 0; i < 10 ; i ) {
//아무 작업도 하지 않음
}
alert(i); //출력 10
})()

The에 대해 액세스할 수 있음 루프 블록의 변수 i, 위 코드를 약간 수정하고 for 루프 블록을 클로저에 배치하면 상황이 달라집니다.

코드 복사 코드는 다음과 같습니다.

(function () {
(function () {
for (var i = 0; i < 10; i ) {
//아무 것도 하지 않음
}
})();
alert(i) //오류: 'i'가 정의되지 않았습니다.
})(); >
8번째 줄에서 변경된 i에 접근할 때 오류가 발생하여 우리가 원하는 블록 수준 범위를 달성했습니다.

•프라이빗 속성
자바스크립트에는 블록 수준 범위의 개념이 없고 프라이빗 속성의 개념도 없지만 프라이빗 변수가 있습니다. 일부 데이터를 캡슐화하고 숨기려면 어떻게 해야 할까요? 클로저와 개인 변수를 사용하여 객체의 개인 속성을 구현할 수 있다고 생각했을 수도 있습니다.
<1>. 인스턴스 프라이빗 속성
인스턴스 프라이빗 속성의 특징은 각 개체가 독립적인 속성을 포함하며 개체 간에 공유가 없다는 것입니다. 이 목표를 달성하기 위해 생성자에 전용 변수를 추가한 다음 다른 OO 언어의 setter 및 getter와 마찬가지로 이 전용 변수에 액세스하는 공용 메서드를 정의할 수 있습니다. 다음 예제에서는 인스턴스의 전용 속성을 구현합니다.

코드 복사 코드는 다음과 같습니다.

//인스턴스 프라이빗 변수

함수 MyObject(name) {
//개인 변수 정의
//참고: this.name은 여기서 사용되지 않습니다. this.name을 사용하면 공용 속성이 됩니다.
var privateName = name; >//개인 친숙성 정의
var privateFunction = function () {
return "Private Function";
}
//공개 메서드 액세스 개인 친숙성
MyObject.prototype.getName = function ( ) {
return privateName;
}
MyObject.prototype.getFunction = function () {
return privateFunction()
}
}
var moGyy = new MyObject( "gyy");
alert (moGyy.getName()); //gyy 출력
alert(moGyy.getFunction()) //출력 전용 함수
var moCyy = new MyObject("cyy" );
alert(moCyy.getName()); //cyy 출력
alert(moCyy.getFunction()); //두 객체의 getName 출력 위의 예시에서 생성된 moCyy는 서로 다른 값을 반환하며, 프라이빗 메소드를 호출하려면 퍼블릭 인터페이스도 필요합니다. 위의 예에서 두 개의 퍼블릭 함수가 프라이빗 변수에 접근할 수 있는 이유는 두 개의 퍼블릭 함수가 클로저이고, 클로저의 스코프 체인에 해당 함수가 포함된 변수 객체가 포함되어 있기 때문입니다. 따라서 변수를 검색할 때 A 스코프가 필요합니다. 체인을 사용하면 포함된 함수의 개인 변수에 액세스할 수 있습니다. 위의 예에서는 객체가 생성될 때마다 동일한 함수를 가진 두 개의 함수 인스턴스가 생성되는 것을 방지하기 위해 MyObject의 프로토타입에 공용 메서드가 추가되었습니다.
<2>. 정적 비공개 속성
어떤 경우에는 데이터를 전역적으로 공유하고 싶을 수도 있지만 여전히 이 속성을 비공개로 유지하려는 경우 정적 비공개 속성을 구현하는 방법이 있습니다. ? 우선, 이 private은 생성자 외부에 있어야 합니다. 생성자와 생성자 외부의 변수를 통합하려면 내부 변수에 액세스하기 위해 비공개 변수와 생성자를 모두 포함하는 클로저를 사용할 수 있습니다. 클로저 생성자 외부에서 다음 코드 예제에 표시된 대로 전역 변수를 사용하여 생성자를 참조할 수 있습니다.

코드 복사

코드는 다음과 같습니다.

//정적 프라이빗 변수 및 인스턴스 프라이빗 변수
(function () {
//프라이빗 변수 정의
var staticPrivateValue = "";
//생성자, 생성자 할당 전역 변수에 함수 짜기
MyObject = function (name) {
//인스턴스 변수 정의
this.name = name
}//두 개의 공용 메소드 정의 변수, 프로토타입에 공용 메소드를 다시 추가하세요.
MyObject.prototype.getPrivateValue = function () {
return staticPrivateValue;
}
MyObject.prototype.setPrivateValue = function (value ) {
staticPrivateValue = value;
})();
var mo = new MyObject("jeff-gyy")
mo.setPrivateValue("gyycyy"); 개인 속성
alert(mo.getPrivateValue()); //gyycyy 출력
alert(mo.name); //jeff-gyy 출력
var mo1 = new MyObject("jeff-cyy");
alert(mo1.getPrivateValue()); //gyycyy 출력
alert(mo1.name); //jeff-cyy 출력


위 코드에서 반환된 값을 참조하세요. getPrivateValue 함수를 호출할 때 by mo1은 mo가 설정한 "gyycyy" 값입니다. 이유는 무엇입니까? 먼저 익명 함수를 정의하고 해당 함수를 즉시 호출합니다. 이 함수에는 staticPrivateValue라는 개인 변수가 포함되어 있습니다. 그런 다음 MyObject에 대해 정의된 두 개의 프로토타입 메서드는 실제로 클로저의 범위 체인을 통해 포함된 함수의 개인 변수에 액세스할 수 있습니다. getPrivateValue 및 setPrivateValue 두 함수의 범위 체인에는 익명 함수의 변수 개체가 포함되어 있습니다. 범위 체인에 포함된 변수 개체는 실제로 포인터이므로 생성된 두 개체가 개인 변수를 수용하기 위해 공용 메서드를 사용합니다. , 그들은 실제로 두 가지 모두에 액세스합니다. 이는 익명 함수의 변수 개체에 있는 staticPrivateValue이므로 변수 인스턴스 간에 공유할 수 있습니다. 전통적인 OO 언어의 관점에서 우리가 구현하는 정적 속성은 실제로는 정적이 아니며 정적 속성 인스턴스의 공유만 실현합니다.

<3>. 모듈 모드와 향상된 모듈 모드
데이터를 전역적으로 공유하는 또 다른 방법은 모듈 모드를 사용하여 Object 유형의 싱글톤 모드를 구현할 수 있습니다. 다음 예와 같이 싱글톤 패턴 유형을 구현합니다.

코드 복사 코드는 다음과 같습니다.

//생성자 정의

var mo = new function () {
//개인 변수
var privateValue = ""
//일반 모듈 모드
return {
publicValue: "public ",
//비공개 변수 액세스
getPrivateValue: function () {
return privateValue
},
setPrivateValue: function (value) {
privateValue = value;
}
}
}()
mo.setPrivateValue("private value")
alert(mo.getPrivateValue()); (mo.publicFunction());


위의 예에서 익명 함수에는 반환된 객체에 비공개 변수인 public 함수가 포함되어 있습니다. 클로저의 범위 체인을 통해 포함된 함수에 액세스합니다. 정의된 익명 함수는 즉시 호출되므로 변수 mo는 반환된 객체를 참조합니다. 위의 싱글톤 패턴은 향상된 모듈 패턴을 사용하여 사용자 정의 유형의 싱글톤 패턴을 구현할 수 있습니다.

코드 복사 코드는 다음과 같습니다. //향상된 모듈 모드

//Custom 생성자

function MyObject(name) {
this.name = name; ;
//사용자 정의 생성자
var mo = new function () {
//개인 변수
var privateValue = ""
//향상된 모듈 모드
var o = new MyObject("gyycyy");
o.publicValue = "public";//개인 변수에 액세스
o.getPrivateValue = function () {
return privateValue; o.setPrivateValue = function (value) {
privateValue = value;
}
return o;
}()
mo.setPrivateValue("private value"); (mo.getPrivateValue());
alert(mo.publicFunction());


위의 코드 예제는 MyObject의 싱글톤 모드를 구현합니다.
마지막으로 언급해야 할 점은 클로저 사용에는 장단점이 있다는 것입니다. 클로저 범위 체인은 함수가 포함된 변수 객체를 참조하므로 추가 메모리를 차지하며 변수 검색도 수행해야 합니다. 스코프 체인을 통해 검색 시간이 소모되며, 폐쇄가 깊어질수록 상황은 더욱 심각해집니다. 또한 IE(이전 버전)에서는 가비지 수집 메커니즘이 참조 계산을 사용하기 때문에 다음 예와 같이 순환 참조가 발생하여 메모리 누수로 이어질 수 있습니다.




코드 복사

코드는 다음과 같습니다.

function insertHandler(){ var element = document.getElementById("someElement") element.onclick = function( ){ alert(element.id) }

;
위 코드에서 클로저는 요소의 이벤트로 생성됩니다. 클로저는 assingHandler 함수를 포함하는 변수 개체에 대한 참조이므로 요소 참조 수를 1 이상으로 만듭니다. 재활용되지 않아 메모리 누수가 발생합니다. 수정하는 방법을 생각해 볼 수 있습니다.