자바스크립트 객체지향(2) 캡슐화 code_js 객체지향

간단한 예를 작성해 보세요.

1단계: "휴대폰 수업" 만들기

코드 복사 코드

var MobilePhone = (function(){
　　…………
})()

2단계: 이 클래스를 고려하면 해당 클래스의 개인 속성이 필요합니다. 여기서 정의하고 싶은 것은 인스턴스 외부의 휴대폰 수입니다.

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

var MobilePhone = (function(){
//Private attribute
var count = 0; //휴대전화 개수를 나타냅니다. mobilephone
})()

3단계: 속성 및 메소드 초기화 등 인스턴스를 인스턴스화할 때 생성된 새 객체를 초기화하는 생성자를 만듭니다. ; 이 예에서 각 휴대폰에는 색상, 크기, 가격 속성이 있습니다. 여기서 생성자는 클로저이므로 count에 액세스할 수 있으며 count 값은 오랫동안 메모리에 저장됩니다. 참조가 존재합니다)

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

var MobilePhone = (function(){
//Private 속성
var count = 0; //휴대폰 수를 나타냅니다.
　
//생성자 함수
var creatphone = function(color,size, 가격){
this._size = size; //휴대폰 크기
this._price = 가격; //휴대폰 가격
this.index = //개수; 휴대폰 아이콘이 생성된 인덱스
, 크기, 크기, 색상, 가격도 표시할 수 있습니다.
여기서 공통 메서드는 "프로토타입 개체"에 배치되어야 합니다.
1. 이 생성자에 의해 인스턴스화된 모든 개체, 즉 생성된 휴대폰은 "프로토타입 개체"의 메서드를 사용할 수 있습니다.
2. 생성자에 배치하면 휴대폰 개체가 인스턴스화될 때마다 여러 개의 반복 메서드가 생성되어 메모리를 차지합니다.
3. "constructor":creatphone 설명:

creatphone.prototype ={...}이 이전 프로토타입 객체에 대한 참조를 덮어쓰기 때문입니다. 프로토타입 객체를 생성자와 연결하기 위해 "constructor":creatphone 속성이 설정됩니다.




코드 복사


코드는 다음과 같습니다.

var MobilePhone = (function(){ //Private 속성var count = 0;//휴대폰 개수를 나타냅니다　//Constructor　 var creatphone = function(color,size,price){

count ;

count ; this._color = color; //휴대폰 색상
= 가격; of the mobilephone
　　　this.index = count; //휴대폰의 인덱스는 생성된 휴대폰 아이콘의 번호입니다
　　　}
//프로토타입 객체에 저장된 Public 메소드
creatphone.prototype = {
"constructor":creatphone,
//전화 색상 가져오기
"getColor" : function(){
return this._color; //휴대폰 색상 설정
"setColor" : function(color){
this._color = color;
},
　　　 //휴대폰 크기 가져오기
"getSize" : function( ){
return "width:" this._size.width " height:" this._size.height;
},
　　　　 //휴대전화 크기 설정
"setSize" : function( size){
this._size.width = size.width;
this._size.height = size.height
},
　　　　//휴대폰 가격 확인
"getPrice" : function(){
return this._price;
},
　　　 //휴대폰 가격 설정
"setPrice" : function(price){
this._price = 가격
}
}
})()


5단계: 특권 메서드, 즉 클래스의 비공개 변수에 접근할 수 있는 메서드가 있어야 합니다. 인스턴스에서 휴대폰 객체가 몇개나 나오는지




코드를 복사하세요


코드는 다음과 같습니다

var MobilePhone = (function(){
//Private 속성
var count = 0;//휴대폰 개수를 나타냅니다.
var index = 0;//인덱스를 나타냅니다. 휴대폰의
　　　//생성자 함수
　　var creatphone = function(색상, 크기, 가격){
　　　 count; /휴대폰의 크기
　　　this._price = //The 휴대폰 가격
　　　　this.index = count; //휴대폰의 인덱스는 생성된 휴대폰 아이콘의 개수
　　}　　　///퍼블릭 메소드, 프로토타입 객체
creatphone에 저장됩니다. 프로토타입 = {
"constructor":creatphone,
"getColor" : function(){
return this._color;
},
" setColor" : function(color){
this._color = color;
},
"getSize" : function(){
return "width:" this._size.width " height:" this._size.height; ,
"setSize": 함수(크기){
this._size.width = size.width;
this._size.height = size.height; : function(){
return this._price;
},
"setPrice" : function(price){
this._price = 가격
}
}
/ /특권 메소드
creatphone.get_count_index = function(){
반환 횟수
}
반환 creatphone
})()


휴대폰 수업 사용 위에 캡슐화하여 테스트

코드 복사

코드는 다음과 같습니다. var anycall = new MobilePhone(); //삼성 휴대폰 객체 인스턴스var HTC = new MobilePhone(); //HTC 휴대폰 객체 인스턴스var Iphone4s = new MobilePhone() //Apple 휴대폰 4S 모바일 인스턴스 Phone 객체

console.log("Samsung is:" anycall.index "station"); //FF의 콘솔은 생성된 Samsung 휴대폰 객체의 번호, 즉 index를 출력합니다.

console.log; ("HTC는 번호입니다:" HTC.index "station"); //FF의 콘솔은 생성된 HTC 전화 개체의 번호, 즉 인덱스를 출력합니다.
console.log("Iphone4s는 번호입니다. " Iphone4s.index "station"); //iPhone 4S 휴대폰 객체가 생성된 FF의 콘솔 출력, 즉 인덱스;
console.log("총 "MobilePhone.get_count_index() "휴대폰" ) ; //FF의 콘솔 출력에는 총 몇 개의 휴대폰이 생성되었는지 표시됩니다.
console.log(anycall.constructor === MobilePhone) //인스턴스된 개체의 원본 이미지에 있는 생성자가 여전히 가리키는지 여부; 휴대폰




결과는 다음과 같습니다. 절대적으로 정확합니다.