[모던웹]6.10~18_객체지향 프로그래밍

티스토리 뷰

HMLT&CSS&JS/study

[모던웹]6.10~18_객체지향 프로그래밍

turfrain 2014. 3. 17. 13:54

6.10 instanceof 키워드

1) 객체가 어떠한 생성자 함수를 통해 생성됬는지 확인할때 instanceof 키워드 사용.
2) typeof , instanceof
typeof => 타입을 알아냄
instanceof => 생성자함수를 알아냄

코드 6-29 instanceof 키워드

<!DOCTYPE html>
<html>
<head>
<script>
// 생성자 함수를 선언합니다.
function Student(name) { this.name = name; }
// 생성자함수를 사용해 함수를 생성하여 변수에 담음.
// 자바스크립트는 대소문자 구분합니다.
var student = new Student('윤인성'); // Student 상속받은 student 함수 객체 생성방법
// instanceof는 타입을 비교하여 (true,false)를 출력합니다.
alert(student instanceof Student); // true
alert(student instanceof Number); // false
alert(student instanceof String); // false
alert(student instanceof Boolean); // false
</script>
</head>
<body>
</body>
</html>

6.11 new 키워드
1) new키워드로 생성되지 않은 함수는 생성자 함수가 아니다. (대문자로 시작?)
2) new키워드 를 통해 함수를 호출하면 객체를 위한 공간을 만들고 this 키워드가 해당 공간을 의미하게 된다.

코드 6-30 생성자 함수에서의 속성

<!DOCTYPE html>
<html>
<head>
<script>
// 생성자 함수를 선언합니다.
function Constructor(value) {
this.value = value;
}
// 변수를 선언합니다.
var constructor = new Constructor('Hello');
// 출력합니다.
alert(constructor.value); // 출력"Hello"
// alert(value); // 찾지못함
</script>
</head>
<body>
</body>
</html>

코드 6-31 함수 에서의 속성

<!DOCTYPE html>
<html>
<head>
<script>
// 생성자 함수를 선언합니다.
function Constructor(value) {
this.value = value;
}
// 변수를 선언합니다.
var constructor = Constructor('Hello');
// 출력합니다.
alert(value); // 출력"Hello"
//alert(constructor.value); // 찾지못함
</script>
</head>
<body>
</body>
</html>

6.12 캡슐화
1) 잘못 사용될수 있는 객체의 즉정 부분을 사용자가 직접 사용할 수 없게 막는(숨기는) 기술

코드 6-33 생성자 함수 rectangle 선언

<!DOCTYPE html>
<html>
<head>
<script>
// 생성자 함수를 선언합니다.
function Rectangle(width, height) {
this.width = width;
this.height = height;
}
Rectangle.prototype.getArea = function () {
return this.width * this.height;
};
// 변수를 선언합니다.
var rectangle = new Rectangle(5, 7);
rectangle.width = -2;
// 출력합니다.
alert('AREA: ' + rectangle.getArea());
</script>
</head>
<body>
</body>
</html>

코드 6-34 캡슐화를 사용한 Rectangle 생성자 함수

<!DOCTYPE html>
<html>
<head>
<script>
// 생성자 함수를 선언합니다.
function Rectangle(w, h) {
var width = w;
var height = h;
this.getWidth = function () { return width; };
this.getHeight = function () { return height; };
this.setWidth = function (value) {
if (value < 0) {
throw '길이는 음수일 수 없습니다.';
} else {
width = value;
}
};
this.setHeight = function (value) {
if (value < 0) {
throw '길이는 음수일 수 없습니다.';
} else {
height = value;
}
};
}
Rectangle.prototype.getArea = function () {
return this.getWidth() * this.getHeight();
};
// 변수를 선언합니다.
var rectangle = new Rectangle(5, 7);
rectangle.setWidth(-2);
// 출력합니다. // 들어갈수 없는 변수는 에러
alert('AREA: ' + rectangle.getArea());
</script>
</head>
<body>
</body>
</html>

2) get OO () 형대의 메서드는 값을 가져오는 메서드이며 게터(Getter)라부른다.
set OO () 형대의 메서드는 값을 입력하는 메서드이며 세터( Setter)라부른다.

