Bread's Blog

prototype 이란 자바스크립트에 존재하는 모든 객체가 가지고 있는 속성이다. 빈 객체도 기본적으로 [[prototype]] 을 가진다.  (* [[prototype]] 은 internal property) 간단하게 확인하는 방법 구글 크롬을 실행해서 '개발자 도구'를 연다. 그리고 Console 창에 new Object() 라고 입력한 뒤 실행한다. 빈 객체지만 __proto__ 속성이 있는걸 볼 수 있다. * [[prototype]]이 어떻게 정의되어 있는지는 브라우저마다 다를 수 있다. Prototype 에 메쏘드 정의하기 function enlarge() { this.width *= 2; this.height *= 2; } // 생성자 함수 function Rectangle(w, h) { this.width = w; this.height = h; } //prototype에 정의 Rectangle.prototype.enlarge = enlarge; var rect = new Rectangle(100, 200); rect.enlarge(); // 모든 인스턴스에서 공유된다. 브라우저에서 지원하는 기본 내장 객체에 대해서도 prototype에 속성을 추가하거나 삭제할 수 있다. 익스플로어의 경우 배열 객체에 unshift 메쏘드가 없는데 아래 소스 코드는 unshift  메쏘드를 추가해서 다른 브라우저와 호환이 되게 한다. if(!Array.prototype.unshift) { // 객체 탐지 Array.prototype.unshift = function () { this.reverse(); var a = arguments, var i = a.length; while(i--) { this.push(a[i]); } this.reverse()...

객체를 생성하는 또 다른 방법은 생성자(constructor)를 사용하는 것이다. 객체가 하나만 필요할 경우 객체 리터럴을 사용해서 생성하면 되지만 여러개의 객체 인스턴스가 필요한 경우라면 객체 생성자 함수(Object Constructor function)를 사용해야 한다. 객체 정의하기 function Rectangle() {     this.width = 100;     this.height = 200; } 초기화 파라미터를 사용해서 인스턴스를 초기화할 수도 있다. function Rectangle(w, h) {     this.width = w;     this.height = h; } 메쏘드를 정의해서 객체에 삽입해 보자. function enlarge() {     this.width *= 2;     this.height *= 2; } function Rectangle(w, h) {     this.width = w;     this.height = h;     this.enlarge = enlarge;     this.area = function () {         return this.width * this.height;     }; } new 키워드를 사용해서 객체의 인스턴스를 생성해 보자. var r = new Rectangle(100, 200); r.enlarge(); r.area(); /* return 80000 */ 여기서 new가 동작하는 방식은 자바의 ne...

객체를 생성하는 가장 쉬운 방법은 객체 리터럴을 사용하는 것이다. var book = {title:'Javascript', price:30000}; 객체 리터럴은 자바스크립트 표현식으로 평가될 때마다 새로운 객체를 생성하고 초기화한다. 객체 프로퍼티 값에 접근하기 위해서는 마침표(.) 연산자를 사용한다. book.title; 자바스크립트 객체는 연관 배열이기 때문에 아래처럼 프로퍼티에 접근할 수도 있다. book['title']; 프로퍼티 이름을 문자열로 표현함으로써 아래와 같은 구문이 가능하다. for(i = 0; i < 10; i++) {      addToBookShelf(book[seriesName + i]); } 이런 접근 방식은 프로퍼티 생성, 삭제에 있어서 매우 유연성 있게 처리할 수 있다. 이것은 Java나 C++ 등 타입 제약이 엄격한 프로그래밍 언어에는 불가능하지만 자바스크립트는 타입 제약이 느슨하기 때문에 이러한 접근 방식이 가능하다. 자바스크립트 객체는 연관 배열(associative array)이기 때문에 프로퍼티들을 열거할 수 있다. (연관 배열은 key와 value가 쌍으로 이루어진 데이터라는 점에서 HashMap 또는 Dictionary와 같다.) for(var property in book) {     console.debug(property); } Object() 생성자를 사용하면 빈 객체를 생성할 수 있다. (생성자에 대한 자세한 내용은 다음에..) var book = new Object(); 이렇게 생성된 빈 객체에 프로퍼티를 동적으로 설정할 수 있다. book.title = 'Javascript'; book.price = 20000; book.sale = function () {     return book.price * 0.9; }; sale 함수는 아래처럼 호출할 수 있으며 리턴값은 18000이다. boo...

자바스크립트는 객체 지향 프로그래밍(OOP)를 지원하는 언어이지만 Java나 Python 등 다른 OOP 언어와는 개념이나 구현 방법에 있어서 차이가 있다. 특히 객체를 상속하는 방법은 다른 언어들과 많이 다르므로 눈여겨 봐야 한다. 우선 자바스크립트 객체의 특징을 알아보자. 이름과 값으로 구성된 프로퍼티의 집합이다. 연관 배열로서의 객체 for/in 루프를 사용하여 열거할 수 있다. 함수도 객체이다. 객체를 생성하는 방법은 여러가지가 있다. 객체를 구성하는 프러퍼티는 동적으로 삽입 또는 삭제가 가능하다. 모든 객체는 생성자 함수(constructor 프로퍼티)를 가진다. 모든 객체는 프로토타입이라 불리는 내장 객체를 참조한다. 상속은 프로토타입을 통해 구현된다. 그럼 일단 이 정도로 정리하고 각 항목별로 자세한 설명은 다음 포스팅에 계속.. * 편의상 '클래스'라는 용어를 사용했지만 자바스크립트2.0의 클래스와는 다르다. 자바스크립트2.0은 스펙상으로만 존재하며 개발이 중단되었다. 지원하는 브라우저 또한 없다.

Javascript의 코딩 스타일은 Java와 거의 같다. camelcase 를 사용하며 underscore 는 특별한 경우가 아니면 사용하지 않는다. 객체 정의를 위한 function의 이름 첫글자는 대문자로 쓴다. function Person(name, age) {     this.name = name;     this.age = age;     // ... } 들여쓰기는 공백문자 네개를 사용한다. tab은 에디터 또는 사용자마다 다를 수 있으므로 사용하지 않는다. tab을 사용하는게 공백문자 네개를 사용하는것 보다 파일 싸이즈는 줄어들 수 있지만 compress를 해버리면 차이가 없어 진다. 자바스크립트는 변수 선언에 자유로운 언어이다. 즉, 선언하지 않아도 할당할 수 있다. 하지만 가독성, 잠재적인 버그 방지를 위해 변수 선언은 해주는것이 좋다. var i = 10; (function () {     for( var i = 0; i < 5; i++ ) {         console.debug(i);     } })(); console.debug(i); // 10이 출력된다. 만약 var가 없다면 5가 출력된다. 한줄에 여러개의 변수를 동시에 선언 및 할당을 할 수 있지만 혼란을 주어서는 안된다. var height = 166, weight = 50; var firstName; var lastName; 자바스크립트로 프로그래밍을 하다 보면 들여쓰기 레벨이 복잡해지는 경우가 많은데 아래처럼 코딩하면 된다. var collection = (function () {     var keys = [], values = [];     return { ...