본문 바로가기

Programming

 (465)
10. Javascript 프로토타입 체이닝 (4) - 데이터 타입 확장 앞의 아티클에서, 프로토타입 객체에 메서드를 선언하여 해당 객체에서 새로 선언한 메서드를 불러오는 예시를 보여드렸습니다. 이번에는 프로토타입 객체에서 데이터 타입을 확장하는 방식을 설명해 보도록 하겠습니다. 원리 자체는 간단해 보일 수 있지만, 사실 Javascript에서의 프로토타입 개념이 제대로 잡혀있지 않다면 설명해도 의미가 없는 내용입니다. 우선 Object의 프로토타입에 정의된 표준 메서드를 떠올려 봅시다. hasOwnProperty 또는 isPrototypeOf 같은 표준 메서드들은 Object를 통해 생성되었다고 볼 수 있는 객체들이 자유롭게 사용할 수 있었습니다. 이와 비슷한 방식으로 Number, String, Array의 경우 각각의 프로토타입이 가지고 있는 메서드들을 숫자, 문자열, ..
10. Javascript 프로토타입 체이닝 (3) - 생성자 함수로 생성한 객체의 프로토타입 체이닝 프로토타입 체이닝을 공부할 때는, 생성 패턴과 관계없이 다음의 원칙을 기본으로 숙지하고 있어야 합니다. 이는 앞선 아티클에서 살펴보았던 객체 리터럴 방식으로 생성한 객체이든, 이번 아티클에서 볼 생성자 함수를 통해 생성한 객체이든 마찬가지입니다. Javascript에서 모든 객체는 자신을 생성한 생성자 함수의 prototype 프로퍼티가 가리키는 객체를 자신의 부모 객체로 취급한다. 그럼 아래의 예제에서, 생성자 함수를 통해 객체를 생성한 다음 해당 객체에서는 프로토타입 체이닝이 어떻게 이루어지는지를 살펴보도록 하겠습니다. function Rapper(rapName, age, lable) { this.rapName = rapName; this.age = age; this.lable = lable; } R..
10. Javascript 프로토타입 체이닝 (2) - 리터럴 객체의 프로토타입 체이닝 명시적으로 생성자 함수를 사용하지 않고, 객체 리터럴 방식으로 생성한 객체의 경우 생성자 함수는 무엇일까요? 다룬 지 오래되어 잊어버리셨을 수도 있겠지만... 객체 리터럴 방식으로 생성된 객체의 생성자 함수는 Object( )입니다. 이는 가장 기본적인 원칙이므로 잊지 말고 다시 한번 상기하도록 합시다. Object( )라는 생성자 함수를 우리가 직접적으로 다룰 일은 많지는 않지만 이 역시 함수 객체의 한 종류입니다. 그렇다면 이 Object( ) 역시 prototype이라는 속성을 갖고 있겠죠? 여기서부터 생성자 함수에서 다루었던 내용을 그대로 적용시켜 봅시다. 객체 리터럴을 통해 생성한 객체는 어떤 [[Prototype]]을 갖게 될까요? 다름 아닌 Object.prototype을 가리키게 됩니다. ..
10. Javascript 프로토타입 체이닝 (1) - 프로토타입이 뭐지? Javascript는 기본적으로 프로토타입 기반의 객체 지향 프로그래밍을 지원합니다. JAVA나 C# 등의 여타 프로그래밍 언어의 상속 체계 등에 익숙한 사람이라면, 오히려 혼란스러워질 수 있는 구조를 갖고 있죠. 프로토타입 체이닝을 주제로 한 아티클에서는 Javascript에서 OOP 기능을 제공하는 기본 원리인 프로토타입과 프로토타입 체이닝을 살펴보도록 하겠습니다. 기존 언어와 비교해보도록 하겠습니다. 우선, Javascript 역시 ‘부모’객체와 ‘자식’ 객체의 개념을 사용할 수 있습니다. 하지만 다른 언어와의 차이점은, 객체를 생성하는 방식입니다. 근본적인 차이점은 바로 클래스의 개념이 없다는 점이죠. 이제까지 살펴본 내용을 되짚어보면, 객체를 리터럴 방식으로 선언하거나 생성자 함수를 사용해 생성..
9. Javascript에서의 함수 리턴 지금까지 함수의 선언과 실행, this 바인딩을 살펴보면서 산발적으로 Javascript 함수의 리턴 규칙에 대해서 함께 배워왔습니다. 하지만 함수의 리턴 규칙은 코드 작성에 있어서 무엇보다도 중요한 영역입니다. 이번 아티클에서는 함수의 리턴 규칙에 대해 다시 한번 정리해 보도록 하겠습니다. 일반 함수, 메서드 - 리턴 값 미지정 시 undefined 리턴 일반적인 함수 또는 메서드 상에서, 특정 값이나 객체를 리턴하지 않을 경우에는 undefined가 리턴됩니다. 간단한 원칙이지만, 아래 예제를 통해서 특정 변수에 이런 형식의 함수를 대입하여 직접 살펴보도록 하겠습니다. var noReturn = function() { console.log("got no return"); }; var result = ..
8. Javascript 함수 호출 (5) - call, apply 메서드와 this 바인딩 지금까지 우리는 Javascript 함수 호출(즉, 함수를 실행하는 것을 의미합니다) 과정에서 다양한 this 바인딩 규칙을 살펴보았습니다. 현재까지 메서드, 함수, new 연산자를 통한 함수 호출 과정에서 this 바인딩이 일어나는 것들은 규칙에 의한 묵시적(implicit)인 바인딩이었습니다. 하지만 지금부터는 어떤 객체를 this에 명시적(explicit)으로 바인딩 하는 방법을 살펴보고자 합니다. this 바인딩을 명시적으로 진행하기 위해서는 call과 apply 메서드를 사용해야 합니다. 이 중apply 메서드를 우선 살펴보도록 하겠습니다. apply 메서드는 기본적으로 모든 함수의 [[Prototype]] 객체인 Function.prototype에 정의된 함수이기 때문에, 모든 함수가 호출할 ..
8. Javascript 함수 호출 (4) - 생성자 함수 호출 시 this 바인딩 2 객체 리터럴 VS 생성자 함수 우리가 지금까지 사용해왔던 객체 리터럴을 통해 객체를 생성해 직접 객체를 선언하는 방식과 생성자 함수를 이용해 객체를 생성하는데 어떤 차이가 있을까요? 결론부터 이야기하자면, 프로토타입 객체에 있어서 차이가 발생하게 됩니다. Javascript에서의 객체 생성 기본 규칙은 "자신을 생성한 생성자 함수의 prototype 프로퍼티가 가리키는 객체를 자신의 [[Prototype]] 객체로 설정한다."입니다. 생성자 함수에서 강조했던 규칙이지만, 역시 객체 리터럴 방식의 객체 선언의 경우에도 적용되는 기본 규칙이죠. 여기서 생성자 함수의 경우는 알겠는데 객체 리터럴 방식일 경우에는 무엇이 생성자 함수가 될까요? 객체 리터럴 방식으로 객체를 생성할 때 이를 만들어내는 생성자 함수는..
8. Javascript 함수 호출 (4) - 생성자 함수 호출 시 this 바인딩 1 Javascript에서의 생성자 함수 동작 Javascript에서 객체를 생성하는 방법 중, 리터럴 방식을 제외하면 생성자 함수를 이용하는 방법이 있습니다. 일단 생성자 함수 생성에 있어서 C# 또는 JAVA에서의 생성자 개념은 (언뜻 비슷하지만) 그대로 적용시키기는 어려운 부분이 있습니다. 일단, 함수의 종류를 구분하지 않고 new 키워드를 사용하면 함수를 생성자 함수로 동작할 수 있게 됩니다. 그렇기 때문에 통상적으로 생성자 함수로 사용할 것을 의도하여 선언한 함수라면, 함수명 첫 문자를 대문자로 사용해줘야 합니다(문법적으로 강제된 것은 아닙니다). 그리고 this 키워드의 경우 이러한 생성자 함수 내부에서 사용될 때는 앞서 살펴본 메서드 / 함수 호출에서의 this 바인딩과는 다르게 사용됩니다. 생..

티스토리툴바