3) 함수내부는 호출될때 실행된다.
함수내의 this , var 변수 테스트

코드 6-35 게터와 세터

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>6-35_function-this_var</title>
</head>
<script type="text/javascript">
function Polygon(w, h) {
var width = w;
var height = h;
this._width = w;
this._height = h;
this.getWidth = function () { return width; };
this.getHeight = function () { return height; };
this.setWidth = function (value) {
if (value < 0) {
throw '길이는 음수일 수 없습니다.';
} else {
width = value;
}
};
this.setHeight = function (value) {
if (value < 0) {
throw '길이는 음수일 수 없습니다.';
} else {
height = value;
}
};
}
Polygon.prototype.getRectangleArea = function () {
return this.getWidth() * this.getHeight();
};
Polygon.prototype.getTriangleArea = function() {
return this._width * this._height / 2;
}
// 변수를 선언합니다.
var polygon = new Polygon(5, 7);
// 출력합니다.
polygon.setWidth(-2);
alert('rectangle AREA: ' + polygon.getRectangleArea());
polygon._width = -2;
alert('triangl AREA: ' + polygon.getTriangleArea());
</script>
<body>
</body>
</html>

6.13 상속
1) 기존의 생성자 함수나 객체를 기반으로 새로운 생성자 함수나 객체를 쉽게 만드는것.
2) 객체의 속성과 메서드를 물려 받는것. (함수내 this, var)
3) constructor 프로퍼티 ( instanceof 비교시 constructor 를 비교함 , 생성자함수 자신을 가르킴)
var d = new Date();
alert( d.constructor == Date ); //true;

코드 6-38 상속의 활용

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>상속의활용</title>
<script type="text/javascript">
window.onload = function(){
//alert("실행")
// 생성자 함수를 선언
function Rectangle(w,h){
var width = w;
var height = h;
this.getWidth = function() { return width; };
this.getHeight = function() { return height };
this.setWidth = function(value){
if(value < 0)
{
throw 'Width는 음수일 수없습니다'
}else{
width = value;
}
};
this.setHeight = function(value){
if(value < 0)
{
throw 'Height는 음수일수없습니다';
}else{
height = value;
}
};
}
// 사각형 넓이 구하기
Rectangle.prototype.getArea = function(){
return this.getWidth() * this.getHeight(); //
}
// 생성자 함수를 선언합니다.
// 사각형을 상속받아 정사각형 만듬
function Square(length){
this.base = Rectangle;
this.base(length , length);
}
Square.prototype = Rectangle.prototype; // 프로토 타입으로 속성 상속 getArea
// 변수를 선언합니다.
var rectangle = new Rectangle(5,7);
rectangle.setHeight(11); // ? 5*11=55
var square = new Square(5);
square.setWidth(50); // ? 50*50=250
//alert(square.constructor);
//alert(square instanceof Rectangle)
// 출력합니다.
alert('AREA: ' + rectangle.getArea() + ' square: '+ square.getArea() );
};
</script>
</head>
<body>
</body>
</html>

4) call(),apply() 메서드는 다른 객체의 메서드를 자신의 메서드처럼 사용할 수 있게 하는 메서드.
fn.call(obj , 1,2,3)
fn.apply(obj , [1,2,3])

6.14 ECMAScript 5 객체 속성 추가
1) defineProperty 참고 사이트:
https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperty

표 6-1 ECMAScript5의 객체 속성 추가 메서드

Object.defineProperty(obj, prop, descriptor)	객체에 속성을 추가 합니다.
Object.defineProperties(obj, props)	객체에 속성들을 추가 합니다.

표 6-2 ECMAScript 5 의 객체 속성 관련 옵션 (defineProperty)

value	객체에 속성을 추가 합니다. (get,set을 함께사용할수없음)
writeable	객체에 속성을 추가 합니다.
get	게터를 위미함 (valuer를 함께 사용할수 없음)
set	세터를 의미함(valuer를 함께 사용할수 없음)
configurable	속성의 설정을 변경할 수 있는 지를 의미함
enumerable	for in 반복문으로 검사할 수 있는지를 의미함

