20211011 함수확장
- 내장객체, 브라우저 객체 모델(BOM), 문서 객체 모델(DOM)로 크게 나눌 수 있다.
- 내장객체 : 문자, 날짜, 배열, 수학 객체 등이 있으며 주로 new 연산자가 붙는다.
- 브라우저 객체 모델 : window, screen, location, history, navigator
(이미 정해진 메서드나 속성을 갔다 쓸 경우)
- 문서 객체 모델 : html구조가 저장된 객체이며, window 객체의 하위에 있다.
각 문서 구조를 컨트롤 및 이벤트를 처리 할 때 쓰이며, css의 값도 변경이 가능하다
- 단어 한글자는 기본형, 문자열은 객체
boolean - 리턴타입
object - 클래스를 표시. object를 상속을 받아서 객체화 되었다.
/////////////java의 string 은 기본타입이 아니고 참조타입이다.
object는 최상위 클래스. 모든 클래스가 객체화 될 때 object 관련된 내용을 가지고 있다.
nullExecption :
객체가 할당이 안되어 있을 때 발생하는 에러.
객체화가 되어 있어야 해당 멤버를 호출할 수 있다.
String str = null;
User user = null;
if(str.equals("홍길동")) {
System.out.println("홍길동입니다.");
}
문자열을 생성할 경우 String 객체가 생성된 것이므로 해당 멤버를 호출 할 수 있다.
if("홍길동".equals(str)) {
}
변수 대 변수로 비교 할 경우 둘다 null일 경우가 올 수 있다.
이러한 경우 조건으로 null이 아닐 경우라는 조건으로 비교하여 처리한다.
String str3 = null;
String str4 = null;
if(str3 !=null && str3.equals(str4)) {
}객체 생성자 함수 확장
| 확장 - prototype : 원형함수를 확장시킨다. 함수명.prototype.변수명 = 값 혹은 함수 |
- 함수 확장(상속)을 할 수 있다.
- 확장은 함수 원형에 할 수 있다.
- 확장에 관련된 키워드는 prototype 이다.
function UserInfo(){
var userName;
this.getUserName = function(){
return userName;
}
}- new 연산자를 활용하여 객체화 할 경우
this 키워드가 붙은 멤버들을 외부에서 접근할 수 있는 멤버로 객체화 해준다.
해당 멤버 접근은 원형을 참고하여 접근을 한다.
var userInfo1 = new UserInfo();
console.log(userInfo1, "userInfo1");
즉 객체생성자함수 확장은 원형에 해야하며, prototype 키워드로 가능하다.
값에 자료 구조가 들어갈 경우 속성.
값에 함수가 들어갈 경우는 메서드.
var userInfo2 = new UserInfo();
console.log(userInfo2, "userInfo2");
UserInfo.prototype.userAge = 20; //속성(멤버, 프로퍼티) 확장
UserInfo.prototype.getUserAge = function(){ // 메서드 확장
}
console.log(userInfo2);
선언된 함수 내부에 this키워드로 된 대상들은 멤버로 만들어 객체화가 된다.
즉, 여러번 객체화 할 경우 this 키워드에 관련된 대상들은 객체화 할 때마다 멤버로 만들어 객체화 하여 메모리에 영향을 준다.
prototype 확장하여 속성이나 메서드 생성할 경우, 생성될 객체나 생성된 객체의 멤버에는 추가되지 않고
prototype 으로 추가된 속성이나 메서드에 접근이 가능하게 된다.
즉 prototype 확장 시킬 경우 메모리의 낭비를 방지하게된다.
* 객체화 될 대상 혹은 객체화 된 대상은 prototype으로 확장된 속성이나 메서드를 상속받아 쓰이게 된다.
확장에 관련된 메모리 확인하기
1.
function Member(){
this.getMemberName = function(){
console.log('메서드호출');
}
} 위의 원형에 this 키워드로 메서드를 선언해놨다.
객체화시 객체화된 대상에 해당 메서드의 정보가 있다.
( 멤버 정보를 가지고 있는 상태로 객체화된다.)
var n1 = new Member();
var n2 = new Member();
var n3 = new Member(); console.log(n1, '객체화 1');
console.log(n2, '객체화 2');
console.log(n3, '객체화 3');
n1.getMemberName();
n2.getMemberName();
n3.getMemberName();
<- 결과
2.
function Member2(){
}
var n1 = new Member2();
var n2 = new Member2();
var n3 = new Member2();
Member2.prototype.getMemberName = function(){
console.log('prototype 으로 메서드 추가');
}
객체화시 빈 객체가 만들어졌다.
prototype 으로 메서드 확장 후 해당 메서드 호출 하였더니 호출이 가능해졌다.
즉, 원형에 확장할 경우 객체화된 대상에는 추가가 안되고
원형에 추가되어도 객체화된 대상물은 원형에서 확장된 메서드에 접근할 수 있는 것을 확인 할 수 있다.
주로 메서드는 원형에 확장시켜 사용된다.
주로 원형에는 자료구조와 자료구조를 다룰 메서드 이외의 기능은 확장(상속)을 하여 쓰인다.
console.log(n1, '객체화 1');
console.log(n2, '객체화 2');
console.log(n3, '객체화 3');
n1.getMemberName();
n2.getMemberName();
n3.getMemberName();
<- 결과
원형에서 확장된 prototype에 접근한 것을 확인
1. prototype 으로 확장된 대상에서 원형의 메서드나 속성에 접근 확인해보기
확장된 대상은 var 나 let키워드로 선언된 변수에 접근 할 수 없으므로
this키워드로 메서드를 생성하여 접근 할 수 있도록 만들어준다.
function User(){
var userName = '홍길동';
this.userAge = 0;
this.getUserName = function(){
return userName;
}
}
확장된 대상에서 원형 접근 확인하면,
원형에 var나 let으로 선언된 변수는 지역 변수이므로 확장된 대상에서 접근 할수 없다.
User.prototype.print = function(){
/* console.log(userName); //<- 접근 불가능*/
console.log(this.userAge); //0
console.log(this.getUserName()); //홍길동
}
var user = new User();
user.print();정보은닉이 필요한 생성자함수가 있다면
정보은닉의 정보를 가지고 오거나 변경할 수 있는 메서드는 원형에 들어가 있어야 한다.
2. 브라우저 String 내장객체를 확장하는 예제
- String replaceAll(변환하고자 하는 문자열, 변환할 문자값)
- replaceAll() 함수는 대상 문자열을 원하는 문자값으로 변환하는 함수이다.
String.prototype.trimAll = function(){
//this는 문자열 자신
//문자열을 다루는 개체 메서드 즉 자원을 담당하는
//replaceAll, replace 가 있다.
return this.replaceAll(' ', '');
}
var str = ' 한 국 스 마 트 정 보 교육원';
console.log(str.trimAll());결과 : 한국스마트정보교육원