>  기사  >  웹 프론트엔드  >  JavaScript 캡슐화 이해

JavaScript 캡슐화 이해

PHPz
PHPz원래의
2016-05-16 15:14:131503검색

캡슐화는 객체의 내부 데이터 표현과 구현 세부 사항을 숨기는 것으로 정의할 수 있습니다. 캡슐화를 통해 정보 은닉을 시행할 수 있습니다.

JavaScript에는 비공개 멤버를 선언하기 위한 명시적인 키워드가 없습니다. 따라서 캡슐화/정보 은닉을 달성하려면 다른 아이디어에서 시작해야 합니다. 캡슐화 요구 사항을 충족하기 위해 클로저 개념을 사용하여 개체 내에서만 액세스할 수 있는 메서드와 속성을 만들 수 있습니다.

기본 방법

일반적으로 캡슐화의 목적을 달성하기 위해 세 가지 방법을 사용하는 방법을 배웁니다.

this.XXX를 사용하여 변수를 선언한 다음 getXXX, setXXX 및 기타 값 획득 및 할당 방법을 선언합니다.
이 ._XXX를 사용하여 변수를 선언한 다음 getXXX, setXXX 및 기타 값 획득 및 할당 방법을 선언합니다.
이를 수행하려면 '함수 범위' 개념을 사용하세요.

1. 포털 열기

var Book = function(isbn,title,author){
 this.setIsbn(isbn);
 this.setTitle(title);
 this.setAuthor(author);
};

Book.prototype = {
 setIsbn: function(isbn){
  this.isbn = isbn;
 },
 getIsbn: function(){
  return this.isbn;
 },
 setTitle: function(title){
  this.title = title;
 },
 getTitle: function(){
  return this.title;
 },
 setAuthor: function(author){
  this.author = author;
 },
 getAuthor: function(){
  return this.author;
 }
};

이 방법을 사용하여 캡슐화를 수행합니다. 평가자와 할당자는 사유 재산을 보호하기 위해 구현됩니다. 그러나 실제 사용 시에는 여전히 외부에서 프라이빗 속성에 접근할 수 있으므로 기본적으로 캡슐화는 구현되지 않습니다.

2. 명명 규칙을 사용하여 구별합니다.

var Book = function(isbn,title,author){
 this.setIsbn(isbn);
 this.setTitle(title);
 this.setAuthor(author);
};

Book.prototype = {
 setIsbn: function(isbn){
  this._isbn = isbn;
 },
 getIsbn: function(){
  return this._isbn;
 },
 setTitle: function(title){
  this._title = title;
 },
 getTitle: function(){
  return this._title;
 },
 setAuthor: function(author){
  this._author = author;
 },
 getAuthor: function(){
  return this._author;
 }
};

이 방법을 첫 번째 유사 항목과 함께 사용합니다. 단, 사유 재산의 사용을 보호하기 위해 다른 이름을 사용하는 경우는 제외됩니다. 그러나 실제 애플리케이션 관점에서 볼 때 여전히 캡슐화를 구현하지 않습니다.

3. 함수 범위 사용

var Book = function(newIsbn,newTitle,newAuthor){
 var isbn,title,author;

 this.setIsbn=function(newIsbn){
  isbn = newIsbn;
 };
 this.getIsbn=function(){
  return isbn;
 };
 this.setTitle=function(newTitle){
  title = newTitle;
 };
 this.getTitle=function(){
  return title;
 };
 this.setIsbn=function(newAuthor){
  author = newAuthor;
 };
 this.getIsbn=function(){
  return author;
 };
}

은 JavaScript 함수에 선언됩니다. , 따라서 이 방법을 사용하면 외부에서 개인 속성에 직접 액세스하는 것을 피할 수 있습니다. 기본적으로 포장에 필요한 내용을 달성합니다.

여기서 주목해야 할 점은 this.XXX와 var를 사용하여 함수 내에서 변수를 선언할 수 있다는 것입니다. 차이점은 this.XXX를 사용하여 선언된 변수는 외부에서 액세스할 수 있다는 것입니다. var를 사용하여 선언된 변수는 함수 범위에 의해 보호되며 함수 외부에서 직접 액세스할 수 없습니다.

4. 함수 범위 변환을 사용합니다.

var Book = (function(){
 // ...其他静态方法

 return function(newIsbn,newTitle,newAuthor){
  var isbn,title,author;

  this.setIsbn=function(newIsbn){
   isbn = newIsbn;
  };
  this.getIsbn=function(){
   return isbn;
  };
  this.setTitle=function(newTitle){
   title = newTitle;
  };
  this.getTitle=function(){
   return title;
  };
  this.setIsbn=function(newAuthor){
   author = newAuthor;
  };
  this.getIsbn=function(){
   return author;
  };
 };
})();

이 메서드는 다음을 직접 반환합니다. 생성자. 그리고 여기 생성자는 인라인 함수입니다.

이 방법의 장점은 "메모리에 복사본이 하나만 존재한다는 것입니다. 다른 정적 메서드는 생성자 외부에서 선언되므로 특권 메서드가 아닙니다."

메서드를 판단합니다. 정적 메서드로 설계해야 하는지 여부에 대한 원칙은 "이 메서드가 프라이빗 속성에 액세스하는지 여부"입니다. 필요하지 않은 경우 복사본이 하나만 생성되므로 정적 메서드로 설계하는 것이 더 효율적입니다.

상수
"Getter만 있고 할당자 없음" 접근 방식을 사용하여 상수를 구현할 수 있습니다.

// 1.
var Book = function(){
 var constants = ["key1": "1","key2": "2","key3": "3"];

 this.getConstant = function(key){
  return constants[key];
 };
};

Book.getConstant("key1");

// 2.
var Book = (function(){
 var constants = ["key1": "1","key2": "2","key3": "3"];

 var con = function(){};
 con.getConstant = function(name){
  return constants[name];
 };

 return con;
})();

Book.getConstant("key1");

장단점

1. >

캡슐화는 내부 데이터의 무결성을 보호합니다.

캡슐화를 사용하면 객체를 더 쉽게 재구성할 수 있습니다.
모듈 간의 결합을 약화시키고 객체의 재사용성을 향상시킵니다.

...

2. 단점

개인 메서드는 테스트하기 어렵습니다.

범위 체인으로 인해 오류 예약이 더 어려워집니다.
과도한 캡슐화가 발생하기 쉽습니다.
JavaScript는 기본적으로 캡슐화를 지원하지 않으므로 JavaScript에서 캡슐화를 구현하는 데 복잡한 문제가 있습니다. 이 기사의 전체 내용이 모든 사람의 연구에 도움이 되기를 바랍니다.

【관련 추천 튜토리얼】

1.

JavaScript 동영상 튜토리얼

2. JavaScript 온라인 매뉴얼3. 부트스트랩 튜토리얼

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.