2) 속성은 자동으로 false , undefined가 입력됨.
3) get , set 옵션을 사용할때 value 옵션을 함께 사용할수 없음.

코드 6-43 get옵션과 set옵션

<!DOCTYPE html>
<html>
<head>
<script>
// 변수를 선언합니다.
var object = {};
var value = 'RINTIANTTA';
Object.defineProperty(object, 'name', {
get: function () {
alert('GETTER..!');
return value;
},
set: function (newValue) {
alert('SETTER: ' + newValue);
value = newValue;
}
});
// 출력합니다.
object.name = 'ALPHA'; // set
alert(object.name); // get ,이름값출력
</script>
</head>
<body>
</body>
</html>

6.15 ECMAScript 5 객체생성
1) create() 메서드는 기존에 있던 객체를 복제하고 새로운 속성을 추가해 객체를 생성.

표 6-3 ECMAScript5의 객체 생성 메서드 (create)

Object.create(proto [, propertiesObject])	객체를 생성함.
Object.keys(obj)	객체의 속성(enumerable:true) 키를 찾음.
Object.getOwnPropertyNames(obj)	객체의 속성 키를 찾음.

코드 6-46 Object.create()메서드

<!DOCTYPE html>
<html>
<head>
<script>
// 변수를 선언합니다.
var object = Object.create({}, {
name: { value: 'RintIanTta', enumerable: false },
gender: { value: 'Male', writeable:true ,enumerable: true }
});
// 출력합니다.
alert(Object.keys(object));
//alert("obj이름 : "+object.gender ;
</script>
</head>
<body>
</body>
</html>

2) 상속
  둘다 상속 받은 객체만 출력함. (p182)
  ◆ keys()
  ◆ getOwnPropertyNames()

코드 6-47 상속

<!DOCTYPE html>
<html>
<head>
<script>
// 변수를 선언합니다.
var object = Object.create({}, {
name: { value: 'RintIanTta', enumerable: false },
gender: { value: 'Male', enumerable: true }
});
var person = Object.create(object, {
region: { value: 'Seoul Korea', enumerable: false },
hobby: { value: 'Guitar', enumerable: true }
});
// 출력합니다.
alert(Object.getOwnPropertyNames(person) + '\n' + Object.keys(person));
//alert(person.name + ' : ' + person.gender);
</script>
</head>
<body>
</body>
</html>

6.16 ECMAScript 5 동적 속성 추가 제한
1) 기존 자바스크립트의 모든 객체는 동적으로 속성 또는 메서드를 추가 삭제 할수 있으며
ECMAScript 5부터는 이렇게 동적으로 속성을 추가하는 것을 제한하는 기능이 생겼다.

표 6-4 ECMAScript5 의 동적 속성 추가를 제한하는 메서드

Object.preventExtensions(obj)	객체의 속성 추가를 제한함
Object.isExtensible(obj)	객체에 속성 추가가 가능한지 확인함

코드 6-49 preventExtensions()메서드

<!DOCTYPE html>
<html>
<head>
<script>
// 변수를 선언합니다.
var object = {};
// 간단한 객체 속성 추가 방법
object.gender = 'Male';
// 복잡한 객체 속성 추가 방법
Object.defineProperty(object, 'name', {
value: 'RintIanTta',
writeable: false
});
alert(Object.isExtensible(object)); // 객체 속성 추가 가능한지 체크
Object.preventExtensions(object); // 객체 속성 추가 제한
alert(Object.isExtensible(object)); // 객체 속성 추가 가능한지 체크
// 간단한 객체 속성 추가 방법
object.dream = '생명공학자';
// 복잡한 객체 속성 추가 방법
Object.defineProperty(object, 'showMeTheMoney', {
value: true
});
</script>
</head>
<body>
</body>
</html>

2) dream 속성은 오류는없지만 추가되지않음.
3) Object.defineProperty 추가하려하면 오류.

6.17 ECMAScript 5 동적 속성 삭제 제한
1) preventExtensions 동적으로 객체속성을 생성하는것을 제한하며

