본문
객체(JavaScript)
# 객체
# 객체의 정의
- 자바스크립트의 객체는 이름과 값으로 구성된 프로퍼티들의 집합, 이름이 붙어 있는 데이터 값들의 모음이며, 복합 타입.
- 자바스크립트의 모든 객체는 Object 생성자 함수를 상속하며, 공통으로 Object에서 상속받은 프로퍼티와 메소드가 있음.
# 생성자: 객체를 생성하는 방법
1. 객체 리터럴을 사용
2. new연산자와 Object() 생성자 함수 호출을 이용해 객체를 만들고, 그 객체에 프로퍼티를 추가
Object() 생성자 함수를 사용하면 객체 리터럴 {}과 같이 빈 객체를 생성할 수 있음
1 2 3 4 | var empty = new Object(); var point = new Object(); point.x = 20; point.y = 30; | cs |
# 생성자: 객체를 정의하는 방법
- 원하는 타입의 객체를 생성하고 초기화하기 위해서 필요한 것이 생성자 함수를 직접 정의하는 것
- 생성자 함수는 객체를 만드는 틀
- 생성자의 이름은 new 연산자와 생성자 함수 호출을 통해 만들게 될 객체의 타입을 분명하게 나타내는 것이 좋음
- 생성자의 이름 첫문자를 대문자로 하는 이유도 다른 함수와 구별하기 위함
- 생성자 함수의 역할은 this 키워드가 나타내는 객체를 초기화할 뿐 다른 역할은 수행하지 않는 것을 원칙으로 함
- 생성자 함수의 구현 시 return 문은 사용하지 않음
# new 연산자, 생성자 함수, 그리고 this
- new 연산자가 생성하는 객체에는 아무런 프로퍼티도 정의되어 있지 않음
- 객체 생성 이후 new 연산자는 지정된 생성자 함수를 호출하여 명시된 인자들을 전달하고 방금 생성된 새 객체도 this 키워드를 통해 전달함
- 생성자 함수는 이 this 키워드를 사용하여 나름대로의 새 객체를 초기화하는데 이때 this는 생략할 수 없음
# 생성자 함수를 이용한 객체 생성
자바스크립트가 제공하는 기본 생성자 함수들이 아닌 사용자 정의 생성자 함수를 이용해 객체를 생성하는 방법도 기존의 방법과 동일
1 2 | var student1 = new Student('홍길동',20,'010-1234-5678'); var student2 = new Student('이순신',40,'010-1224-5218'); | cs |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <title>05-01</title> </head> <body> <script type="text/javascript"> // 생성자 함수: 객체를 정의하는 방법 // 이 함수는 Rectangle 생성자 함수로 설계되었습니다. function Rectangle(x, y, w, h) { // this 키워드는 생성자 함수에 의해 생성되는 객체를 나타냅니다. // 따라서 다음의 구문은 pointX, pointY, width, height 프로퍼티를 생성자 함수에 의해 // 생성되는 객체에 추가하고 매개변수 x, y, w, h로 전달된 값을 pointX, pointY, width, height // 프로퍼티에 대입하는 문장이 됩니다. this.pointX = x; this.pointY = y; this.width = w; this.height = h; this.toString = function() { return 'Rectangle : { pointX : ' + this.pointX + ', pointY : ' + this.pointY + ', width : ' + this.width + ', height : ' + this.height + ' }'; }; // 생성자 함수는 return 문을 만들지 않습니다. } // new 연산자는 아무런 프로퍼티도 정의되어 있지 않은 비어있는 객체를 생성합니다. // 객체 생성 이후 new 연산자는 지정된 생성자 함수를 호출하여 명시된 인자들을 전달하고 // 방금 생성돤 새로운 객체에 대한 참조를 생성자 함수 내의 this 키워드를 통해 전달합니다. // 생성자 함수는 이 this 키워드와 전달된 인자 값들을 사용하여 새로운 객체를 초기화합니다. var rect1 = new Rectangle(100, 120, 20, 30); var rect2 = new Rectangle(250, 300, 30, 50); document.writeln(rect1 + '<br/>'); document.writeln(rect2 + '<br/>'); document.writeln('<br/>'); </script> </body> </html> | cs |
# 객체의 멤버
- 객체의 프로퍼티와 메소드가 객체의 멤버
- 객체의 멤버는 일반적으로 생성자 함수 내에서 this 키워드를 이용해 추가되며, this 키워드는 new 연산자에 의해 새로 생성된 객체를 나타냄
- 자바스크립트에서 객체의 멤버는 런타임 시 동적으로 추가와 삭제가 가능하므로 주의가 필요
# 멤버 접근
- 특정 객체를 통하지 않고 생성자 함수를 통해서 접근되는 프로퍼티나 호출되는 메소드가 필요할 경우도 있음
- Math() 생성자 함수의 모든 메소드는 생성자 함수를 통해 호출됨
- 이러한 멤버 접근 방법은 생성자 함수의 프로퍼티나 메소드를 만들면 전역변수나 전역함수를 사용하는 것보다 이름 충돌의 문제를 해결해줄 수 있다는 점에서 유용
1 2 3 | Math.random(); // 0~1 사이의 수를 반환 Math.round(1.58); // 2를 반환 Math.PI; // 원주율을반환 | cs |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <title>05-02</title> </head> <body> <script type="text/javascript"> // 생성자 함수의 프로퍼티와 메소드 function Area() { } // 빈 생성자 함수 : Area() // Area 생성자 함수에 삼각형의 넓이를 계산하는 메소드를 추가합니다. // Area 생성자 함수의 프로퍼티로 추가되어 Area 생성자 함수를 통해서만 접근합니다. Area.triangle = function(base, height) { return base * height / 2; }; // Area 생성자 함수에 사각형의 넓이를 계산하는 메소드를 추가합니다. // Area 생성자 함수의 프로퍼티로 추가되어 Area 생성자 함수를 통해서만 접근합니다. Area.rectangle = function(width, height) { return width * height; }; // Area 생성자 함수에 원의 넓이를 계산하는 메소드를 추가합니다. // Area 생성자 함수의 프로퍼티로 추가되어 Area 생성자 함수를 통해서만 접근합니다. Area.circle = function(radius) { return Math.PI * Math.pow(radius, 2); }; document.writeln('Area.triangle(10, 6): ' + Area.triangle(10, 6) + '<br/>'); document.writeln('Area.rectangle(10, 6): ' + Area.rectangle(3, 20) + '<br/>'); document.writeln('Area.circle(5): ' + Area.circle(5).toFixed(2) + '<br/>'); document.writeln('<br/>'); </script> </body> </html> | cs |
# 프로토타입 객체
- 자바스크립트의 모든 객체는 프로토타입이라 불리는 객체를 내부적으로 참조
- 프로토타입 객체의 실체는 new 연산자와 Object 생성자 함수 호출을 통해 생성한 Object 객체
- 객체는 프로토타입 객체에 있는 프로퍼티를 상속
- 프로토타입 객체를 이용하면 좀 더 효율적으로 메소드를 추가 할 수 있음
# prototype 프로퍼티
- new 연산자는 빈 객체를 생성하고, 해당 객체의 prototype 프로퍼티를 생성자 함수의 prototype 프로퍼티 값을 이용해 설정
- 모든 함수에는prototype 프로퍼티가 있으며, 함수가 정의될 때 생성되고 초기화됨
- 프로토타입 객체는 생성자 함수와 연결되고, 이 생성자 함수를 통해서 생성되는 객체들은 생성자 함수와 연결된 프로토타입 객체의 프로퍼티들을 똑같이 상속
- 프로토타입 객체가 메소드나 상수와 같은 프로퍼티들을 위치시키기에 적합한 곳
- 프로토타입 객체에 의한 상속을 통해 메모리 사용량을 줄일 수 있으며, 프로토타입 객체에 프로퍼티가 변경되거나 추가되어도 기존 객체들 역시 변경되거나 추가된 프로퍼티를 바로 사용할 수 있다는 장점이 있음
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | // Rectangle 생성자에 prototype 프로퍼티에 area 메소드를 추가 // 여러개 객체의 프로토타입객체를 상속받아 사용할 수 있게되는 코드 Rectangle.prototype.area = function() { return this.width * thos.height; } <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <title>05-03</title> </head> <body> <script type="text/javascript"> // 프로토타입 객체와 prototype 프로퍼티 function Rectangle(x, y, w, h) { // Rectangle 생성자 함수 & 4개의 프로퍼티 this.pointX = x; this.pointY = y; this.width = w; this.height = h; } // 모든 함수가 가지고 있는 prototype 프로퍼티는 프로토타입 객체에 대한 연결을 가집니다. // Rectangle 생성자 함수의 prototype 프로퍼티가 참조하는 객체에 toString 이란 // 이름의 프로퍼티를 추가하는데 그 값으로 함수 리터럴을 대입하여 메소드를 추가합니다. // 이 메소드는 Rectangle 생성자 함수를 통해 생성되는 객체에 상속될 것입니다. Rectangle.prototype.toString = function() { // Rectangle 생성자를 통해 만든 모든 객체들은 앞으로 toString 메소드에 접근 가능 return 'Rectangle : { pointX : ' + this.pointX + ', pointY : ' + this.pointY + ', width : ' + this.width + ', height : ' + this.height + ' }'; }; // 위의 toString() 메소드와 마찬가지로 Rectangle 생성자 함수의 prototype 프로퍼티가 // 참조하는 객체에 area() 메소드를 추가하여, Rectangle 생성자 함수를 통해 생성되는 // 객체에 상속될 것입니다. Rectangle.prototype.area = function() { return this.width * this.height; }; var rect1 = new Rectangle(100, 120, 20, 30); var rect2 = new Rectangle(250, 300, 30, 50); document.writeln('rect1: ' + rect1 + '<br/>'); document.writeln('rect1.area(): ' + rect1.area() + '<br/>'); document.writeln('rect2: ' + rect2 + '<br/>'); document.writeln('rect2.area(): ' + rect2.area() + '<br/>'); document.writeln('<br/>'); </script> </body> </html> | cs |
# constructor 속성
- 자바스크립트의 모든 객체는 객체를 초기화하는데 사용하는 생성자 함수를 참조하는 constructor 프로퍼티를 가지고 있음
- constructor 프로퍼티를 이용해 객체의 타입을 판단할 수 있으며, 객체 생성도 가능
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <title>05-04</title> </head> <body> <script type="text/javascript"> // consturctor 프로퍼티 function Rectangle(x, y, w, h) { this.pointX = x; this.pointY = y; this.width = w; this.height = h; } Rectangle.prototype.toString = function() { return 'Rectangle : { pointX : ' + this.pointX + ', pointY : ' + this.pointY + ', width : ' + this.width + ', height : ' + this.height + ' }'; }; Rectangle.prototype.area = function() { return this.width * this.height; }; var rect1 = new Rectangle(100, 120, 20, 30); if (rect1.constructor == Rectangle) document.writeln('rect1 객체의 생성자 함수는 Rectangle입니다.<br/>'); if (rect1.constructor.prototype == Rectangle.prototype) document.writeln('rect1 객체의 생성자 함수의 프로토타입 객체는 Rectangle 생성자함수의 프로토타입 객체와 동일합니다.<br/>'); var rect2 = new rect1.constructor(250, 300, 30, 50); document.writeln('rect2: ' + rect2 + '<br/>'); document.writeln('<br/>'); </script> </body> </html> | cs |
# 네임스페이스
- 자바스크립트는 네임스페이스 구조를 지원하지 않음
- 빈 객체를 이용해 네임스페이스와 같은 기능을 제공할 수 있음
- 네임스페이스를 정의하기 위해 구현 코드가 없는 생성자 함수를 작성하고, 생성자 함수에 프로퍼티를 추가하는 것과 동일한 방법으로 하위의 생성자 함수를 정의
- 네임스페이스를 사용할 경우 하위 생성자 함수를 이용해 객체를 생성할 경우, 네임스페이스를 포함한 FQN#으로 생성자 함수를 호출해야 함에 유의
- 출처 : SK Planet 상생혁신센터 javascript 교육과정
댓글