Object Constructor 예제1 - 단일 객체 생성
<p id="demo"></p>
<script>
// Hz객체 생성자함수
function Hz(site, host, year) {
this.siteName = site;
this.hostName = host;
this.openYear = year;
}
// hz객체생성
var hz = new Hz("홈짱닷컴", "Homzzang.com", 2012);
// hz객체출력
var txt = hz.siteName + " / " + hz.hostName + " / " + hz.openYear + "<br>" ;
document.getElementById("demo").innerHTML = txt
</script>
결과보기 : 홈짱닷컴 / Homzzang.com / 2012
※ 생성자함수명 첫글자는 대문자 사용 추천.
Object Constructor 예제2 - 동일 타입의 여러 객체 생성
<p id="demo"></p>
<script>
function Site(nameValue, hostValue, openValue) {
this.name = nameValue;
this.host = hostValue;
this.open = openValue;
}
var hz = new Site("홈짱닷컴", "Homzzang.com", 2012);
var sir = new Site("그누보드", "Sir.kr", 2001);
var hz_site = hz.name + " " + hz.host + " " + hz.open;
var sir_site = sir.name + " " + sir.host + " " + sir.open;
document.getElementById("demo").innerHTML = hz_site + " / " + sir_site;
</script>
결과보기 : 홈짱닷컴 Homzzang.com 2012 / 그누보드 Sir.kr 2001
※ new 키워드로 생성자함수 호출해 동일한 유형의 여러 객체 생성 가능.
this 키워드
1.
JS에서 this 키워드는 코드를 소유하는 객체 임.
객체에 사용될 경우, this의 값은 객체 그 자체임.
2.
생성자함수에서 this 키워드는 값을 갖지 않음. (새 객체의 대체임.)
this 키워드의 값은 새 객체가 생성될 때 새 객체 가 됨.
3.
this는 변수가 아니라, 키워드임. (즉, this의 값을 변경할 수 없음.)
객체에 속성 추가하기
<p id="demo"></p>
<script>
function Site(nameValue, hostValue, openValue) {
this.name = nameValue;
this.host = hostValue;
this.open = openValue;
}
var hz = new Site("홈짱닷컴", "Homzzang.com", 2012);
var sir = new Site("그누보드", "Sir.kr", 2001);
hz.code = "HTML CSS JS JQ PHP SQL";
var hz_site = hz.name + " " + hz.host + " " + hz.open + " " + hz.code ;
var sir_site = sir.name + " " + sir.host + " " + sir.open;
document.getElementById("demo").innerHTML = hz_site + " / " + sir_site;
</script>
결과보기 : 홈짱닷컴 Homzzang.com 2012 HTML CSS JS JQ PHP SQL / 그누보드 Sir.kr 2001
※ 특정 객체에 속성 추가 시, 다른 객체엔 영향 안 미침.
객체에 메서드 추가하기
<p id="demo"></p>
<script>
function Site(nameValue, hostValue, openValue) {
this.name = nameValue;
this.host = hostValue;
this.open = openValue;
}
var hz = new Site("홈짱닷컴", "Homzzang.com", 2012);
var sir = new Site("그누보드", "Sir.kr", 2001);
hz.intro = function () {
return this.name + " " + this.host;
};
document.getElementById("demo").innerHTML = hz.intro() ;
</script>
결과보기 : 홈짱닷컴 Homzzang.com
※ 특정 객체에 메서드 추가 시, 다른 객체엔 영향 안 미침.
생성자에 속성 추가
※ 기존 객체에 새 속성 추가하는 방식으로는 객체 생성자에 새 속성 추가 못함.
<p id="demo"></p>
<script>
function Site(nameValue, hostValue, openValue) {
this.name = nameValue;
this.host = hostValue;
this.open = openValue;
}
Site.code = "HTML CSS JS JQ PHP SQL";
var hz = new Site("홈짱닷컴", "Homzzang.com", 2012);
var sir = new Site("그누보드", "Sir.kr", 2001);
document.getElementById("demo").innerHTML = hz.code ;
</script>
결과보기 : undefined
※ 생성자에 새 속성 추가하려면 생성자 함수 안에 추가해야 함.
※ 이 방법으로, 객체 속성이 기본값 갖을 수 있음.
<p id="demo"></p>
<script>
function Site(nameValue, hostValue, openValue) {
this.name = nameValue;
this.host = hostValue;
this.open = openValue;
this.code = "HTML CSS JS JQ PHP SQL";
}
var hz = new Site("홈짱닷컴", "Homzzang.com", 2012);
var sir = new Site("그누보드", "Sir.kr", 2001);
document.getElementById("demo").innerHTML = hz.code ;
</script>
결과보기 : HTML CSS JS JQ PHP SQL
생성자에 메서드 추가
※ 생성자에 새 메서드 추가하려면 생성자 함수 안에 추가해야 함.
예제1.
<p id="demo"></p>
<script>
function Site(nameValue, hostValue, openValue) {
this.name = nameValue;
this.host = hostValue;
this.open = openValue;
this.intro = function() {
return this.name + " " + this.host
};
}
var hz = new Site("홈짱닷컴", "Homzzang.com", 2012);
var sir = new Site("그누보드", "Sir.kr", 2001);
document.getElementById("demo").innerHTML = hz.intro() ;
</script>
결과보기 : 홈짱닷컴 Homzzang.com
예제2.
<p id="demo"></p>
<script>
function Site(nameValue, hostValue, openValue) {
this.name = nameValue;
this.host = hostValue;
this.open = openValue;
this.hostChange = function (newValue) {
this.host = newValue;
}
}
var hz = new Site("홈짱닷컴","Homzzang.com",2012);
hz. hostChange ("HOMZZANG.COM");
document.getElementById("demo").innerHTML = hz.host;
</script>
결과보기 : HOMZZANG.COM
내장 JS 생성자
1.
JS에는 기본 객체에 대한 생성자가 내장되어 있음.
2.
String(), Number(), Boolean(), Array(), RegExp() 사용할 필요는 없음.
3.
Math는 전역객체 (즉, new 키워드는 Math엔 사용 불가 )라서, 아래 예제에 없음.
<p id="demo"></p>
<script>
var x1 = new Object(); // Object 객체
var x2 = new String() ; // String 객체
var x3 = new Number() ; // Number 객체
var x4 = new Boolean() ; // Boolean 객체
var x5 = new Array() ; // Array 객체
var x6 = new RegExp() ; // RegExp 객체
var x7 = new Function(); // Function 객체
var x8 = new Date(); // Date 객체
document.getElementById("demo").innerHTML =
"x1: " + typeof x1 + "<br>" + // object
"x2: " + typeof x2 + "<br>" + // object
"x3: " + typeof x3 + "<br>" + // object
"x4: " + typeof x4 + "<br>" + // object
"x5: " + typeof x5 + "<br>" + // object
"x6: " + typeof x6 + "<br>" + // object
"x7: " + typeof x7 + "<br>" + // function
"x8: " + typeof x8 + "<br>"; // object
</script>
결과보기
명심할 사항
위에서 볼 수 있듯이 JS에는 기본 데이터 유형 String, Number, Boolean 객체 버전 존재함.복잡한 객체를 만들 이유가 없음. 기초값이 훨씬 빠름 .
new Object () 대신, 객체 리터럴 {} 사용.
new String () 대신, 문자열 리터럴 "" 사용.
new Number () 대신, 숫자 리터럴 12345 사용.
new Boolean () 대신, 부울 리터럴 true / false 사용.
new Array () 대신, 배열 리터럴 [] 사용.
new RegExp () 대신, 패턴 리터럴 /()/ 사용.
new Function () 대신, 함수 표현식 () {} 사용.
<p id="demo"></p>
<script>
var x1 = {}; // object
var x2 = ""; // string
var x3 = 0; // number
var x4 = false; // boolean
var x5 = []; // object (주의: array 아님)
var x6 = /()/; // object
var x7 = function(){}; // function
document.getElementById("demo").innerHTML =
"x1: " + typeof x1 + "<br>" +
"x2: " + typeof x2 + "<br>" +
"x3: " + typeof x3 + "<br>" +
"x4: " + typeof x4 + "<br>" +
"x5: " + typeof x5 + "<br>" +
"x6: " + typeof x6 + "<br>" +
"x7: " + typeof x7 + "<br>";
</script>
결과보기
String Object (문자열 객체)
일반적으로 문자열은 기초적으로 생성. (권장)
(예) var hz = "홈짱닷컴 Homzzang.com"
new 키워드 사용해 문자열을 객체로 만들 수 있음. (비권장)
※ 문자열을 객체로 생성하지 않아야 하는 이유 보기.
Number Object (숫자 객체)
일반적으로 숫자는 기초적으로 생성. (권장)
new 키워드 사용해 숫자를 객체로 만들 수 있음. (비권장)
숫자를 객체로 생성하지 않아야 하는 이유.
Boolean Object (참거짓 객체)
일반적으로 참거짓은 기초적으로 생성. (권장)
(예) var x = false
new키워드 사용해 참거짓을 객체로 만들 수 있음. (비권장)
참거짓을 객체로 생성하지 않아야하는 이유 .
최신댓글