표 6-5~6 ECMAScript5 의 동적 속성 삭제를 제한하는 메서드

Object.seal(obj)	객체의 속성 삭제를 제한함
Object.isSealed(obj)	객체에 속성 삭제가 가능한지 확인함 (false:삭제 가능)
Object.freeze(obj)	객체의 속성 삭제와 수정을 제한함
Object.isFrozen(obj)	객체의 속성 삭제와 수정이 가응한지 확인함

코드 6-50 Object.seal() 메서드

<!DOCTYPE html>
<html>
<head>
<script>
// 변수를 선언합니다.
var person = {
name: 'RintIanTta',
gender: 'Male',
region: 'Seoul, Korea',
hobby: 'Guitar'
};
alert("전 : " + Object.isSealed(person)); // 삭제 할수 있는지 확인
Object.seal(person); // 삭제 제한
alert("후 : " + Object.isSealed(person)); // 삭제 할수 있는지 확인
delete person.name; // 이름 객체속성 지워지지 않음
// 출력합니다.
alert(person.name);
</script>
</head>
<body>
</body>
</html>

6.18 ECMAScript 5 객체 보조 메서드

표 6-7 ECMAScript 5의 객체 보조 메서드

Object.keys(obj)	반복적으로 순환 가능한 ㄱ개체 자신 소유의 속성을 배열로 만듬
Object.getOwnPropertyNames(obj)	모든 객체 자신 소유의 속성을 배열로 만듬
Object.getOwnPropertyDescriptor(obj)	특정 속성의 옵션 객체를 추출함

1) keys , getOwnPropertyNames 차이점
◆ keys() enumerable : true 객채속성을 배열로 담음
◆ getOwnPropertyNames() 추가된 모든 객채속성을 배열에 담음

코드 6-51 keys()메서드와 getOwnPropertyNames()메서드

<!DOCTYPE html>
<html>
<head>
<script>
// 변수를 선언합니다.
var object = { name: 'RintIanTta' , id:12345 };
// 속성을 추가합니다.
Object.defineProperty(object, 'gender', {
value: 'Male'
});
// 출력합니다.
alert(Object.keys(object));
alert(Object.getOwnPropertyNames(object));
</script>
</head>
<body>
</body>
</html>

2) getOwnPropertyDescriptor() 특정 속성의 옵션 객체를 추출하는 메서드

코드 6-52 Object.getOwnPropertyDescriptor() 메서드

<!DOCTYPE html>
<html>
<head>
<script>
// 변수를 선언합니다.
var object = { name: 'RintIanTta' }; // 생성되는 속성이 true
Object.defineProperty(object, 'gender', { value: 'Male' }); // 생성되는속성이 false
// 설정 배열을 추출합니다.
var descriptors = [];
// 이름 관련 메소드 추출
descriptors.push(Object.getOwnPropertyDescriptor(object, 'name'));
// 성 관련 메소드 추출
descriptors.push(Object.getOwnPropertyDescriptor(object, 'gender'));
// 출력합니다.
var output = '';
for (var i in descriptors) {
var item = descriptors[i];
for (var key in item) {
output += key + ' : ' + item[key] + '\n';
}
output += '--------------------\n';
}
alert(output);
</script>
</head>
<body>
</body>
</html>

저작자표시 비영리

'HMLT&CSS&JS > study' 카테고리의 다른 글

퍼블리싱_초급 doc (0)	2023.02.16
[모던웹] 17.11 jQuery UI Effect 프러그인 (2) – easing 플러그인 (ease) (0)	2014.03.17
[모던웹]17.9 ~10 jQuery UI Effect (1) 플러그인 _ (참고사항 추가) (0)	2014.03.17
[모던웹] 17.8 jQuery Approach플러그인 (0)	2014.03.17
[모던웹] 17.7 애니메이션 지연 (0)	2014.03.17

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

TRstory

티스토리 뷰

[모던웹]6.10~18_객체지향 프로그래밍

'HMLT&CSS&JS > study' 카테고리의 다른 글

티스토리툴바