- 기본자료형도 속성을 가지고 있다.
- 기본자료형에 메소드를 입력하면 일시적으로 객체로 변환됨.
- 라인이 끝나는 순간 객체에서 기본자료형으로 복귀
var primitiveNum = 273;
var objectNum = new Number(273);
document.write(typeof(primitiveNum)); //number 타입
document.write(typeof(objectNum)); // object 타입
기본자료형의 메서드 –> 일회용 옷의 개념
한번 사용하고 버린다
primitiveNum.a =10;
// primitiveNum.a에 10 할당
// 라인이 끝나는 순간 다시 기본자료형으로 복귀
document.write(primitiveNum.a);
// 윗 라인에서 선언된 primitiveNum과 관계없이 undefined 출력
메서드를 추가하여 기본자료형의 일회용 메서드로서 활용 가능
Number.prototype.power = function (){
return this *this;
}
document.write(primitiveNum.power()); // 273*273 = 74529
1. 기본 자료형(숫자,Bool,문자열) - 값 복사
- 값 복사(깊은 복사) : 할당된 데이터 값을 복사
- 기본 자료형은 가볍기 때문에 실질적인 데이터 값을 복사
- clone
var originalValue = 10;
var newValue = originalValue; // newValue = 10
originalValue=273; //originalValue 값 변경
document.write(originalValue); // originalValue = 273
document.write(newValue); // newValue = 10
2. 특수자료형 (객체,배열, …) - 참조 복사
- 참조복사 : 자료형에 할당된 주소값(참조)을 복사
- 배열 내부에 있는
메모리 주소가 복사됨`
- 복사된 배열의 값이 동일하게 변경됨
var originalArray = [1,2,3,4]; //주소값 : 0x10
var newArray = originalArray; //주소값 : 0x10
originalArray[0] = 273; // 원본 배열의 0번째 값 변경
document.write(originalArray);
// originalArray = [273,2,3,4]
document.write(newArray);
// newArray = [273,2,3,4]
3. 배열을 값복사로 사용하고 싶을 때
- 새로운 배열을 생성하여 원본 배열의 데이터 값을 복사
- 주소값이 다르기 때문에 영향을 받지 않음.
var orgArr=[1,2,3,4];
var newArr=[]; //새로운 배열 생성
for(var i=0; i<orgArr.length; i++){
newArr[i] = orgArr[i];
} //배열의 값 복사
orgArr[0] = 223; // 원본 배열의 0번째 값 변경
document.write(orgArr); //orgArr = [223,2,3,4]
document.write(newArr); //newArr = [1,2,3,4]
See the Pen Javascript : 값복사와 참조복사 by Cathy Go Eun Woo (@cathy-go-eun-woo) on CodePen.
- 자바스크립트에 내장되어있는 모든 기본 객체들의 부모
- Object 객체가 가지고 있는 기능들을 모든 객체(Number 객체 … )들이 상속을 받아 활용
1. Object 객체기능
자주 사용되는 편은 아님.
constructor
hasOwnProperty
isPrototypeOf
propertyIsEnumerable
toLocaleString
toString,valueOf
2. Constructor 를 활용한 자료형 구분
- 자료형이 다른 두 데이터를 비교하고 싶을 때
- typeOf 는 데이터 타입이 다를 때 비교가 불가능
- 객체형 데이터도 숫자로 취급하여 데이터 타입을 확인하고 싶을 때,
- constructor(생성자 함수)를 활용 : 자바 스크립트 모든 객체가 가지고 있는 메서드
- constructor : 자기 자신을 생성할 때 사용하는 함수
function isNumber(value){
return value.constructor === Number;
//매개변수의 자료형이 숫자인지 판별
}
var primitiveNum=273;
var objectNum = new Number(273);
document.write(isNumber(primitiveNum)); //숫자(기본자료형) : true
document.write(isNumber(objectNum)); //숫자(객체자료형) : true
document.write(isNumber("string")); //문자열 :false
document.write(isNumber(false)); //boolean : false
See the Pen Javascript : Object 객체 by Cathy Go Eun Woo (@cathy-go-eun-woo) on CodePen.
- call() :
모든 함수가 내장하고 있는 메서드
- call 을 사용하여 다른 객체에 속한 함수를 사용할 수 있음.
- 첫번쨰 매개변수 :
this (메서드를 사용할 객체 지정)
- 두번째 이하 매개변수 :
호출하는 함수로 전달
var person1 = {
성 : "우",
이름 : "고은",
평균 : function(국어, 영어, 수학) {
var avg = ((국어 + 영어 + 수학) / 3).toFixed(2);
return this.성 + " " + this.이름 + "의 평균점수는 " + avg + "입니다.";
}
};
var person2 = {
성 : "김",
이름 : "이박"
};
person2 에서 person1 의 메서드를 가져와 사용
this는 person2로 지정
document.write(person1.평균(80,80,90));
document.write(person1.평균.call(person2,80,90,85));
See the Pen Javascript : Call () by Cathy Go Eun Woo (@cathy-go-eun-woo) on CodePen.
- 캡슐화 : 정보 은닉하기
- 객체의 자료와 행위를 하나로 묶고, 실제 구현내용을 외부에 감춘다.
- 캡슐화 규칙 : 속성명을 밑줄로 시작하는 것
캡슐화 방법 1. 밑줄(_)로 시작하는 변수는 ‘절대 건드리지 말자’라는 약속!
- 한계점 : 개발자들의 언어 규칙일 뿐, 실제 자바스크립트 내에서 제한 할 수는 없음.
1.1 Rectangle 생성자 함수 선언
function Rectangle(width, height){
this._width = width; // width 변수는 건드리지 말자.
this._height = height; // height 변수도 건드리지 말자.
}
1.2 메서드(프로토타입) 선언
Rectangle.prototype.getArea = function (){
return this._width * this._height;
}
1.3 인스턴스 생성 및 출력
var rectangle = new Rectangle(5,7);
document.write('Area : ' + rectangle.getArea() ); // Area : 35
See the Pen Javascript 캡슐화 1 : 밑줄로 시작하는 속성명 by Cathy Go Eun Woo (@cathy-go-eun-woo) on CodePen.
캡슐화 방법 2. 클로저를 활용하여 외부에서 변수에 접근할 수 없도록 하자.
- Getter / Setter 이용하여 캡슐화하기
- 내부에 코드를 작성하여 원래 변수를 보호하는 목적
- 자기 자신도 직접 접근이 불가능하기 때문에 getter 를 이용하여 접근
- 한계점 : 생성자 함수 안에 Getter/Setter 함수를 선언하므로 약간의 메모리 낭비가 발생
- 하지만, 완벽한 캡슐화가 가능하다.
2.1 Rectangle 생성자 함수 선언
생성자 함수 안에 Getter/Setter 선언
function Rectangle (width, height) {
var _width = width;
var _height = height;
// 2.1.1 Getter
this.getWidth = function () { return _width; }
this.getHeight = function () { return _height; }
// 2.1.2 Setter : 0보다 작은 수를 입력하면 값 세팅 불가 !
this.setWidth = function (value) {
if(value<=0){ return alert("0보다 작은 값은 넣을 수 없습니다."); }
_width=value;
}
this.setHeight = function (value) {
if(value<=0){ return alert("0보다 작은 값은 넣을 수 없습니다."); }
_height=value;
}
}
2.2 메서드(프로토타입) 선언
자기 자신도 직접 접근이 불가능 –> getter 를 이용하여 접근
Rectangle.prototype.getArea = function (){
return this.getWidth() * this.getHeight();
}
2.3 인스턴스 생성 및 출력
var rectangle = new Rectangle(5,7);
rectangle.setHeight(10); // 값 변경하기
document.write('Area : ' + rectangle.getArea() ); // Area : 50
See the Pen Javascript 캡슐화 2 : 클로저 사용 by Cathy Go Eun Woo (@cathy-go-eun-woo) on CodePen.
캡슐화 방법 3. 혼합하기.
- (방법1) + (방법2) 혼합하여 사용
- 기존의 클로저 방식의 메모리 낭비 문제를 해결하기 위한 타협점
- 프로토 타입으로 캡슐화하기
3.1 Rectangle 생성자 함수 선언
function Rectangle (width, height) {
this._width = width;
this._height = height;
}
3.2 Getter/Setter 를 프로토타입으로서 선언
리턴 타입을 this.속성명 형태로 변환
Rectangle.prototype.getArea = function (){
return this._width * this._height;
}
Rectangle.prototype.getWidth = function () {
return this._width;
}
Rectangle.prototype.getHeight = function () {
return this._height;
}
Rectangle.prototype.setWidth = function (value) {
if(value<=0) { return alert("0보다 작은 값은 넣을 수 없습니다."); }
this._width = value;
}
Rectangle.prototype.setHeight = function (value) {
if(value<=0) { return alert("0보다 작은 값은 넣을 수 없습니다."); }
this._height = value;
}
2.3 인스턴스 생성 및 출력
var rectangle = new Rectangle(5,7);
rectangle.setHeight(20); // 값 변경하기
document.write('Area : ' + rectangle.getArea() ); // Area : 100
See the Pen Javascript 캡슐화 3 : 혼합 by Cathy Go Eun Woo (@cathy-go-eun-woo) on CodePen.