instanceof는 과거 java에서 다형성에서 객체의 관계를 구분할 때 사용 했는데
JS역시 같은 방식으로 사용한다.
그리고 new를 통해서 객체를 생성했을 때와 { }괄호를 사용 했을 때는 차이가 있는데
new를 사용하면 클래스를 지역변수로 생성하고
{ }괄호를 사용하면 window에 전역변수로 생성된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.area{
height: 100px;
background: lightgray;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>객체 관련 키워드</h1>
<h3>instanceof 키워드</h3>
<p>해당 객체가 어떠한 생성자 함수를 통해 생성되었는지 확인할 때 쓴다.</p>
<button onclick="test1();">실행 확인</button>
<div id="area1" class="area"></div>
<script type="text/javascript">
function Dog(name) {
this.name = name;
}
function test1() {
var myDog = new Dog('까미');
var yourDog = {name:'까미'};
var area1 = document.getElementById("area1");
area1.innerHTML += "myDog instanceof Dog : " + (myDog instanceof Dog) + "<br>";
area1.innerHTML += "yourDog instanceof Dog : " + (yourDog instanceof Dog) + "<br>";
}
</script>
<hr>
<h3>new 키워드</h3>
<button onclick="test2();">new 확인하기</button>
<div id="area2" class="area"></div>
<script type="text/javascript">
function Duck(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
function test2() {
var duck1 = new Duck("Mc", "Donald");
console.log(duck1);
var area2 = document.getElementById("area2");
area2.innerHTML += "첫 번째 오리의 full Name은 " + duck1.firstName + duck1.lastName + "입니다. 꽥꽥! <br>";
var duck2 = Duck("Donald", "Dorump");
//area2.innerHTML += "두 번째 오리의 full Name은 " + duck2.firstName + duck2.lastName + "입니다. 꽥꽥! <br>";
console.log(duck2);
area2.innerHTML += "두 번째 오리의 full Name은 " + window.firstName + this.lastName + "입니다. 꽥꽥! <br>";
// 두번째 오리의 주석처리된 출력문을 왜 못찾냐 하면
// new를 붙여 생성하지 않고 생성자를 통해 생성하면 전역변수로 생성된다.
// new로 호출하면 Duck의 this는 클래스 내부를 의미하고
// 호출하지 않으면 window를 가리키는 this가 된다.
}
</script>
</body>
</html>
'HTML, CSS, JavaScript, jQuery > 04.Java Script' 카테고리의 다른 글
| [JS]04-017.JS의 지오 로케이션(위치 정보, getCurrentPosition()) (0) | 2018.11.15 |
|---|---|
| [JS]04-016.JS의 캡슐화 및 상속 (0) | 2018.11.15 |
| [JS]04-014.JS의 객체 배열과 생성자 함수 (0) | 2018.11.14 |
| [JS]04-013.JS의 객체 사용 방법 (0) | 2018.11.13 |
| [JS]04-012.JS의 내장 함수(escape, encodeURI, encodeURIComponent, unescape, decodeURI, decodeURIComponent, eval, Infinity, NaN, Number, parse, parseInt, parseFloat) (0) | 2018.11.13 |