JavaScript에서는 추상 클래스와 인터페이스를 지원하지 않습니다. JavaScript 자체도 약한 유형의 언어입니다. JavaScript에는 유형 캡슐화와 관련하여 더 많은 작업을 수행할 수 있는 기능이 없거나 더 많은 작업을 수행할 필요가 없습니다. 자바스크립트에서 디자인 패턴을 구현하는데 있어서 타입을 구분하지 못하는 것은 수치스러운 일이기도 하고 다행스러운 일이기도 하다.
디자인 패턴의 관점에서 패키징은 더 중요한 수준에서 패키징 변화에 반영됩니다.
변경 사항을 캡슐화하여 시스템의 안정적인 부분을 변경하기 쉬운 부분과 분리합니다. 시스템이 진화하는 동안 이러한 부분이 캡슐화된 경우 변경하기 쉬운 부분만 교체하면 됩니다. 네, 비교적 교체가 쉽습니다. 이를 통해 프로그램의 안정성과 확장성을 최대한 보장할 수 있습니다.
JavaScript 캡슐화에는 세 가지 기본 모드가 있습니다.
1. 합의 우선 원칙을 사용하며, 모든 Private 변수는 _
로 시작합니다.
<script type="text/javascript">
/**
* 使用约定优先的原则，把所有的私有变量都使用_开头
*/
var Person = function (no, name, age)
{
this.setNo(no);
this.setName(name);
this.setAge(age);
}
Person.prototype = {
constructor: Person,
checkNo: function (no)
{
if (!no.constructor == "string" || no.length != 4)
throw new Error("学号必须为4位");
},
setNo: function (no)
{
this.checkNo(no);
this._no = no;
},
getNo: function ()
{
return this._no;
setName: function (name)
{
this._name = name;
},
getName: function ()
{
return this._name;
},
setAge: function (age)
{
this._age = age;
},
getAge: function ()
{
return this._age;
},
toString: function ()
{
return "no = " + this._no + " , name = " + this._name + " , age = " + this._age;
}
};
var p1 = new Person("0001", "小平果", "22");
console.log(p1.toString()); //no = 0001 , name = 小平果 , age = 22
p1.setNo("0003");
console.log(p1.toString()); //no = 0003 , name = 小平果 , age = 22
p1.no = "0004";
p1._no = "0004";
console.log(p1.toString()); //no = 0004 , name =小平果 , age = 22
</script>
코드를 읽어보니 속았다는 느낌이 드시나요? 그냥 _로 시작하는 변수들을 모두 넣어도 바로 접근이 가능하다는 게 당연하죠? 우선합니다.
이러한 밑줄 사용은 잘 알려진 명명 규칙으로, 속성이 객체 내부에서만 사용되며 속성에 액세스하거나 직접 설정하면 예상치 못한 결과가 발생할 수 있음을 나타냅니다. 이렇게 하면 프로그래머가 실수로 사용하는 것을 방지할 수 있지만 의도적으로 사용하는 것을 방지할 수는 없습니다.
이 방법은 여전히 좋습니다. 적어도 멤버 변수의 getter 및 setter 메서드는 객체가 아닌 프로토타입에 있습니다. 전반적으로 좋은 선택입니다. 이것이 불가능하고 캡슐화를 엄격하게 구현해야 한다고 생각한다면 두 번째 방법을 살펴보세요.
2. 캡슐화를 엄격하게 구현합니다
<script type="text/javascript">
/**
* 使用这种方式虽然可以严格实现封装，但是带来的问题是get和set方法都不能存储在prototype中，都是存储在对象中的
* 这样无形中就增加了开销
*/
var Person = function (no, name, age)
{
var _no , _name, _age ;
var checkNo = function (no)
{
if (!no.constructor == "string" || no.length != 4)
throw new Error("学号必须为4位");
};
this.setNo = function (no)
{
checkNo(no);
_no = no;
};
this.getNo = function ()
{
return _no;
}
this.setName = function (name)
{
_name = name;
}
this.getName = function ()
{
return _name;
}
this.setAge = function (age)
{
_age = age;
}
this.
getAge = function ()
{
return _age;
}
this.setNo(no);
this.setName(name);
this.setAge(age);
}
Person.prototype = {
constructor: Person,
toString: function ()
{
return "no = " + this.getNo() + " , name = " + this.getName() + " , age = " + this.getAge();
}
}
;
var p1 = new Person("0001", "小平果", "22");
console.log(p1.toString()); //no = 0001 , name =小平果 , age = 22
p1.setNo("0003");
console.log(p1.toString()); //no = 0003 , name = 小平果 , age = 22
p1.no = "0004";
console.log(p1.toString()); //no = 0003 , name = 小平果 , age = 22
</script>
이것이 이전에 이야기한 다른 객체 생성 모드와 어떻게 다릅니까? 위의 예에서는 객체의 속성을 생성하고 참조할 때 항상 this 키워드를 사용합니다. 이 예에서는 var를 사용하여 이러한 변수를 선언합니다. 이는 Person 생성자에만 존재한다는 것을 의미합니다. checkno 함수는 같은 방식으로 선언되므로 비공개 메서드가 됩니다.
이러한 변수와 함수에 액세스해야 하는 메서드는 Person에서만 선언하면 됩니다. 이러한 메서드는 퍼블릭이지만 프라이빗 속성과 메서드에 액세스할 수 있으므로 권한 있는 메서드라고 합니다. 객체 외부에서 이러한 권한 있는 함수에 액세스하려면 앞에 키워드 this가 붙습니다. 이러한 메서드는 Person 생성자의 범위에 정의되어 있으므로 전용 속성에 액세스할 수 있습니다. 이러한 속성은 공용이 아니기 때문에 this 키워드를 사용하지 않고 참조됩니다. 모든 getter 및 할당자 메서드는 이를 사용하지 않고 이러한 속성을 직접 참조하도록 변경되었습니다.
개인 속성에 직접 액세스할 필요가 없는 모든 메서드는 원래대로 Person.prototype에서 선언할 수 있습니다. toString() 메소드와 같습니다. 전용 멤버에 직접 액세스해야 하는 메서드만 권한 있는 메서드로 설계해야 합니다. 그러나 너무 많은 권한 있는 메서드는 너무 많은 메모리를 차지합니다. 각 개체 인스턴스에는 모든 권한 있는 메서드의 새 복사본이 포함되어 있기 때문입니다.
위 코드를 보면 this.속성 이름이 제거되고 캡슐화도 엄격하게 구현되었습니다. 그러나 멤버 변수는 getter 및 setter를 통해서만 접근할 수 있다는 문제가 있습니다. 이는 메모리 오버헤드를 증가시킵니다.
3. 클로저로 캡슐화
<script type="text/javascript">
var Person = (function ()
{
//静态方法（共享方法）
var checkNo = function (no)
{
if (!no.constructor == "string" || no.length != 4)
throw new Error("学号必须为4位");
};
//静态变量（共享变量）
var times = 0;
//return the constructor.
return function (no, name, age)
{
console.log(times++); // 0 ,1 , 2
var no , name , age; //私有变量
this.setNo = function (no) //私有方法
{
checkNo(no);
this._no = no;
};
this.getNo = function ()
{
return this._no;
}
this.setName = function (name)
{
this._name = name;
}
this.getName = function ()
{
return this._name;
}
this.setAge = function (age)
{
this._age = age;
}
this.getAge = function ()
{
return this._age;
}
this.setNo(no);
this.setName(name);
this.setAge(age);
}
})();
Person.prototype = {
constructor: Person,
toString: function ()
{
return "no = " + this._no + " , name = " + this._name + " , age = " + this._age;
}
};
var p1 = new Person("0001", "小平果", "22");
var p2 = new Person("0002", "abc", "23");
var p3 = new Person("0003", "aobama", "24");
console.log(p1.toString()); //no = 0001 , name = 小平果 , age = 22
console.log(p2.toString()); //no = 0002 , name = abc , age = 23
console.log(p3.toString()); //no = 0003 , name = aobama , age = 24
</script>
위 코드는 js 엔진이 로드된 후 Person = 즉시 실행 함수를 직접 실행한 다음 이 함수가 하위 함수를 반환하는데, 이는 new Person이 호출한 생성자이며 하위 함수가 유지 관리하기 때문입니다. 즉시 실행 함수의 checkNo(no) 및 시간에 대한 참조(명백한 클로저)이므로 checkNo 및 시간은 세 개의 객체를 생성한 후 각각 0, 1, 2입니다. 이 접근 방식의 장점은 Person에서 재사용해야 하는 메서드와 속성을 비공개로 설정하고 객체 간에 공유할 수 있다는 것입니다.
여기의 비공개 멤버와 특권 멤버는 여전히 생성자에서 선언됩니다. 그러나 생성자는 일반 함수에서 인라인 함수로 변경되었으며 이를 포함하는 함수의 반환 값으로 Person 변수에 제공됩니다. 이는 정적 전용 멤버를 선언할 수 있는 클로저를 생성합니다. 외부 함수 선언 뒤에 있는 빈 괄호 쌍은 코드가 로드되자마자 함수를 실행하는 데 매우 중요합니다. 이 함수의 반환 값은 Person 변수에 할당된 또 다른 함수이므로 Person이 생성자가 됩니다. 이 내부 함수는 Person을 인스턴스화할 때 호출됩니다. 외부 함수는 정적 멤버를 저장하는 데 사용할 수 있는 클로저를 만드는 데 사용됩니다.
이 예에서 checkno는 각 Person 인스턴스에 대해 이 메소드의 새 복사본을 생성하는 것이 의미가 없기 때문에 정적 메소드로 설계되었습니다. 정적 속성 times도 있는데, 이 속성의 기능은 Person 생성자 에 대한 총 호출 수를 추적하는 것입니다.
위 내용은 이 글의 전체 내용입니다. 캡슐화의 의미에 대해 자세히 알아보는 데 도움이 되기를 바랍니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
